这些 H5 移动端调试你都会了么

概述

调试对于程序员来说算是家常便饭了，没有人能说我写的代码没问题，不需要调试。对于 PC web 来说，绝大部分可以使用 Chrome + 抓包工具完成调试。但是对于 H5，场景相对复杂，对应的调试方式也是有很多，接下来将对 H5 调试方式做个汇总。

先抛出个问题：在移动端设备和电脑处于不同网段（无法代理）, 也不能科学上网的情况下，并且移动端禁用了 H5 Webview 调试功能，这时你可以使用哪些方式去调试 H5。

H5 调试工具

远程调试

Chrome DevTools 和 Web Inspector

Chrome DevTools 和 Max Safari Web Inpsector 应该是 H5 调试中最常使用的工具，这两个工具支持的移动端调试功能基本和 PC 端差不多。

Chrome DevTools 的使用：

1. 手机连接电脑，手机开启 USB 调试
2. Chrome 浏览器上访问 chrome://inspect（需要科学上网） 即可看到可以调试的页面。
3. 点击 inspect 开始调试

除了手机有线连接电脑，也可以使用 adb 工具连接手机，chrome inpsect 也会显示连接的设备。

Max Safari Web Inpsector 使用：

1. 启用 Mac 上 Safari 的开发模式
2. 启用 iOS 设备上 Safari 的开发模式: Web 检查器
3. 手机连接 max，调试 iOS 设备上 Web 页面

具体可以参考这篇文章：使用Safari调试 iOS APP H5页面

H5 调试中这两个工具应该是首选的调试工具，它们也能满足大部分场景。但是他们是使用需要原生开启支持 Webview 调试，一般 APP 在正式发布之后一般就会禁用 Webview 的调试功能，导致无法连上以上这些调试工具。这时候就需要考虑使用其他工具。

Weinre、 Chii

这类工具需要在本地开启一个服务，然后在调试的网页上注入一段JS代码，指向这个服务。整个调试面板非常类似Chrome DevTools，提供了DOM/CSS查看修改、JS执行、日志查看、本地存储查看、有限的网络监控（仅xhr）

以 Wenire 为例，我们看下这类工具是如何使用的。

1. 安装 Wenire，npm install -g weinre
2. 本地开启服， weinre --httpPort 8080 --boundHost -all-
3. 在要调试的项目中引入 JS 代码

1. 开始你的调试

Whistle、spy-debugger

上面工具需要在网页上注入一段JS代码，对于已经上线的站点，这一点很难做到。为解决这个痛点，社区里已经有人开发了集成 weinre 或 chii 的代理工具。在代理时动态注入调试的 JS 代码，进一步降低调试成本。

同样的我们看下 Whistle 的基本使用：

1. 按住 Whistle，npm install whistle -g
2. 启动服务，w2 start -p 8899
3. 配置移动端代理，移动端设置和电脑必须同连一个 WIFI，代理的地址就是上面启动的服务
4. 配置 weinre 规则，使用 weinre 调试。

你可以看到你项目中自动注入了 weinre 的相关的 JS 脚本。Whistle 的具体使用可以参考！whistle学习

具体可参考这个文章：移动端调试神器 Whistle

模拟面板调试

通过在网页中引入一段 JS 代码，来注入一个模拟调试面板，用于查看 DOM/CSS、日志、网络请求、本地存储，支持执行 JS 代码。但是和 Wenire 相比不支持动态修改 DOM/CSS，在面板上进行 JS 代码录入体验较差，整体功能较弱。

• vConsole
• Edura

模拟机

在缺乏真机的情况下，可以使用模拟器。安卓常见的就是 Android Studio 内置的 AVD Manager，还有 Genymotion，IOS 的话 XCode 自带的模拟器。

云真机平台

Android 虚拟机通常只能支持谷歌官方特定系统的模拟。而通过云真机平台，还可以实现特定机型模拟。一些平台在模拟器上还集成了远程开发调试工具，方便开发人员完成特定机型的适配。

不过云真机平台大部分需要收费，比如腾讯云真机。

代理工具

在一些特定的调试场景，需要对请求做一些特殊处理，这就需要引入一些代理工具，例如

• 映射线上JS、CSS文件到本地，方便进行问题的排查和修复的验证
• 伪造请求响应，返回特殊数据，用于绕过特定流程或者进行一些边界测试
• ...

远程代理工具

在一些特定的调试场景，需要对请求做一些特殊处理，这就需要引入一些代理工具，例如

• 映射线上JS、CSS文件到本地，方便进行问题的排查和修复的验证
• 伪造请求响应，返回特殊数据，用于绕过特定流程或者进行一些边界测试

代理工具一般包含的能力

• 请求监控
• 请求模拟
• 请求转发
• 请求拦截
• 响应伪造

目前比较流行的几个代理工具：Fiddler、Charles、Whistle等等

小结

对于开头的问题，可以使用模拟机 + whistle 来调试，或者使用 VConsole，有预算的可以上云真机平台。

最后汇总一张图：