优秀前端人都知道的H5移动端调试全攻略

文章来源&＃xff1a;http://jartto.wang/2018/11/01/mobile-debug/

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

一、概要

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

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

二、iOS 设备

Safari&＃xff1a;iphone 调试利器&＃xff0c;查错改样式首选&＃xff0c;需要我们做如下设置&＃xff1a;

• 浏览器设置&＃xff1a;Safari - 偏好设置 - 高级 - 勾选「在菜单栏中显示开发」菜单

• iphone 设置&＃xff1a;设置 - Safari - 高级 - 打开 Web 检查器

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

iOS 模拟器&＃xff1a;不需要真机&＃xff0c;适合调试 Webview 和 H5 有频繁交互的功能页面。

首先下载 Xcode &＃xff0c;运行项目&＃xff0c;选择模拟器 iphonex&＃xff0c;编译后就会打开模拟器&＃xff0c;如下&＃xff1a;

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

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

三、抓包

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

Charles 抓包首先需要配置手机代理&＃xff0c;Wifi - 配置代理&＃xff08;IP 地址&＃xff09; - 手动&＃xff0c;如下图&＃xff1a;

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

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

选择 Structure&＃xff0c;找到需要替换的文件&＃xff0c;右键菜单 - Map Local&＃xff0c;如下图&＃xff1a;

这时候就会打开一个弹窗&＃xff0c;填写具体的配置&＃xff1a;

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

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

四、Spy-Debugger

spy-debugger&＃xff1a;移动端调试的利器&＃xff0c;便捷的远程调试手机页面、抓包工具。

我们先来安装&＃xff1a;

> sudo npm install spy-debugger -g

启动命令&＃xff1a;

> spy-debugger

这时候&＃xff0c;控制台会打印出如下信息&＃xff0c;说明服务已经启动了&＃xff1a;

正在启动代理
本机在当前网络下的IP地址为&＃xff1a;10.200.24.46
node-mitmproxy启动端口: 9888
浏览器打开 ---> http://127.0.0.1:50389

最后一步&＃xff0c;设置手机代理&＃xff1a;10.200.24.46&＃xff0c;端口号&＃xff1a;9888。补充说明一下&＃xff1a;

• Android 设置代理步骤&＃xff1a;设置 - WLAN - 长按选中网络 - 修改网络 - 高级 - 代理设置 - 手动

• iOS 设置代理步骤&＃xff1a;设置 - 无线局域网 - 选中网络 - HTTP 代理手动

接下来&＃xff0c;尝试一下抓包&＃xff1a;

再打开调试页面&＃xff1a;

HTTPS 抓包&＃xff0c;需要安装根证书&＃xff0c;下文会详细说明。

五、Whistle

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

whistle&＃xff1a;基于 Node 实现的跨平台 Web 调试代理工具。

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

1. 查看 HTTP、HTTPS请求响应内容

2. 查看 WebSocket、Socket 收发的帧数据

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

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

5. 修改响应状态码、头部、内容&＃xff0c;并支持本地替换

6. 修改 WebSocket 或 Socket 收发的帧数据

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

8. 作为 HTTP 代理或反向代理

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

大致了解后&＃xff0c;我们来尝试安装&＃xff1a;

sudo npm install -g whistle

淘宝镜像&＃xff1a;npm install whistle -g –registry&＃61;https://registry.npm.taobao.org

whistle 安装完成后&＃xff0c;执行命令 whistle help 或 w2 help&＃xff0c;查看 whistle 的帮助信息&＃xff1a;

run       Start a front service
start     Start a background service
stop      Stop current background service
restart   Restart current background service
help      Display help information

这里只列出部分命令&＃xff0c;更多请 w2 help 查看。

看到上面的操作&＃xff0c;我们何不试试缩写 w2 start 来启动服务&＃xff1a;

w2 start

看到如下的输出&＃xff0c;说明服务已经正常启动了&＃xff1a;

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

记得开启拦截 HTTPS&＃xff1a;勾选 Capture HTTPS CONNECTs

六、安装 HTTPS 证书

对于 Charles&＃xff0c;按照如下操作安装证书&＃xff1a;

help-SSL - Proxying - install Charles root

弹出安装证书的提示框&＃xff1a;

按照提示去手机浏览器打开&＃xff1a;chls.pro/ssl&＃xff0c;安装信任证书即可。

对于 spy-debugger&＃xff0c;HTTPS 抓包&＃xff0c;需要安装根证书&＃xff0c;选择 RootCA&＃xff0c;扫描二维码按照提示信任证书。安装证书的时候需要注意以下几件事情&＃xff1a;

1.手机必须先设置完代理后再通过(非微信)手机浏览器访问 http://s.xxx (地址二维码)安装证书&＃xff1b;
2.手机首次调试需要安装证书&＃xff0c;已安装了证书的手机无需重复安装&＃xff1b;
3.手机和 PC 保持在同一网络下&＃xff08;比如同时连到一个 WIFI 下&＃xff09;&＃xff1b;

切记&＃xff1a;移动设备和 PC 必须在一个 WIFI 下。

七、真机调试

上面说了很多&＃xff0c;但是实际开发过程中&＃xff0c;我们不会等上线了才去验证兼容性&＃xff0c;所以你可能需要提前「真机调试」。这里提供两种方式&＃xff1a;

Chrome Remote Devices&＃xff1a;依赖 Chrome 来进行远程调试&＃xff0c;适合安卓手机。

首先&＃xff0c;开启 Android 手机的「开发者选项」&＃xff0c;勾选 「USB 调试」。
然后&＃xff0c;Chrome 中输入&＃xff1a;chrome://inspect&＃xff0c;进入调试页面。

很全面的一篇文章&＃xff0c;可以参考&＃xff1a;Chrome 远程调试。

