手机端调试难。很多时候，我们在开发移动端的时候，都是在PC端使用手机模拟器进行调试。没有问题后，我们在移动端的浏览器中进行测试。这个时候，如果没有问题，那大家都开心。但是一旦出现问题，由于缺乏可视化界面，我们很难去解决。与PC端不同，我们可以直观的改变样式，或者进行断点调试。有时候，我们不得不在移动端使用alert来调试，但是这样的调试方式是极其低效的。在许多情况下，它是基于经验或淘汰。甚至，我们不得不将其归咎于浏览器的实现。那么，有没有什么方法可以像调试PC端一样直观地调试移动端的适配呢？本文旨在为您提供移动端的调试方法，希望能为您打开一扇新的大门。本文将给出三种真机调试方法，大家可以选择自己喜欢的一种~手机真机调试方法chrome真机调试weinredebuggingspy-debuggerdebugging简述每种方法的优缺点：***类型：chrome真机调试，有一个很大的局限性，就是只能调试手机端的chrome浏览器，不适用于UC、QQ等浏览器，所以在调试兼容性问题时帮助不是很大，但是***优点是：简单快捷。第二种：weinre调试方式，安装应用并不复杂，适用于全平台调试，即任何手机上的任何浏览器都可以调试，但手机和电脑需要在同一台上网段。第三种：spy-debugger，安装稍微复杂一点，spy-debugger集成了weinre，还加了一个抓包工具，用起来最方便。下面我们将介绍这三种调试方式的使用方法：1.chrome真机调试在手机上下载chrome浏览器，使用USB连接PC，打开手机USB调试模式。然后在PC端打开chrome浏览器，在地址栏输入：chrome://inspect。选中“发现USB设备”。然后在手机上浏览网页，可以看到如下页面，点击inspect进行调试。（由于我的工作电脑加了域，因为这个方法不能用，如果有和我情况一样的童鞋可以考虑使用其他两种调试方法）2.weinre真机调试Weinre（WebInspectorRemote）是一款基于WebInspector（Webkit）的远程调试工具，可以借助网络在PC上直接调试运行在移动设备上的远程页面。本地服务器：可以使用http-server、tomcat等，也可以使用编译器集成服务weinre安装全局安装：npminstall–gweinre本地安装：npminstallweinre启动：weinre--httpPort8090--boundHost-all-if如果是部分安装，需要在前面加上node_modules/.bin/。相信前端童鞋都会用到npm包管理工具。对于这个工具，我就不展开了。如果没有安装npm，请自行安装。Weinre启动参数说明：httpPort：设置Wninre使用的端口号，默认为8080boundHost:[hostname|叶|-all-]：默认为'localhost'。调试[真|false]:这个选项类似于--verbose，会输出更多的信息。默认为假。readTimeout[seconds]:Server向Target/Client发送信息的超时时间，默认5s。deathTimeout[seconds]:默认是readTimeout的3倍，如果过了这个时间页面还没有响应，就会断开连接。8080端口是经常使用的，所以我选择指定8090端口。启动weinre后，我们在浏览器中输入localhost:8090。出现如下界面，表示启动成功。点击调试客户端用户界面，进入调试页面。当前目标中的内容为空。现在，我们需要做另外一个操作，在我们要调试的页面中添加一个脚本。记得用您的IP地址替换localhost。然后，我们在本地启动一个服务器，可以是IDE集成的服务器，或者http-server，我用的是http-server。启动后，我们在手机端访问要调试的网页。然后你会发现targets下多了一条记录。此时，我们可以点击Elements进行调试。修改样式后，手机端立即生效，也可以查看控制台信息。唯一就是不能断点调试。***，调试完成后不要忘记删除内嵌脚本。除了这个方法，还介绍了在手机端保存一段Js代码，需要调试某个页面的时候，点击执行JS，但是现在浏览器出于安全考虑已经不支持这个方法了。默认方法是搜索，而不是执行，因此不可取。3.spy-debugger真机调试***，接下来介绍spy-debugger方法。使用这种方法，我们不再需要自己添加和删除脚本。Spy-debugger内部集成了weinre，通过代理拦截自动注入html到weinre所需的所有js代码。简化了weinre需要在每个被调试的页面中添加js代码。spy-debugger的原理是拦截所有的html页面请求，注入weinre需要的js代码。让页面调试更简单。特点：页面调试+抓包操作简单支持HTTPS。spy-debugger集成了weinre、node-mitmproxy、AnyProxy。自动忽略原生应用发起的https请求，只拦截webview发起的https请求。它不会对使用SSL固定技术的本机应用程序产生任何影响。可以和其他代理工具一起使用（默认使用AnyProxy）Spydebugger安装和使用1.安装：全局安装npminstall–gspy-debugger2.启动：spy-debugger3.设置HTTP代理proxy的地址手机地址为PC地址的IP，代理端口为spy-debugger的启动端口（默认端口：9888），默认端口为9888。如果要指定端口：spy-debugger–p8888Android设置步骤：设置-WLAN-长按选择网络-修改网络-高级-代理设置-手动iOS设置代理步骤：设置-WLAN-选择网络-HTTP代理手动4.手机安装证书（node-mitmproxyCArootcertificate)第一步：生成证书：生成CA根证书，生成在/Users/XXX/node-mitmproxy/目录下（Mac）。spy-debuggerinitCA第二步：安装证书：将node-mitmproxy文件夹下的node-mitmproxy.ca.crt传输到手机，点击安装。间谍调试器启动界面。同样，手机端刷新页面后，targets中也会有一条记录。用我做的精斗游戏的页面来展示一下效果。当我们在手机上选择一个元素时，我们可以在电脑上看到它。相应的信息，让我们可以看到哪些样式不兼容可能会导致UI异常。同样，在控制台也可以看到JS日志信息，这对移动端调试很有帮助。总结：chromeinspect的应用场景有限。Weinre安装简单，使用过程中需要增删脚本。如果调试页面较多，则不适用。spy-debugger安装起来有点复杂，但使用起来非常愉快。
