移动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 中打开,因此不能直接使用浏览器真机调试工具。

市面上的工具有不少,weinrevConsole等等,实际使用下来还是更推荐spy-debuggerspy-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进行调试抓包。

www.csxiaoyao.com

【By CS逍遥剑仙】 未经允许不得转载:禅林阆苑 » 移动web真机调试方案 【原创】

赞 (0) 打赏

评论 0

如果觉得有用就请我喝一杯咖啡吧

支付宝扫一扫打赏

微信扫一扫打赏