共计 3071 个字符，预计需要花费 8 分钟才能阅读完成。
移动端调试困难
很多时候，我们在进行移动端开发时，都是先在 PC 端使用手机模拟器进行调试，没有问题后，我们才会在手机端的浏览器进行测试，这个时候，如果没有出现问题，皆大欢喜。但是一旦出现问题，我们就很难解决，因为缺乏可视化的界面。不似在 PC 端，我们能直观的去改变样式，或者是进行断点调试。有时，在移动端我们不得不借助于 alert 来调试，但是这样的调试方法效率极其低下，很多时候，都是靠经验，或者是靠排除法。甚至，我们不得不归结为是浏览器的实现问题。
那么，有什么什么方法，能够让我们调试移动端的适配的时候，像调试 PC 端一样直观呢？本文旨在为你提供移动端的调试方法，希望能够为你打开新的一扇门。
本文会给出三种真机调试方法，你可以选择自己最喜欢的一款~
移动端真机调试方法
chrome 真机调试
weinre 调试
spy-debugger 调试
简单说明一下每一种方式的优缺点：
第一种: chrome 真机调试，有一个很大的局限性就是，只能调试手机端的 chrome 浏览器，对于 UC，QQ 这些浏览器均不适用，因此在调试兼容问题时，帮助不大，但是最大的优点是: 简单快捷。
第二种: weinre 调试方式，安装和适用不复杂，适用于全平台的调试，即任何手机的任何浏览器皆可以调试，不过需要手机和电脑在同一个网段下。
第三种:spy-debugger，安装稍微复杂一点，spy-debugger 集成了 weinre，不过还增加了抓包工具，使用最为方便。
下面我们开始具体介绍如何使用这三种调试方法：
1.chrome 真机调试
手机端下载好 chrome 浏览器，使用 USB 连接到 PC，打开手机的 USB 调试模式。然后在 PC 端打开 chrome 浏览器，在地址栏输入: chrome://inspect. 勾选 ”discovery usb device”。然后在手机端浏览网页，就可以看到如下的页面，点击 inspect，进行调试。(鉴于我的工作电脑是加了域的，因为并不能使用这个方式，如果有和我一样情况的童鞋，可以考虑使用另外两种调试方式)
2.wenire 真机调试
Weinre(WebInspector Remote)是一款基于 Web Inspector(Webkit)的远程调试工具，借助于网络，可以在 PC 上直接调试运行在移动设备上的远程页面。
本地服务器: 可以使用 http-server、tomcat 等, 也可以使用编译器集成的服务
weinre 安装
全局安装: npm install –g weinre
局部安装: npm install weinre
启动: weinre –httpPort 8090 –boundHost -all-
如果是局部安装的话，需要在前面加上 node_modules/.bin/
相信前端的童鞋都会用 npm 包管理工具，对于这个工具，我就不展开了，如果没有安装 npm 的，自行安装。
weinew 启动参数说明:
httpPort: 设置 Wninre 使用的端口号，默认是 8080
boundHost: [hostname | Ip | -all-]: 默认是‘localhost’.
debug [true | false] : 这个选项与–verbose 类似，会输出更多的信息。默认为 false。
readTimeout [seconds] : Server 发送信息到 Target/Client 的超时时间，默认为 5s。
deathTimeout [seconds] : 默认为 3 倍的 readTimeout，如果页面超过这个时间都没有任何响应，那么就会断开连接。
8080 端口使用情况较多，所以我选择了指定 8090 端口。
启动了 weinre 之后，我们在浏览器中输入 localhost:8090. 显示如下界面，表示已经启动成功。
点击 debug client user interface，进入调试页面。
当前的 targets 中内容为空。
现在，我们需要做另外一点操作，在我们要调试的页面中，增加一个脚本。
<script src=”http://localhost:8090/target/target-script-min.js#anonymous”></script>
记住将 localhost 换成你的 IP 地址.
然后，我们在本地启动一个服务器，可以是 IDE 集成的服务器，或者是 http-server, 我使用的是 http-server. 启动之后，我们在手机端访问要调试的网页。然后就会发现 targets 下面增加了记录。
这时，我们就可以点击 Elements 进行调试。
修改样式时，会在手机端即时生效，并且也可以查看控制台信息，唯一一点就是，不能进行断点调试。
最后，在调试结束之后，别忘记删除嵌入的 script。
除了这种方法之后，还介绍了在手机端保存一段 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。
自动忽略原生 App 发起的 https 请求，只拦截 webview 发起的 https 请求。对使用了 SSL pinning 技术的原生 App 不造成任何影响。
可以配合其它代理工具一起使用(默认使用 AnyProxy)
Spydebugger 安装与使用
安装: 全局安装 npm install –g spy-debugger
启动: spy-debugger
设置手机的 HTTP 代理代理的地址为 PC 的 IP 地址，代理的端口为 spy-debugger 的启动端口 (默认端口为：9888) 默认端口是 9888。
如果要指定端口: spy-debugger –p 8888
Android 设置步骤: 设置 – WLAN – 长按选中网络 – 修改网络 – 高级 – 代理设置 – 手动
iOS 设置代理步骤：设置 – 无线局域网 – 选中网络 – HTTP 代理手动
手机安装证书(node-mitmproxy CA 根证书)
第一步：生成证书：
生成 CA 根证书，根证书生成在 /Users/XXX/node-mitmproxy/ 目录下(Mac)。
spy-debugger initCA
第二步：安装证书：
把 node-mitmproxy 文件夹下的 node-mitmproxy.ca.crt 传到手机上，点击安装即可。
Spy-debugger 启动界面，同样，在手机端刷新页面之后，targets 中会有记录
以我曾经做的京东游戏的页面展示一下效果，当我们在手机上选中一个元素时，可以在电脑上看到相应的信息，这样我们就可以看出有可能是什么样式不兼容导致了 UI 的异常了，同样，还可以在控制台中看到 JS 的 log 信息，对于移动端调试来说非常有帮助。
]
总结:
chrome inspect 应用场景有限
weinre 安装简单，使用过程中需要增加和删除 script，如果调试页面很多的情况下，不适用。
spy-debugger 安装略复杂，但是使用过程非常愉快。
最后，谢谢阅读。如果本篇博文给您带来了一点启发或者是帮助，请帮忙点个 Star 吧，非常感谢~https://github.com/YvetteLau/…