通过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自带的开发者工具 ...
 
随机推荐
- BMP图片格式模型(2)
			
因为公司的主要业务是图像识别相关的,因此对图像处理.识别是我学习的重点.虽然写程序也不少年了,但是对于图像处理领域,我还是一个新兵.对很多基础的概念也还是存在盲区,所以想在边学边做的过程中,对一些概念 ...
 - 购买的wemall 6.0商城系统源码分享
			
使用方法 1.解压目录 2.cd wemall6 && npm i 3.配置config下的config.json 4.npm start 摒弃以往的开发框架thinkphp,使用no ...
 - 3893: [Usaco2014 Dec]Cow Jog
			
3893: [Usaco2014 Dec]Cow Jog Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 174 Solved: 87[Submit] ...
 - Python--校园网爬虫记
			
查成绩,算分数,每年的综合测评都是个固定的过程,作为软件开发者,这些过程当然可以交给代码去做,通过脚本进行网络请求获取数据,然后直接进行计算得到基础分直接填表就好了,查成绩再手动计算既容易出错也繁琐, ...
 - SQL基本用法-行转列
			
/* SELECT <非透视的列>, [第一个透视的列] AS <列名称>, [第二个透视的列] AS <列名称>, ... [最后一个透视的列] AS <列 ...
 - Maven项目搭建(一):Maven初体验
			
今天给大家介绍一个项目管理和综合工具:Maven. Maven: maven读作 ['meivin],本意是指可以被信任的领域专家,致力于传播知识(来自于http://en.wikipedia.org ...
 - 启动tomcat直接报错:org.apache.tomcat.util.digester.Digester startElement
			
今天很奇怪,自己手动搭建了一个ssm(spring+springmvc+mybatis)的项目,然后添加到tomcat下,启动直接报错: 2017-3-19 9:24:47 org.apache.to ...
 - 连接池 DBCP c3p0以及分页的案例
			
1. 连接池 思考: 程序中连接如何管理? 连接资源宝贵:需要对连接管理 连接: a) 操作数据库,创建连接 b) 操作结束, 关闭! 分析: 涉及频繁的连接的打开.关闭,影响程序的运行效率! 连接 ...
 - 2015.07.12hadoop伪分布安装
			
hadoop伪分布安装 Hadoop2的伪分布安装步骤[使用root用户用户登陆]other进去超级用户拥有最高的权限 1.1(桥接模式)设置静态IP ,,修改配置文件,虚拟机IP192.168. ...
 - jsonp原生js代码示例
			
/* mightygumball.js */ /* * get the content of a JSON file using JSONP * update every 3 seconds. * * ...