9102了，你还不会移动端真机调试吗

全局安装: npm install –g weinre

局部安装: npm install weinre

启动: weinre --httpPort 8090 --boundHost -all-

如果是局部安装的话，需要在前面加上 node_modules/.bin/

相信前端的童鞋都会用npm包管理工具，对于这个工具，我就不展开了，如果没有安装npm的，自行安装。

weinre启动参数说明:

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代码。让页面调试更加方便。

特性:

1. 页面调试＋抓包
2. 操作简单
3. 支持HTTPS。
4. spy-debugger内部集成了weinre、node-mitmproxy、AnyProxy。
5. 自动忽略原生App发起的https请求，只拦截webview发起的https请求。对使用了SSL pinning技术的原生App不造成任何影响。
6. 可以配合其它代理工具一起使用(默认使用AnyProxy)

1 、安装: 全局安装 npm install –g spy-debugger

2、启动: spy-debugger

3、设置手机的HTTP代理

代理的地址为 PC的IP地址 ，代理的端口为spy-debugger的启动端口(默认端口为：9888)默认端口是 9888。

如果要指定端口: spy-debugger –p 8888

Android设置步骤:设置 - WLAN - 长按选中网络 - 修改网络 - 高级 - 代理设置 - 手动

iOS设置代理步骤：设置 - 无线局域网 - 选中网络 - HTTP代理手动

4、手机安装证书(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安装略复杂，但是使用过程非常愉快。