H5 移动调试全攻略

作者 | Jartto

来源 | http://jartto.wang/2018/11/01/mobile-debug/

随着移动设备的高速发展，H5 开发也成为了 F2E 不可或缺的能力。而移动开发的重中之重就是掌握调试技巧，定 Bug于无形。

一、概要

因为移动端操作系统分为 iOS 和 Android 两派，所以本文的调试技巧也会按照不同的系统来区分。寻找最合适高效的方式，才能让你事半功倍。

文章会列举目前适合移动端调试的多种方案，快来选择你的最佳实践吧！

二、iOS 设备

Safari：iphone 调试利器，查错改样式首选，需要我们做如下设置：

浏览器设置：Safari – 偏好设置 – 高级 – 勾选「在菜单栏中显示开发」菜单

iphone 设置：设置 – Safari – 高级 – 打开 Web 检查器

大功告成，这时候通过手机的 Safari 来打开 H5 页面，我们通过浏览器开发选项可以看到：

iOS 模拟器：不需要真机，适合调试 Webview 和 H5 有频繁交互的功能页面。

首先下载 Xcode ，运行项目，选择模拟器 iphonex，编译后就会打开模拟器，如下：

可以看到 H5 已经在「壳子」中运行起来了，下来就可以尝试调用 Webview 的方法，和「壳子」交互了。更多的调试技巧可以参考文章：iOS 模拟器调试。

具体的调试功能还是依赖浏览器的开发选项，与上无异，就不赘述了。

三、抓包

Charles： Mac OS 系统首选的抓包工具，适合查看、控制网络请求，分析数据情况。

Charles 抓包首先需要配置手机代理，Wifi – 配置代理（IP 地址） – 手动，如下图：

配置好手机代理，这时候打开 Charles ，就会收到确认提醒，选择允许。接下来就可以捕获手机的请求了，但是这些都是常规操作，我们来点高级的。

有意思的是：我们可以用本地文件来替换线上文件，方便调试，远程定位线上问题。

选择 Structure，找到需要替换的文件，右键菜单 – Map Local，如下图：

这时候就会打开一个弹窗，填写具体的配置：

OK，大功告成，快去改动本地文件吧，从此再也不怕线上调试了。需要注意的是如果抓取 HTTPS 请求，要安装信任证书，下文会详细说明。

与之相应的是 Windows 平台的 Fiddler，功能大致相似，这里就不细说了。

四、Spy-Debugger

spy-debugger： 移动端调试的利器，便捷的远程调试手机页面、抓包工具。

我们先来安装：

> sudo npm install spy-debugger -g

启动命令：

> spy-debugger

这时候，控制台会打印出如下信息，说明服务已经启动了：

正在启动代理

本机在当前网络下的IP地址为：10.200.24.46

node-mitmproxy启动端口: 9888

浏览器打开 ---> http://127.0.0.1:50389

最后一步，设置手机代理：10.200.24.46，端口号：9888。补充说明一下：

Android 设置代理步骤：设置 – WLAN – 长按选中网络 – 修改网络 – 高级 – 代理设置 – 手动

iOS 设置代理步骤：设置 – 无线局域网 – 选中网络 – HTTP 代理手动

接下来，尝试一下抓包：

再打开调试页面：

HTTPS 抓包，需要安装根证书，下文会详细说明。

五、Whistle

上面推荐了一款操作简单的调试利器，升级一下，看看更加强大的调试工具 whistle。

whistle：基于 Node 实现的跨平台 Web 调试代理工具。

whistle(读音[ˈwɪsəl]，拼音[wēisǒu])是基于 Node实现的跨平台抓包调试代理工具，有以下基本功能：

查看 HTTP、HTTPS请求响应内容

查看 WebSocket、Socket 收发的帧数据

设置请求 hosts、上游 http/socks 代理

修改请求 url 、方法、头部、内容

修改响应状态码、头部、内容，并支持本地替换

修改 WebSocket 或 Socket 收发的帧数据

内置调试移动端页面的 weinre 和 log

作为 HTTP 代理或反向代理

支持用 Node 编写插件扩展功能

大致了解后，我们来尝试安装：

sudo npm install -g whistle

淘宝镜像：npm install whistle -g –registry=https://registry.npm.taobao.org

whistle 安装完成后，执行命令 whistle help 或 w2 help，查看 whistle 的帮助信息：

runStartafront service

startStartabackground service

stopStop current background service

restart Restart current background service

help Display helpinformation

这里只列出部分命令，更多请 w2 help 查看。

看到上面的操作，我们何不试试缩写 w2 start 来启动服务：

w2 start

看到如下的输出，说明服务已经正常启动了：

这时候在浏览器打开链接，同时手机上配置代理（同 Charles），接下来就可以愉快的调试了。值得注意的是，whistle 的功能远非如此，更多的扩展请移步官网文档，贴张图先预览下：

记得开启拦截 HTTPS：勾选 Capture HTTPS CONNECTs

六、安装 HTTPS 证书

对于 Charles，按照如下操作安装证书：

help-SSL - Proxying - install Charles root

弹出安装证书的提示框：

按照提示去手机浏览器打开：chls.pro/ssl，安装信任证书即可。