移动端真机调试，手机端调试，移动端调试

移动端真机调试方法

一、chrome真机调试：局限性：只能调试手机端的chrome浏览器，其他浏览器均不适用；优点是: 简单快捷；

二、spy-debugger调试：spy-debugger，安装稍微复杂一点，spy-debugger集成了weinre，不过还增加了抓包工具，使用最为方便；

一、chrome真机调试

1、手机端下载好chrome浏览器；

2、使用USB连接到PC，打开手机的USB调试模式；（也可以再谷歌拓展程序里面下载，inspect device）

3、然后在PC端打开chrome浏览器，在地址栏输入：chrome://inspect 勾选"discovery usb device"；

4、打开应用程序，然后在手机端浏览网页，就可以看到如下的页面，点击inspect，进行调试；

注意：如果遇到无法调试的情况，可以重新打开手机的USB调试选项；

注意：如果网络加了域的，因为并不能使用这个方式，可以考虑使用另外两种调试方式；

二、 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)

Spydebugger安装与使用

全局安装：

npm install –g spy-debugger

启动：

spy-debugger

重要：设置手机的HTTP代理，同一个局域网，以及代理设置；

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

• 如果要指定端口：spy-debugger-p1002

• Android设置步骤：设置 - WLAN - 长按选中网络 - 修改网络 - 高级 - 代理设置 - 手动 - 设置ip和端口号（对应自己启动的，参考下图）。

• 

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

手机安装证书(node-mitmproxy CA根证书)：

第一步：生成证书

生成CA根证书，根证书生成在电脑目录： /Users/XXX/node-mitmproxy/ 目录下(Mac)。

spy-debugger initCA

第二步：安装证书

把node-mitmproxy文件夹下的 node-mitmproxy.ca.crt 传到手机上，点击安装即可；

第三步：查看

Spy-debugger启动界面，同样，在手机端刷新页面之后，targets中会有记录；

三、移动端调试

可以看到你打印的内容及其他的信息，比如cookie、LocalStorage,Network、Element等；

微信打开这个网址 http://debugx5.qq.com/ 

扫二维码也可以

进去后，选择中间“信息”，然后一直往下翻，把vConsole打开，把下面两个Content Cache关掉；

然后打开你要调试的页面，你就你能看到右下角有个绿色按钮vConsole；点击就能查看你代码中console的内容了；

四、vConsole的使用

https://github.com/Tencent/vConsole/blob/dev/doc/tutorial_CN.md 

---

---

---

---

---

---

---

---

---

---

---

---

---

---

---