localhost 转 ip&＃xff0c;扫描二维码手机显示&＃xff0c;这个比较简单。

可以在浏览器安装一个 Chrome 插件&＃xff0c;用于将当前页面链接转换成二维码&＃xff0c;这样就能边开发边真机预览&＃xff0c;非常方便。

八、调试工具

这里推荐一款调试工具&＃xff1a;vConsole&＃xff0c;一个轻量、可拓展、针对手机网页的前端开发者调试面板。安装很简单&＃xff1a;

npm install vconsole

如果未使用 AMD/CMD 规范&＃xff0c;可直接在 HTML 中引入 vConsole 模块。为了便于后续扩展&＃xff0c;建议在  中引入&＃xff1a;

如果使用了 AMD/CMD 规范&＃xff0c;可在 module 内使用 require() 引入模块&＃xff1a;

var VConsole &＃61; require(&＃39;path/to/vconsole.min.js&＃39;);
var vConsole &＃61; new VConsole();

请注意&＃xff0c;VConsole 只是 vConsole 的原型&＃xff0c;而非一个已实例化的对象。

所以在手动 new 实例化之前&＃xff0c;vConsole 不会被插入到网页中。大概功能如下图&＃xff1a;

看起来很完美&＃xff0c;但是有个小缺点&＃xff1a;网络请求&＃xff0c;需要刷新页面&＃xff0c;可是很多内嵌的 H5 页面是没有机会刷新页面的&＃xff0c;所以需要客户端童鞋配合增加刷新的功能方便调试。

九、场景分析

既然移动端调试有这么多种方案&＃xff0c;那在实际操作中&＃xff0c;我该如何取舍&＃xff1f;

说了这么多钟方案&＃xff0c;这里总结一下各个方案的适用场景&＃xff0c;根据不同的场景去选择最佳的调试方案&＃xff0c;这样才能更快速的输出&＃xff0c;Carry 全场&＃xff1a;

1.Safari&＃xff1a;iPhone 调试利器&＃xff0c;查错改样式首选&＃xff1b;
2.iOS 模拟器&＃xff1a;不需要真机&＃xff0c;适合调试 Webview 和 H5 有频繁交互的功能页面&＃xff1b;
3.Charles&＃xff1a;Mac OS 系统首选的抓包工具&＃xff0c;适合查看、控制网络请求&＃xff0c;分析数据情况&＃xff1b;
4.Fiddler&＃xff1a;适合 Windows 平台&＃xff0c;与 Charles 类似&＃xff0c;查看、控制网络请求&＃xff0c;分析数据情况&＃xff1b;
5.Spy-Debugger&＃xff1a;移动端调试的利器&＃xff0c;便捷的远程调试手机页面、抓包工具&＃xff1b;
6.Whistle&＃xff1a;基于 Node 实现的跨平台 Web 调试代理工具&＃xff1b;
7.Chrome Remote Devices&＃xff1a;依赖 Chrome 来进行远程调试&＃xff0c;适合安卓手机远程调试静态页&＃xff1b;
8.localhost 转 ip&＃xff1a;真机调试&＃xff0c;适合远程调试静态页面&＃xff1b;
9.vConsole&＃xff1a;内置于项目&＃xff0c;打印移动端日志&＃xff0c;查看网络请求以及查看 COOKIE 和 Storage&＃xff1b;

十、白屏处理

移动端的白屏是最头疼的问题&＃xff0c;这里顺带提供几种分析问题的思路&＃xff0c;以供参考。

1.方案分析 ☆

一般上线后出现问题&＃xff0c;我们最容易想到的就是&＃xff1a;是否是新代码引起的问题。所以有效解决手段就是「控制变量法」。

2.代码注释法 ☆

莫名奇妙的白屏&＃xff0c;适合页面无异常日志&＃xff0c;同时无请求发送&＃xff0c;问题集中在单一页面的情况。这种问题比较直观&＃xff0c;肯定是某一页面出现了代码异常或是无效的 return&＃xff0c;导致页面渲染终止&＃xff0c;但并不属于异常。这时候&＃xff0c;「代码注释法」将是你的最佳选择&＃xff0c;逐行去注释可以代码&＃xff0c;直到定位问题。

3.类库异常&＃xff0c;兼容问题 ☆

这种场景也会经常遇到&＃xff0c;我们需要用可以调试页面异常的方式&＃xff0c;如 Safari&＃xff0c;Spy-Debugger&＃xff0c;Whistle&＃xff0c;vConsole 查看异常日志&＃xff0c;从而迅速定位类库位置&＃xff0c;从而找寻替换或是兼容方案。

4.try catch ☆☆

如果你的项目没有异常监控&＃xff0c;那么在可疑的代码片段中去 Try Catch 吧。

5.Debug 包 ☆☆☆

在你的项目中装上 [vConsole](https://link.zhihu.com/?target&＃61;http%3A//jartto.wang/2018/11/01/mobile-debug/)&＃xff0c;并配合客户端 debug 插件&＃xff0c;360 度无死角监控异常&＃xff0c;这才是最有效的方式。

6.ES6 语法兼容 ☆

一般我们都会通过 Babel 来编译 ES6 &＃xff0c;但是额外的第三方类库如果有不兼容的语法&＃xff0c;低版本的移动设备就会异常。所以&＃xff0c;先用上文讲述的调试方法&＃xff0c;确定异常&＃xff0c;然后去增加 [polyfill](https://link.zhihu.com/?target&＃61;https%3A//polyfill.io/v2/docs/examples) 来兼容吧。

最后

感谢阅读&＃xff0c;欢迎分享给身边的朋友&＃xff0c;

记得关注噢&＃xff0c;黑叔带你飞&＃xff01;

亲&＃xff0c;点这涨工资