通过chrome inspect 来调试手机hybird APP
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的更多相关文章
- 谷歌浏览器chrome://inspect/#devices调试webview的页面和控制台布局错乱问题
谷歌浏览器chrome://inspect/#devices调试webview的页面和控制台布局错乱问题 : 谷歌浏览器的版本过高,选择60版本即可: 版本 60.0.3080.5(正式版本)
- chrome inspect 远程调试H5
chrome://inspect/#devices 一个内置于chrome的远程调试指令,满足远程调试的几个必须条件 1,能够访问https://chrome-devtools-frontend.ap ...
- chrome inspect 离线调试-工具包 怎么使用
1.找到相关目录: C:\Users\当前用户\AppData\Local\Google\Chrome\User Data\Default 2.找到以下文件夹: 1.Application Cache ...
- 关于chrome的开发调试方式
chrome://inspect/#devices 调试移动设备app chrome://version 查看chrome浏览器版本信息 chrome://components/ 查看组件信息 上面的 ...
- 移动端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- ...
- chrome浏览器使用chrome://inspect调试app 网页,打开空白的问题
使用chrome浏览器,输入chrome://inspect可以调试android app里面的网页,如果inspect的时候,是空白, 问题截图: 那就在C:\Windows\System32\dr ...
- Android通过Chrome Inspect调试WebView出现404页面的解决方法
无论是调试Web页面还是调试Hybrid混合应用,只要是调试Android的webview,都需要使用Chrome://inspect进行调试.但是国内开发者会出现404 Not Found错误: 解 ...
- 混合开发使用Chrome Inspect调试WebView预览手机界面和定位元素
使用Chrome Inspect调试混合应用可以帮助我们排查问题.例如定位元素,快速修改CSS样式并实时查看效果.其实微信开发也是一种混合开发模式,微信可以看做一个原生的Android App搭配了一 ...
- Android通过Chrome Inspect调试WebView的H5 App出现空白页面的解决方法(不需要FQ)
本文系博主原创,未经许可不得转载.如未经本人同意,私自转载或盗取资源提供下载,本人保留追究其法律责任的权利. 调试基于WebView的Hybrid App最舒服的工具当然是Chrome自带的开发者工具 ...
随机推荐
- Spring+SpringMVC+MyBatis+easyUI整合基础篇(十)SVN搭建
日常啰嗦 前面一篇文章讲了一下版本控制,但其实这一篇并没有打算讲细节的,感觉应该自己去动手弄一下,后来考虑了一下,版本控制真的挺重要的,如果自己实在搭建不好反而不去使用的话,真的有点可惜,当然这些话是 ...
- servlet匹配规则和顺序
1. 写法 ①完全匹配:以“/”开头,以字母(非“*”)结束 如:<url-pattern>/test/list.do</url-pattern> ②目录匹配:以“/” ...
- 快速上手UIBezierPath
UIBezierPath主要用来绘制矢量图形,它是基于Core Graphics对CGPathRef数据类型和path绘图属性的一个封装,所以是需要图形上下文的(CGContextRef),所以一般U ...
- CAS进行https到http的改造方案,结合cookie源码分析
先说具体的改造方案: 服务端: 一.CAS Server端的修改 1.找到cas\WEB-INF\deployerConfigContext.xml 对以下Bean增加参数p:requireSecur ...
- Android之XListView下拉刷新,更新网络美女图
一.简介: 下拉刷新是一种特定的手动刷新交互,和其他的同类操作不同的地方在于它采用了更加直觉的下拉操作,所以它的交互足够清晰明显. 下拉刷新主要用在类似ListView这样的控件,设计下拉刷新有三 ...
- CSS媒体查询适配范例
/*orientation:portrait纵向*/ /*orientation:landscape横向*/ /*iPhone 4*/ @media only screen and (min-devi ...
- webpack引入handlebars报错'You must pass a string or Handlebars AST to Handlebars.compile'
背景: webpack作为一个部分替代打包工具和模块化工具的优秀选择出现,作为尝试,也为了构建自己习惯的前端开发方式,我尝试了将webpack和自己常用handlebars模板引擎结合.整体项目背景为 ...
- MCMC(二)马尔科夫链
MCMC(一)蒙特卡罗方法 MCMC(二)马尔科夫链 MCMC(三)M-H采样和Gibbs采样(待填坑) 在MCMC(一)蒙特卡罗方法中,我们讲到了如何用蒙特卡罗方法来随机模拟求解一些复杂的连续积分或 ...
- Windows Mobile 常用键值VK对应表
#define VK_TSOFT2 VK_F2 // Softkey 2 #define VK_TTALK VK_F3 // Talk ...
- synchronized关键字
最近重新梳理了下java的synchronized相关内容,希望能帮助到有需要的朋友们. 主要阐述以下几个问题: 1.非static方法前加synchronized class Demo{ synch ...