移动web真机调试方案

对于前端开发来说，在pc端使用等浏览器的开发者工具简直是好用到爆，手机模拟器可以帮助开发调试移动端web页面，然而在真机内调试起移动端web页面的时候就显得无从下手。目前已经有不少移动端的真机调试工具，本人在综合使用后推荐以下两类调试方案：/真机调试和 spy-调试。
1. 手机模拟器
手机模拟器适合简单移动网页调试，支持模拟触摸事件，还能够模拟各种移动设备的user-agent和屏幕大?。?是移动端web开发的主要调试方式。下面提供一些常用的user-agent：
：
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
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
微信：
【移动web真机调试方案】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.30AlipayDefined(nt:WIFI,ws:360|640|1.5) AliApp(AP/9.0.1.073001) AlipayClient/9.0.1.073001 GCanvas/1.4.2.15

2. /真机调试
移动端开发，当然是优先真机调试，真机调试更加顺畅，支持js断点调试以及绝大多数一样的调试功能（不支持扩展）。
2.1+
手机端安装浏览器，使用USB连接到PC ，同时打开手机的USB调试模式。
然后在PC端打开浏览器，地址栏中输入: ://，选中" USB "选项，打开页面进行调试。
注意：
部分安卓手机开发者模式的打开方式比较隐蔽：设置 > 关于手机 > 内部版本号，连续点击七次，退回上一级菜单，才能看到"开发者模式"安卓手机还可以打开微信App的的debug模式，只需要在微信里访问，在打开的页面里将调试模式打开并重启微信即可，然后打开://、翻墙、连接手机就可以调试了2.2 iOS +
和Mac自带浏览器，但同样要使用USB连接到PC，然后分别对Mac和进行如下设置：
通过手机的来打开 H5 页面，然后将Mac上的浏览器打开，选择开发 -> ，就出现调试界面了，在上也能断点调试js了。
注意：
Mac上可以使用模拟器（需要先安装Xcode），可以模拟调试多个版本手机，还可以配合来调试页面，此模拟器的完成度几乎可以替代真机。
3. spy-调试
然而，很多场景下/的真机调试有局限性，例如：在微信或其他App/浏览器中打开的页面，由于不能直接在 / 中打开，因此不能直接使用浏览器真机调试工具。
市面上的工具有不少，、等等，实际使用下来还是更推荐spy-，spy-是一站式页面调试、抓包工具，可以远程调试任何手机浏览器页面，任何手机移动端（如：微信，等），支持HTTP/HTTPS ，无需USB连接设备。地址：。
spy-内部集成了，通过代理的方式拦截所有html自动注入所需的js代码，简化了需要给每个调试的页面添加js代码。spy-原理是拦截所有html页面请求注入所需要的js代码，让页面调试更加方便，且支持HTTPS 。
安装和使用方式官方文档已经写的非常详细，此处不再赘述：
4. 总结
针对上述移动web的调试方案，进行简单总结：
大部分不涉及真机调试的情况优先使用手机模拟器进行开发调试。需要真机调试时优先使用真机+浏览器开发工具进行调试。/真机调试应用场景受限时可以使用spy-进行调试抓包。

文章插图