移动web真机调试方案

移动web真机调试方案

Write By CS逍遥剑仙
我的主页: www.csxiaoyao.com
GitHub: github.com/csxiaoyaojianxian
Email: sunjianfeng@csxiaoyao.com
QQ: 1724338257

对于前端开发来说，在pc端使用chrome等浏览器的开发者工具简直是好用到爆，Chrome手机模拟器可以帮助开发调试移动端web页面，然而在真机内调试起移动端web页面的时候就显得无从下手。目前已经有不少移动端的真机调试工具，本人在综合使用后推荐以下两类调试方案：chrome/safari真机调试 和 spy-debugger调试。

1. Chrome手机模拟器

Chrome手机模拟器适合简单移动网页调试，支持模拟触摸事件，还能够模拟各种移动设备的user-agent和屏幕大小，是移动端web开发的主要调试方式。下面提供一些常用的user-agent：

QQ Android：

Mozilla/5.0 (Linux; Android 5.1; OPPO R9tm Build/LMY47I; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/53.0.2785.49 Mobile MQQBrowser/6.2 TBS/043128 Safari/537.36 V1_AND_SQ_7.0.0_676_YYB_D PA QQ/7.0.0.3135 NetType/4G WebP/0.3.0 Pixel/1080

QQ iOS：

Mozilla/5.0 (iPhone; CPU iPhone OS 10_2_1 like Mac OS X) AppleWebKit/602.4.6 (KHTML, like Gecko) Mobile/14D27 QQ/6.7.1.416 V1_IPH_SQ_6.7.1_1_APP_A Pixel/750 Core/UIWebView NetType/4G QBWebViewType/1

微信 Android：

Mozilla/5.0 (Linux; Android 5.1; OPPO R9tm Build/LMY47I; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/53.0.2785.49 Mobile MQQBrowser/6.2 TBS/043220 Safari/537.36 MicroMessenger/6.5.7.1041 NetType/4G Language/zh_CN

微信 iOS：

Mozilla/5.0 (iPhone; CPU iPhone OS 10_2_1 like Mac OS X) AppleWebKit/602.4.6 (KHTML, like Gecko) Mobile/14D27 MicroMessenger/6.5.6 NetType/4G Language/zh_CN

支付宝：

Mozilla/5.0 (Linux; U; Android 4.2.1; zh-cn; HUAWEI G610-T00 Build/HuaweiG610-T00)   AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30   AlipayDefined(nt:WIFI,ws:360|640|1.5) AliApp(AP/9.0.1.073001) AlipayClient/9.0.1.073001 GCanvas/1.4.2.15

2. Chrome/Safari真机调试

移动端开发，当然是优先真机调试，真机调试更加顺畅，支持js断点调试以及绝大多数Chrome DevTools一样的调试功能（不支持Chrome扩展）。

2.1 Android + chrome

手机端安装Chrome浏览器，使用USB连接到PC，同时打开手机的USB调试模式。
然后在PC端打开chrome浏览器，地址栏中输入: chrome://inspect，选中"Discover USB devices"选项，打开页面进行调试。

注意：

1. 部分安卓手机开发者模式的打开方式比较隐蔽：设置 > 关于手机 > 内部版本号，连续点击七次，退回上一级菜单，才能看到"开发者模式"
2. 安卓手机还可以打开微信App的webview的debug模式，只需要在微信里访问http://debugx5.qq.com，在打开的页面里将调试模式打开并重启微信即可，然后打开chrome://inspect、翻墙、连接手机就可以调试了

2.2 iOS + Safari

iPhone和Mac自带Safari浏览器，但同样要使用USB连接到PC，然后分别对Mac和iPhone进行如下设置：

• Mac浏览器设置：Safari -> 偏好设置 -> 高级 -> 勾选"在菜单栏中显示开发"
• iPhone 设置：设置 -> Safari -> 高级 -> 打开 Web 检查器

通过手机的 Safari 来打开 H5 页面，然后将Mac上的Safari浏览器打开，选择开发 -> iPhone，就出现调试界面了，在iPhone上也能断点调试js了。

注意：

Mac上可以使用Simulator模拟器（需要先安装Xcode），可以模拟调试多个版本iPhone手机，还可以配合Safari来调试页面，此模拟器的完成度几乎可以替代真机。

3. spy-debugger调试

然而，很多场景下Chrome/Safari的真机调试有局限性，例如：在微信或其他App/浏览器中打开的页面，由于不能直接在 chrome/safari 中打开，因此不能直接使用浏览器真机调试工具。

市面上的工具有不少，weinre、vConsole等等，实际使用下来还是更推荐spy-debugger，spy-debugger是一站式页面调试、抓包工具，可以远程调试任何手机浏览器页面，任何手机移动端webview（如：微信，HybridApp等），支持HTTP/HTTPS，无需USB连接设备。github地址：https://github.com/wuchangming/spy-debugger。

spy-debugger内部集成了weinre，通过代理的方式拦截所有html自动注入weinre所需的js代码，简化了weinre需要给每个调试的页面添加js代码。spy-debugger原理是拦截所有html页面请求注入weinre所需要的js代码，让页面调试更加方便，且支持HTTPS。

安装和使用方式官方文档已经写的非常详细，此处不再赘述：https://github.com/wuchangming/spy-debugger/blob/master/README.md

4. 总结

针对上述移动web的调试方案，进行简单总结：

1. 大部分不涉及真机调试的情况优先使用Chrome手机模拟器进行开发调试。
2. 需要真机调试时优先使用真机+浏览器开发工具进行调试。
3. Chrome/Safari真机调试应用场景受限时可以使用spy-debugger进行调试抓包。