移动端调试(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打开时，您将收到确认提醒并选取“允许”。接下来可以抓取手机请求，但这些都是常规操作。我们来做点高级的。有意思：我们可以用本地文件代替在线文件，方便调试，可以远程定位在线问题。选择结构，找到需要替换的文件，右键菜单-映射本地，如下图所示：
这将打开一个弹出窗口，并填写具体配置：
好了，你完成了。去把本地文件改了，再也不怕在线调试了。注意，如果您获取HTTPS请求，您需要安装一个信任证书，这将在下面详细解释。与此对应，Windows平台的Fiddler也有类似的功能，这里就不细说了。4.Spy-Debuggerspy-debugger:一个在移动端调试的工具，一个方便的调试手机页面和远程抓包的工具。让我们先安装它：
Sudo npm安装spy-debugger -g启动命令：
此时，控制台将打印出以下信息，表明服务已经启动：
当前网络下正在启动代理的本地机IP地址为：10.200.24.46node-mitmproxy启动端口3360 9888浏览器打开-3358127.0.0.1:50389最后一步，设置手机代理：10.200.24.46，端口号：要添加：
Android代理设置：设置WLAN长按选择网络修改网络高级代理设置手动iOS代理设置：设置无线局域网手动选择网络HTTP代理接下来，尝试捕获数据包：
再次打开调试页面：
HTTPS捕获包，你需要安装根证书，下面会详细解释。5.whistle上面推荐了一个简单的调试工具。升级一下，看看更强大的调试工具Whistle。Whistle:基于节点的跨平台Web调试代理工具。Whistle(读音[WSL]，拼音[wisu])是一款基于节点的跨平台调试代理工具，具有以下基本功能：
检查HTTP和HTTPS请求响应内容，检查WebSocket，Socket发送和接收的帧数据，请求主机，url，方法，头，内容修改响应状态码，头，上游http/socks代理修改请求的内容，支持本地替换和修改WebSocket或Socket发送的帧数据。内置调试weinre和移动页面的log作为HTTP代理或反向代理，支持用节点编写插件扩展函数。大致了解之后，我们来试着安装一下：
Sudnpm install-g whistle淘宝镜：NPM install whistle-gregistry=https://registry.npm.taobao.org安装好whistle后，执行whistle help或w2 help命令查看whistle的帮助信息：
运行前端服务启动后台服务停止当前后台服务重新启动重新启动当前后台服务帮助显示帮助信息此处仅列出了一些命令。有关更多信息，请参考w2帮助。看到上面的操作，我们为什么不试试缩写w2 start来启动服务：
W2启动以下输出，表示服务已经正常启动：
这时候打开浏览器里的链接，在手机上配置好代理(和Charles一样)，就可以愉快地调试了。值得注意的是，哨子的作用远不止于此。更多扩展请移至官网文档并贴图预览：
记得打开阻止HTTPS:检查捕捉HTTPS连接VI。安装HTTPS证书。对于Charles，按如下方式安装证书：
帮助-SSL -代理-安装Charles root
弹出安装证书的提示框：
根据提示，到手机浏览器打开：chls.pro/ssl，安装信任证书。对于spy-debugger，HTTPS捕获数据包，需要安装根证书，选择RootCA，扫描二维码，根据提示信任证书。安装证书时，需要注意以下几点：1。手机必须先设置代理，然后通过(非微信)手机浏览器访问http://s.xxx(地址二维码)安装证书；2.手机第一次调试需要证书，已经安装了证书的手机不需要重复安装；3.手机和PC保持在同一个网络下(比如同时连接一个WIFI记住：移动设备和PC必须在一个WIFI下。七。真机调试上面说了很多，但是在实际开发过程中，我们不会等到上线才验证兼容性，所以你可能需要提前“真机调试”。这里提供两种方式：Chrome远程设备：依靠Chrome进行远程调试，适用于Android手机。首先打开安卓手机的“开发者选项”，勾选“USB调试”。然后在chrome中输入：chrome://inspect进入调试页面。一篇全面的文章，可以参考：Chrome远程调试。Localhost转ip，扫描二维码，显示在手机上。这个比较简单。可以在浏览器中安装一个Chrome插件，将当前页面链接转换成二维码，这样就可以边开发边预览真机，非常方便。八。调试工具在这里，我们推荐一款调试工具：vConsole，一款轻量级可扩展的移动网页前端开发者调试面板。安装很简单：
Npm安装vconsole如果不使用AMD/CMD规范，可以直接在HTML中引入vConsole模块。为方便后续扩展，建议引入：
如果使用AMD/CMD规范，可以使用require()在模块内引入模块：
var v console=require(‘ path/to/v console . min . js ‘)；var v console=new v console()；请注意，vConsole只是VConsole的原型，而不是实例化的对象。因此，在手动实例化新的。该功能如下所示：
看起来很完美，但是有个小缺点：网络请求要求刷新页面，但是很多嵌入式H5页面没有机会刷新页面，所以需要客户端童鞋配合刷新功能，方便调试。九。场景分析既然移动调试的方案那么多，实际操作中应该如何选择呢？说了这么多方案，下面总结一下每个方案的适用场景，根据不同的场景选择最佳的调试方案，以便更快的输出。承载受众：1。Safari: iPhone调试利器，错误检查和风格修改的首选；2.iOS模拟器：不需要真机，适合调试Webview和H5交互频繁的功能页面；3.Charles:Mac OS系统首选的包捕获工具，适合查看和控制网络请求，分析数据；4.Fiddler:适用于Windows平台，类似于Charles，可以查看和控制网络请求，分析数据；5.Spy-Debugger:移动端调试工具，方便调试手机页面和远程抓包的工具；6.Whistle:基于节点的跨平台Web调试代理工具；7.Chrome远程设备：依赖Chrome进行远程调试，适合安卓手机远程调试静态页面；8.localhost转ip:真机调试，适合静态页面的远程调试；9.vConsole:内置于项目中，打印移动日志，查看网络请求，查看Cookie和存储；十、白屏处理移动终端上的白屏是最麻烦的问题。下面是一些分析问题的思路，供参考。1.一般是方案分析上线后就有问题了。我们能想到的最简单的就是：是新代码导致的问题吗？因此，有效的解决方法是“控制变量法”。2.代码标注方式是莫名其妙的白屏，适用于页面没有异常日志，同时没有请求发送，问题集中在单个页面的情况。这种问题很直观。一定是某个页面出现代码异常或者无效返回，导致页面渲染终止，但不是异常。这时候“代码注释法”会是你最好的选择，你可以逐行注释代码，直到定位到问题。3.经常会遇到类库异常和兼容性问题。我们需要用能够调试页面异常的方式来检查异常日志，比如Safari、Spy-Debugger、Whistle、vConsole，以便快速定位类库位置，找到替代或兼容的解决方案。4.try catch如果您的项目没有异常监控，那么在可疑代码片段中执行try catch。5 .调试包在项目中安装vConsole，配合客户端调试插件。360度无死角监控异常。这是最有效的方法。6.ES6语法兼容性一般我们会通过Babel编译ES6，但是如果额外的第三方类库有不兼容的语法，那么移动设备的低版本就会出现异常。因此，首先使用上述调试方法来确定异常，然后添加polyfill以实现兼容性。