这些 H5 移动端调试你都会了么
概述
调试对于程序员来说算是家常便饭了,没有人能说我写的代码没问题,不需要调试。对于 PC web 来说,绝大部分可以使用 Chrome + 抓包工具完成调试。但是对于 H5,场景相对复杂,对应的调试方式也是有很多,接下来将对 H5 调试方式做个汇总。
先抛出个问题:在移动端设备和电脑处于不同网段(无法代理), 也不能科学上网的情况下,并且移动端禁用了 H5 Webview 调试功能,这时你可以使用哪些方式去调试 H5。
H5 调试工具
远程调试
Chrome DevTools 和 Web Inspector
Chrome DevTools 和 Max Safari Web Inpsector 应该是 H5 调试中最常使用的工具,这两个工具支持的移动端调试功能基本和 PC 端差不多。
Chrome DevTools 的使用:
- 手机连接电脑,手机开启 USB 调试
- Chrome 浏览器上访问 chrome://inspect(需要科学上网) 即可看到可以调试的页面。
- 点击 inspect 开始调试
除了手机有线连接电脑,也可以使用 adb 工具连接手机,chrome inpsect 也会显示连接的设备。
Max Safari Web Inpsector 使用:
- 启用 Mac 上 Safari 的开发模式
- 启用 iOS 设备上 Safari 的开发模式: Web 检查器
- 手机连接 max,调试 iOS 设备上 Web 页面
具体可以参考这篇文章:使用Safari调试 iOS APP H5页面
H5 调试中这两个工具应该是首选的调试工具,它们也能满足大部分场景。但是他们是使用需要原生开启支持 Webview 调试,一般 APP 在正式发布之后一般就会禁用 Webview 的调试功能,导致无法连上以上这些调试工具。这时候就需要考虑使用其他工具。
Weinre、 Chii
这类工具需要在本地开启一个服务,然后在调试的网页上注入一段JS代码,指向这个服务。整个调试面板非常类似Chrome DevTools,提供了DOM/CSS查看修改、JS执行、日志查看、本地存储查看、有限的网络监控(仅xhr)
以 Wenire 为例,我们看下这类工具是如何使用的。
- 安装 Wenire,
npm install -g weinre
- 本地开启服,
weinre --httpPort 8080 --boundHost -all-
- 在要调试的项目中引入 JS 代码
- 开始你的调试
Whistle、spy-debugger
上面工具需要在网页上注入一段JS代码,对于已经上线的站点,这一点很难做到。为解决这个痛点,社区里已经有人开发了集成 weinre 或 chii 的代理工具。在代理时动态注入调试的 JS 代码,进一步降低调试成本。
同样的我们看下 Whistle 的基本使用:
- 按住 Whistle,
npm install whistle -g
- 启动服务,
w2 start -p 8899
- 配置移动端代理,移动端设置和电脑必须同连一个 WIFI,代理的地址就是上面启动的服务
- 配置 weinre 规则,使用 weinre 调试。
你可以看到你项目中自动注入了 weinre 的相关的 JS 脚本。Whistle 的具体使用可以参考!whistle学习
具体可参考这个文章:移动端调试神器 Whistle
模拟面板调试
通过在网页中引入一段 JS 代码,来注入一个模拟调试面板,用于查看 DOM/CSS、日志、网络请求、本地存储,支持执行 JS 代码。但是和 Wenire 相比不支持动态修改 DOM/CSS,在面板上进行 JS 代码录入体验较差,整体功能较弱。
模拟机
在缺乏真机的情况下,可以使用模拟器。安卓常见的就是 Android Studio 内置的 AVD Manager,还有 Genymotion,IOS 的话 XCode 自带的模拟器。
云真机平台
Android 虚拟机通常只能支持谷歌官方特定系统的模拟。而通过云真机平台,还可以实现特定机型模拟。一些平台在模拟器上还集成了远程开发调试工具,方便开发人员完成特定机型的适配。
不过云真机平台大部分需要收费,比如腾讯云真机。
代理工具
在一些特定的调试场景,需要对请求做一些特殊处理,这就需要引入一些代理工具,例如
- 映射线上JS、CSS文件到本地,方便进行问题的排查和修复的验证
- 伪造请求响应,返回特殊数据,用于绕过特定流程或者进行一些边界测试
- ...
远程代理工具
在一些特定的调试场景,需要对请求做一些特殊处理,这就需要引入一些代理工具,例如
- 映射线上JS、CSS文件到本地,方便进行问题的排查和修复的验证
- 伪造请求响应,返回特殊数据,用于绕过特定流程或者进行一些边界测试
代理工具一般包含的能力
- 请求监控
- 请求模拟
- 请求转发
- 请求拦截
- 响应伪造
目前比较流行的几个代理工具:Fiddler、Charles、Whistle等等
小结
对于开头的问题,可以使用模拟机 + whistle 来调试,或者使用 VConsole,有预算的可以上云真机平台。
最后汇总一张图:
转载自:https://juejin.cn/post/7134219358301077517