代码改变世界

chrome远程调试手机网页

2014-12-30 11:14  纳须弥于芥子  阅读(864)  评论(0)    收藏  举报

chrome远程调试手机网页

  1. 必要条件

    chrome32以上
    手机usb驱动安装完成
    android4.0以上和 android chrome浏览器
    webview调试需要android4.4+且app配置了允许debug
    (不知是否配置不对还是微信和支付宝不支持,微信(6.0.2)与支付宝(8.4)都不支持webview调试)

  2. 准备工作,安装手机驱动,去各手机厂商主页上下载.手机安装chrome浏览器,注意电脑上的chrome版本应高于手机上的chrome版本

  3. 手机连接电脑,当出现符号,以及设备管理器中出现

    时则说明安装驱动成功,否则重新安装

  4. 打开chrome,locaiton栏输入chrome:\inspect
    可能一开始会出现以下画面

    此时确认下驱动是否安装正确,以及手机的usb调试是否打开,如果安装正确,则刷新页面,或者在手机上切换下usb连接方式,
    如果手机被识别则会出现如下画面

  5. 点击inspect,则会进入调试界面,第一次初始化的时候可能会有点慢,以后就好了

  6. 以上基本配置只能调试在线网页,如果需要调试localhost网页,则需要配置Port forwarding

    此时可以调试localhost:7015访问本地网址了

  7. 有时候我们调试并不会只通过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的内容了

  8. 以上配置在电脑chrome(39.0.2171.71 m), 手机chrome (39.0.2171.93),android 4.4.2下测试通过

参考 Remote Debugging on Android with Chrome 需代理