H5 移动端调试

随着移动设备的高速发展，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，如下图：

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