随着移动设备的高速发展，H5开发也成为了F2E不可或缺的能力。而移动开发的重中之重就是掌握调试技巧，修Bug于无形。
一、概要因为移动端操作系统分为iOS和Android两派，所以本文的调试技巧也会按照不同的系统来区分。寻找最合适高效的方式，才能让你事半功倍。
文章会列举目前适合移动端调试的多种方案，快来选择你的最佳实践吧！
二、iOS设备Safari：iphone调试利器，查错改样式首选，需要我们做如下设置：
浏览器设置：Safari-偏好设置-高级-勾选「在菜单栏中显示开发」菜单iphone设置：设置-Safari-高级-打开Web检查器大功告成，这时候通过手机的Safari来打开H5页面，我们通过浏览器开发选项可以看到：
iOS模拟器：不需要真机，适合调试Webview和H5有频繁交互的功能页面。
首先下载Xcode，运行项目，选择模拟器iphonex，编译后就会打开模拟器，如下：
可以看到H5已经在「壳子」中运行起来了，下来就可以尝试调用Webview的方法，和「壳子」交互了。更多的调试技巧可以参考文章：iOS模拟器调试。
具体的调试功能还是依赖浏览器的开发选项，与上无异，就不赘述了。
三、抓包Charles：MacOS系统首选的抓包工具，适合查看、控制网络请求，分析数据情况。
Charles抓包首先需要配置手机代理，Wifi-配置代理（IP地址）-手动，如下图：
配置好手机代理，这时候打开Charles，就会收到确认提醒，选择允许。接下来就可以捕获手机的请求了，但是这些都是常规操作，我们来点高级的。
有意思的是：我们可以用本地文件来替换线上文件，方便调试，远程定位线上问题。
选择Structure，找到需要替换的文件，右键菜单-MapLocal，如下图：
这时候就会打开一个弹窗，填写具体的配置：
OK，大功告成，快去改动本地文件吧，从此再也不怕线上调试了。需要注意的是如果抓取HTTPS请求，要安装信任证书，下文会详细说明。
与之相应的是Windows平台的Fiddler，功能大致相似，这里就不细说了。
四、Spy-Debuggerspy-debugger：移动端调试的利器，便捷的远程调试手机页面、抓包工具。
我们先来安装：
sudonpminstallspy-debugger-g
启动命令：
spy-debugger
这时候，控制台会打印出如下信息，说明服务已经启动了：
正在启动代理本机在当前网络下的IP地址为：10..24.46node-mitmproxy启动端口:浏览器打开---