hybird APP 虽然显示效果和编译前的前端页面大致相同,但是其中操作可能会调用一些浏览器中没有的接口,从而产生一些意料之外的问题,因此了解和掌握如何调试就变得尤为重要。

本文简要介绍了如何利用chrome浏览器(Chrome/55.0.2883.87)来进行调试hybird APP,并记录了一些作者自身存疑的问题。

1) 使用数据线连接电脑

2) 打开手机开发者模式

  1) 进入设置页面

  

  2) 翻到页面底部,点击关于手机,进入详情页,连续多次点击版本号,系统提示进入开发者模式,在设置里面将会多出开发人员选项。

  

  3) 进入开发人员选项中,打开USB调试授权。

3) 打开chrome://inspect页面

  通常在完成以上三步后,在inspect页面就会出现可调式对象,不过可能会出现以下问题:

  1) 页面空白

    如果你打开inspect页面发现什么都没有的时候,一般的原因是: 没有开VPN导致无法访问外网,连接上VPN即可。

  2) 页面并非空白,但是没有设备显示

  

  那么一般的原因是,设备没有正确安装驱动,所以无法读出。可以利用驱动精灵检测一下然后安装配套驱动,最后刷新页面,就能解决问题。

4) 在设备列表中,选择指定的设备进行调试。

疑问:

1) 如何指定设备名称?

  我曾遇到在一台电脑上连接两个同类型设备的情况,我分别为两台设备指定了名称,但是在设备列表中并无变化。不知道如何才能改变修改名称?

通过chrome inspect 来调试手机hybird APP的更多相关文章

  1. 谷歌浏览器chrome://inspect/#devices调试webview的页面和控制台布局错乱问题

    谷歌浏览器chrome://inspect/#devices调试webview的页面和控制台布局错乱问题 : 谷歌浏览器的版本过高,选择60版本即可: 版本 60.0.3080.5(正式版本)

  2. chrome inspect 远程调试H5

    chrome://inspect/#devices 一个内置于chrome的远程调试指令,满足远程调试的几个必须条件 1,能够访问https://chrome-devtools-frontend.ap ...

  3. chrome inspect 离线调试-工具包 怎么使用

    1.找到相关目录: C:\Users\当前用户\AppData\Local\Google\Chrome\User Data\Default 2.找到以下文件夹: 1.Application Cache ...

  4. 关于chrome的开发调试方式

    chrome://inspect/#devices 调试移动设备app chrome://version 查看chrome浏览器版本信息 chrome://components/ 查看组件信息 上面的 ...

  5. 移动端Chrome Inspect调试 (Android通过Chrome Inspect调试WebView的H5)(ios手机safari,chrome调试 windows)(如果inspect的时候,是空白)

    ios +chrome调试 引用https://segmentfault.com/a/1190000015428430 iTunes ios-webkit-debug-proxy-1.8-win64- ...

  6. chrome浏览器使用chrome://inspect调试app 网页,打开空白的问题

    使用chrome浏览器,输入chrome://inspect可以调试android app里面的网页,如果inspect的时候,是空白, 问题截图: 那就在C:\Windows\System32\dr ...

  7. Android通过Chrome Inspect调试WebView出现404页面的解决方法

    无论是调试Web页面还是调试Hybrid混合应用,只要是调试Android的webview,都需要使用Chrome://inspect进行调试.但是国内开发者会出现404 Not Found错误: 解 ...

  8. 混合开发使用Chrome Inspect调试WebView预览手机界面和定位元素

    使用Chrome Inspect调试混合应用可以帮助我们排查问题.例如定位元素,快速修改CSS样式并实时查看效果.其实微信开发也是一种混合开发模式,微信可以看做一个原生的Android App搭配了一 ...

  9. Android通过Chrome Inspect调试WebView的H5 App出现空白页面的解决方法(不需要FQ)

    本文系博主原创,未经许可不得转载.如未经本人同意,私自转载或盗取资源提供下载,本人保留追究其法律责任的权利. 调试基于WebView的Hybrid App最舒服的工具当然是Chrome自带的开发者工具 ...

随机推荐

  1. 基于 Koa平台Node.js开发的KoaHub.js获取/设置会话功能代码

    koa-session2 Middleware for Koa2 to get/set session use with custom stores such as Redis or mongodb ...

  2. 2243: [SDOI2011]染色

    2243: [SDOI2011]染色 Time Limit: 20 Sec  Memory Limit: 512 MBSubmit: 3113  Solved: 1204[Submit][Status ...

  3. 用C写一个web服务器(一) 基础功能

    .container { margin-right: auto; margin-left: auto; padding-left: 15px; padding-right: 15px } .conta ...

  4. 你真的会 snapshot 吗? - 每天5分钟玩转 OpenStack(163)

    ​这是 OpenStack 实施经验分享系列的第 13 篇. instance snapshot 操作可用于备份或者将 instance 保存为新的 image.如果在生产系统中执行 snapshot ...

  5. C++类对象大小的计算

    (一)常规类大小计算 C++类对象计算需要考虑很多东西,如成员变量大小,内存对齐,是否有虚函数,是否有虚继承等.接下来,我将对此举例说明. 以下内存测试环境为Win7+VS2012,操作系统为32位 ...

  6. HTML中的table布局

    <table width="100" height="50" border="1" bgcolor="blue"& ...

  7. 读书笔记 effective c++ Item 37 永远不要重新定义继承而来的函数默认参数值

    从一开始就让我们简化这次的讨论.你有两类你能够继承的函数:虚函数和非虚函数.然而,重新定义一个非虚函数总是错误的(Item 36),所以我们可以安全的把这个条款的讨论限定在继承带默认参数值的虚函数上. ...

  8. 我的Python之路【第一篇】:Python简介和入门

    1.搭建Python环境 windows下搭建python环境 1.下载安装包 2.Windows中Python的安装包是后缀名为msi的安装包,直接双击下一步即可 3.Windwos环境下默认的安装 ...

  9. Node.js服务端框架谁才是你的真爱

    1. Express 背景: Express, 疯一般快速(而简洁)的服务端JavaScript Web开发框架,基于Node.js和V8 JavaScript引擎. Express 是一个基于 No ...

  10. iOS面试必看经典试题分析

    > **不用临时变量怎么实现两个数据的交换?** 方式一:加减法的运算方式求解new_b = a - b + b = a;new_a = a + b - a = b;一个简单的运算方式,最重要的 ...