前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >移动web真机调试方案

移动web真机调试方案

原创
作者头像
CS逍遥剑仙
发布2019-09-03 19:46:34
3K0
发布2019-09-03 19:46:34
举报
文章被收录于专栏:禅林阆苑

移动web真机调试方案

toc

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:

代码语言:javascript
复制
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:

代码语言:javascript
复制
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:

代码语言:javascript
复制
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:

代码语言:javascript
复制
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

支付宝:

代码语言:javascript
复制
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"选项,打开页面进行调试。

注意: 部分安卓手机开发者模式的打开方式比较隐蔽:设置 > 关于手机 > 内部版本号,连续点击七次,退回上一级菜单,才能看到"开发者模式" 安卓手机还可以打开微信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

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 移动web真机调试方案
    • 1. Chrome手机模拟器
      • 2. Chrome/Safari真机调试
        • 2.1 Android + chrome
        • 2.2 iOS + Safari
      • 3. spy-debugger调试
        • 4. 总结
        相关产品与服务
        云开发 CLI 工具
        云开发 CLI 工具(Cloudbase CLI Devtools,CCLID)是云开发官方指定的 CLI 工具,可以帮助开发者快速构建 Serverless 应用。CLI 工具提供能力包括文件储存的管理、云函数的部署、模板项目的创建、HTTP Service、静态网站托管等,您可以专注于编码,无需在平台中切换各类配置。
        领券
        问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档