chrome远程调试手机网页
2014-12-30 11:14 纳须弥于芥子 阅读(848) 评论(0) 编辑 收藏 举报chrome远程调试手机网页
-
必要条件
chrome32以上
手机usb驱动安装完成
android4.0以上和 android chrome浏览器
webview调试需要android4.4+且app配置了允许debug
(不知是否配置不对还是微信和支付宝不支持,微信(6.0.2)与支付宝(8.4)都不支持webview调试) -
准备工作,安装手机驱动,去各手机厂商主页上下载.手机安装chrome浏览器,注意电脑上的chrome版本应高于手机上的chrome版本
-
手机连接电脑,当出现
符号,以及设备管理器中出现
时则说明安装驱动成功,否则重新安装 -
打开chrome,locaiton栏输入chrome:\inspect
可能一开始会出现以下画面
此时确认下驱动是否安装正确,以及手机的usb调试是否打开,如果安装正确,则刷新页面,或者在手机上切换下usb连接方式,
如果手机被识别则会出现如下画面
-
点击inspect,则会进入调试界面,第一次初始化的时候可能会有点慢,以后就好了
-
以上基本配置只能调试在线网页,如果需要调试localhost网页,则需要配置Port forwarding
此时可以调试localhost:7015访问本地网址了
-
有时候我们调试并不会只通过localhost,大部分时间会在本地通过代理服务器配置域名映射访问,那么上面配置就无法达成目标了
已http://angular.test.com:7014/angular-guide-zh/index.html#/api为例,配置Port forward
手机连接wifi,修改网络.高级选项->代理->手动,代理服务器主机名配置为localhost,,代理服务器端口配置为port forwarding中的9000端口
上面配置完成就可以访问到http://angular.test.com:7014/angular-guide-zh/index.html#/api的内容了 -
以上配置在电脑chrome(39.0.2171.71 m), 手机chrome (39.0.2171.93),android 4.4.2下测试通过
符号,以及设备管理器中出现
