移动端开发调试技巧

正所谓磨刀不误砍柴工，一个好的调试工具对效率的提升无疑是事半功倍的。本文汇总了一些在移动端开发方面的调试工具和常见技巧，希望对你日常的开发工作有所帮助。

本文分为三个方面介绍：

• 纯网页调试

  – Chrome 控制台调试

  – Web Inspector Remote

  – Vconsole

  – Onerror捕获异常

• 客户端调试

  – 微信端调试

  – IOS调试

  – Android调试

• 代理调试

  – HTTPS抓包

  – Fiddler代理本地文件

  – DNS访问本地服务器

纯网页调试

1、Chrome 控制台调试

利用开发者工具提供的一些方法，可以有效帮助定位日常开发中遇到的问题，这里就不细说了，列举一些常见的手段：

1、设置断点
2、把 objects 输出成表格
3、快速定位 DOM 元素
4、用 console.time() 和 console.timeEnd() 测试循环耗时
5、格式化代码
6、屏蔽不相关代码
7、节点变化时中断
8、等等

更多详细信息可参考 14 个你可能不知道的 JavaScript 调试技巧

2、Web Inspector Remote

Web Inspector Remote 是一个远程调试工具，又称weinre。需要搭建一个weinre的服务器，然后被调试的页面中引入一个js，就可以进行远程调试，调试的界面如下，有点类似chrome开发者工具的调试，不过weinre比较适用于调试CSS，不太合适调试JS，有些JS的错误往往不能报出来。

我在富途内网搭建了weinre服务，地址是 https://weinre.futunn.com ，需要配host 172.28.249.39 weinre.futunn.com，富途的同学可以在内网直接使用。

3、Vconsole

Vconsole是腾讯微信团队出品的一个前端调试工具，功能很强大，可以看到页面日志、代理信息、网络请求、页面元素、还有cookie、localStorage等。

使用方式有两种：

npm安装

npm install vconsole

或者直接引入压缩后的JS

<script src="path/to/vconsole.min.js"></script>
<script>
// init vConsole
var vConsole = new VConsole();
console.log('Hello world');
</script>

更多信息可访问他们的github： https://github.com/Tencent/vConsole 。

引入Vconsole之后，页面在右下方会出来一个浮层，点开就可以查看更多信息：

Vconsole功能很强大，适用于各类调试场景，而且在各类终端都能使用，非常推荐。

4、Onerror捕获异常

监听window的onerror事件可以捕获全局的一些JS异常，不过只适用于内联JS或者同域下的JS，否则就需要crossorigin参数和远程资源服务器的支持。

Onerror捕获异常比较适用于产品上线后的监控使用，通过收集错误信息，上报到监控服务器，并设置告警条件，可以有效及时地发现线上的错误。

在富途的产品中，我们通常使用公共组件tool-dedog.js，它会收集页面中的错误，告警到monitor，并且把具体的错误信息，上报到ULS日志中心，下图是一个例子：

总结一下：
- 在开发阶段，我们使用chrome开发者工具进行移动端的模拟开发；
- 在测试阶段，我们使用weinre和Vconsole定位具体的终端问题；
- 上线之后，我们监控window的onerror事件，及时发现线上用户实际使用过程产生的一些异常。

客户端调试

1、微信端调试

微信端调试最好的当然是微信自家的产品——微信web开发者工具。这个工具在扫一扫登录之后，就可以模拟出微信客户端的环境，可以调试微信分享API、支付API等一系列客户端特定的功能。

2、安卓端USB调试

安卓端USB调试的方式比较简单：

- 连接USB
- 开启安卓的调试模式
- 访问chrome://inspect
- 勾选Discover USB devices
- 选取要调试的网页

如果是调试安卓手机中chrome访问的页面，以上方式就足够了，不过如果需要调试安卓APP内嵌的web网页，还需要同时满足以下条件：

- Android 4.4+
- 在APP代码中设置WebView.setWebContentsDebuggingEnabled(true)

3、IOS端USB调试

IOS端USB调试的原理其实跟安卓差不多，只不过换成了mac和safari而已：

- 连接USB
- 手机上Settings -> Safari -> Advanced，启用Web Inspector
- 手机上打开web页面
- Mac上Safari中点Develop -> 设备名 -> 选择网页
- 弹出Web Inspector进行调试

同理，如果safari访问的页面，以上方式就可以调试，但如果是APP内嵌的页面，条件就比较苛刻了，需要满足以下两个条件之一：

- Xcode编译安装的应用
- 越狱IOS设置com.apple.private.webinspector.allow-remote-inspection和com.apple.security.get-task-allow

代理调试

1、https抓包

https抓包分别PC抓包和手机抓包，主要是通过fiddler，生成fiddler证书并信任后，就可以打开fiddler中的HTTPS选项进行抓包了。具体步骤如下：

- 下载并安装Fiddler证书生成器 http://www.telerik.com/docs/default-source/fiddler/addons/fiddlercertmaker.exe 
- 打开Fiddler，点击工具栏中的Tools——>Options
- 切换到 HTTPS 选项卡，勾选 Capture HTTPS CONNECTs，勾选 Decrypt HTTPS traffic，一路点确定安装
- 重启fiddler，切换到HTTPS 选项卡，点击右侧Actions，能看一个下拉菜单，点击 Export Root Certificate to Desktop
- 证书会生成到桌面上，名为 FiddlerRoot.cer，点击安装为根证书

手机抓包也是类似，只不过需要把FiddlerRoot.cer拷到手机中安装并信任，另外通过在同一个局域网内设置fiddler的网络代理（端口通常是8888），就可以抓包手机上的HTTPS请求了。

2、fiddler代理本地文件

fiddler代理本地文件是通过fiddler的autoResponder实现的，可以编写匹配规则，指定本地电脑上的某个文件代替服务器上的某个文件来响应请求，这样在本地做的修改，就可以马上看到效果，这是很常用的手段，就不细说了。