2022-04-12

一、简介

移动端调试一直都是一个痛点，因为移动终端对于我们来说是一个黑盒，它无法像PC端一样，我们可以通过F12很方便的调出开发者工具。在开发中经常会遇到同样一份代码在某个型号的手机上运行出现错误，其他手机都好好的，开发的时候Chrome上也没有报错。如果没有调试工具这种情况下我们就很难定位问题，接下来的主题就是介绍如何使用spy-debugger + Charles进行移动端调试。

二、安装

全局安装 spy-debugger

npm install spy-debugger -g

三、spy-debugger证书

其实spy-debugger的代理是基于node-mitmproxy模块实现的，这里安装的证书其实是node-mitmproxy的证书，标题写spy-debugger证书是为了和Charels证书区分开来避免混淆。

电脑安装证书

第1步：在命令行中执行spy-debugger启动spy-debugger服务，启动成功后，检查你的用户目录（home目录），会发现多了一个node-mitmproxy文件夹，这个文件夹内放的就是代理需要的证书。

我Mac电脑完整的路径是：/Users/dongxin/node-mitmproxy

一、简介

移动端调试一直都是一个痛点，因为移动终端对于我们来说是一个黑盒，它无法像PC端一样，我们可以通过F12很方便的调出开发者工具。在开发中经常会遇到同样一份代码在某个型号的手机上运行出现错误，其他手机都好好的，开发的时候Chrome上也没有报错。如果没有调试工具这种情况下我们就很难定位问题，接下来的主题就是介绍如何使用spy-debugger + Charles进行移动端调试。

二、安装

全局安装 spy-debugger

npm install spy-debugger -g

三、spy-debugger证书

其实spy-debugger的代理是基于node-mitmproxy模块实现的，这里安装的证书其实是node-mitmproxy的证书，标题写spy-debugger证书是为了和Charels证书区分开来避免混淆。

电脑安装证书

第1步：在命令行中执行spy-debugger启动spy-debugger服务，启动成功后，检查你的用户目录（home目录），会发现多了一个node-mitmproxy文件夹，这个文件夹内放的就是代理需要的证书。

我Mac电脑完整的路径是：/Users/dongxin/node-mitmproxy

第2步：在启动spy-debugger服务的电脑上安装证书，双击node-mitmproxy.ca.crt文件，选择登录之后确认

第3步：双击node-mitmproxy CA 选择为 始终信任

[图片上传失败...(image-371ccd-1649767641726)]

第4步：输入你电脑的用户密码

出现这个+号表示证书已经安装成功
[图片上传失败...(image-920960-1649767792500)]

IOS手机安装证书

第1步：首先需要将node-mitmproxy.ca.crt上传到手机上，可以通过live-server 在node-mitmproxy.ca.crt文件所在的目录下启动这个服务。如果你还没有live-server命令，可以通过以下命令进行安装：

npm install live-server -g

在/Users/dongxin/node-mitmproxy目录下执行live-server命令

第2步：在手机浏览器上访问这个服务，输入我电脑的IP地址和端口进行访问，⚠️手机和电脑必须是连接同一个WiFi网络才可以访问。

点击node-mitmproxy.ca.crt文件进行下载安装

[图片上传失败...(image-6dc129-1649767641726)]

第3步：在手机的 设置 > 通用 > 描述文件与设备管理 找到node-mitmproxy CA 证书，并点击安装

输入手机锁屏密码，选择安装

[图片上传失败...(image-44fab8-1649767641726)]

第4步：在手机的 设置 > 通用 > 关于本机 > 证书信任设置 将 node-mitmproxy CA 打开

[图片上传失败...(image-ac74f4-1649767641726)]

Android手机安装证书

安卓端的设置简单很多，直接

点击更多设置—>找到对应网络—>点击右箭头进入—>代理—>手动—>输入IP和port

之后打开相应的h5页面，此时如果有弹窗提示是否信任，选择信任即可

此时，spy-debugger的前期准备工作就已经全部完成了

四、Charles证书

这里简单介绍一下Charles的证书安装，Charles如果不安装证书的话是无法抓https的请求的。

第1步：点击Charles的Help > SSL Proxying > Install Charles Root Cetificate 然后就会弹出证书安装页面，将Charles的证书设置为始终信任即可：

第2步：点击Charles的Proxy > Access Control Settings 进行配置让手机连接代理时，不需要点允许连接确认操作

上述配置，表示允许任意IP的设备连接该代理服务，不会有允许连接确认对话框。

IOS手机安装证书

第1步：点击Charles的Help > SSL Proxying > Install Charles Root Cetificate on a Mobile Device or Remote Browser 然后会弹出一个对话框，告诉你手机要设置的代理IP地址和端口，⚠️注意：手机和电脑必须连接同一个WiFi才可以。

第2步：根据提示在手机上配置Wi-Fi网络代理，在手机上点击 设置 > 无线局域网

第3步：点击你当前所连接的WiFi网络

第4步：向下滑动，点击配置代理，选择手动，服务器和端口输入Charles对话显示的IP和端口号，配置好后，记得点击存储。

第5步：在Safari浏览器输入chls.pro/ssl ，下载并安装证书

第6步：在手机的 设置 > 通用 > 描述文件与设备管理 找到Charles Proxy CA 证书，点击安装

第7步：在手机的 设置 > 通用 > 关于本机 > 证书信任设置 将 Charles Proxy CA 打开

Android手机安装证书

第1步：点击Charles的Help > SSL Proxying > Install Charles Root Cetificate on a Mobile Device or Remote Browser 然后会弹出一个对话框，告诉你手机要设置的代理IP地址和端口，⚠️注意：手机和电脑必须连接同一个WiFi才可以。

第2步：根据提示在手机上配置Wi-Fi网络代理，在手机上点击 设置 > 无线局域网

第3步：点击你当前所连接的WiFi网络

第4步：向下滑动，点击配置代理，选择手动，服务器和端口输入Charles对话显示的IP和端口号，配置好后，记得点击存储。

第5步：在浏览器输入chls.pro/ssl ，下载证书

第6步：手机设置 > wlan > 高级设置 > 从存储设备安装(安装证书) > 找到证书后点击安装

此时，Charles所有的准备工作都完成了，接下来我们就可以启动spy-debugger进行移动端H5调试了。

五、启动spy-debugger

第1步：启动命令

也可以使用-e参数设置Charles作为外部代理服务

启动spy-debugger服务，并设置外部代理为Charles的服务

spy-debugger -e http://127.0.0.1:8888

上述命令表示启动spy-debugger调试服务，并将所有的资源请求都转发到Charles的代理服务上。其实我们打开Charles程序的时候，它实际上是在本地启动了一个http的服务。

第2步：在手机上设置代理服务器和端口为spy-debugger的IP和端口:

第3步：在浏览器打开[http://127.0.0.1:63214/client](http://127.0.0.1:59365/client/)

第4步：在京东App里随便找一个H5页面打开，或者在手机浏览器上打开 [https://m.jd.com/](https://m.jd.com/)

第5步：此时在浏览器上的Remote选项卡上就可以看到，连接的终端了

第6步：我们可以在Elements选项上进行页面元素的选择和调试，可以发现我们鼠标放到元素上，手机端上会实时看到选中效果

第7步：我们还可以在Console选项卡下查看代码输出的console信息，我们也可以这里输入页面要执行的代码

第8步：此时我们发现所有的请求都被转发到了Charles上

## 六、weinre简介

Weinre是单词缩写，全称是网页远程审查（Web Inspector Remote），可以在PC上调试运行在移动端上的页面。

### 操作界面

#### 1.Remote面板

[图片上传失败...(image-ba7c89-1649767641726)] 

targets：所有代理的页面，绿色标识表示正在被调试的页面

clients：所有调试的终端，支持多个，比如同时用chrome和firefox调试

server properties：代理服务的参数信息

#### 2.Elements面板

[图片上传失败...(image-69979f-1649767641726)] 

A：查看，修改，删除Dom元素，目前还不能增加DOM元素。
B：查看，修改，删除Dom元素属性，目前不支持增加DOM元素属性。
C：查看，修改，删除，增加 CSS属性。

#### 3.Resources面板

[图片上传失败...(image-3a6da4-1649767641726)] 

查看，修改，删除localStorage/sessionStorage。
测试发现：不能删除，修改，增加？？？

#### 4.Network面板

[图片上传失败...(image-ed62cc-1649767641726)] 

查看XHR请求信息，虽然该面板中有各种网络请求的类型，但是目前只能查看XHR请求记录。

#### 5.Timeline面板

[图片上传失败...(image-c8be67-1649767641726)] 

查看target中触发的事件时间信息（触发事件）。目前只支持两种事件：setTimeout/setInterval和用户指定的事件（通过在事件处理函数中调用console.markTimeline('tag')函数指定）

#### 6.Console面板

[图片上传失败...(image-d285-1649767641726)] 

用来执行JS语句和表达式，以及展示console的方法输出。

## 七、spy-debugger命令

#### 端口

(默认端口：9888)

spy-debugger -p 8888

#### 设置外部代理（默认使用AnyProxy）

spy-debugger -e http://127.0.0.1:8888

spy-debugger内置AnyProxy提供抓包功能，但是也可通过设置外部代理和其它抓包代理工具一起使用，如：Charles、Fiddler。

#### 设置页面内容为可编辑模式

该功能使页面内容修改更加直观方便。 (默认： false)

spy-debugger -w true

内部实现原理：在需要调试的页面内注入代码：`document.body.contentEditable=true`。暂不支持使用了iscroll框架的页面。

#### 是否允许weinre监控iframe加载的页面

(默认： false)

spy-debugger -i true

#### 是否只拦截浏览器发起的https请求

(默认： true)

spy-debugger -b false有些浏览器发出的connect请求没有正确的携带userAgent，这个判断有时候会出错，如UC浏览器。这个时候需要设置为false。大多数情况建议启用默认配置：true，由于目前大量App应用自身（非WebView）发出的请求会使用到SSL pinning技术，自定义的证书将不能通过app的证书校验。

#### 是否允许HTTP缓存

(默认： false)

spy-debugger -c true

到这里spy-debugger + Charles进行移动端调试的接入流程就介绍完了，更多关于spy-debugger的功能和使用方法，可以参考spy-debuger的[官方文档](https://www.npmjs.com/package/spy-debugger)


第2步：在启动spy-debugger服务的电脑上安装证书，双击[node-mitmproxy.ca](http://node-mitmproxy.ca/).crt文件，选择登录之后确认

第3步：双击node-mitmproxy CA 选择为 始终信任

[图片上传失败...(image-b9570d-1649767613088)] 

第4步：输入你电脑的用户密码

出现这个+号表示证书已经安装成功

[图片上传失败...(image-c6f398-1649767613088)] 

### IOS手机安装证书

第1步：首先需要将[node-mitmproxy.ca](http://node-mitmproxy.ca/).crt上传到手机上，可以通过live-server 在[node-mitmproxy.ca](http://node-mitmproxy.ca/).crt文件所在的目录下启动这个服务。如果你还没有live-server命令，可以通过以下命令进行安装：

`npm install live-server -g`

在/Users/dongxin/node-mitmproxy目录下执行live-server命令

第2步：在手机浏览器上访问这个服务，输入我电脑的IP地址和端口进行访问，⚠️手机和电脑必须是连接同一个WiFi网络才可以访问。

点击[node-mitmproxy.ca](http://node-mitmproxy.ca/).crt文件进行下载安装

[图片上传失败...(image-9ee3e8-1649767613088)] 

第3步：在手机的 设置 > 通用 > 描述文件与设备管理 找到node-mitmproxy CA 证书，并点击安装

输入手机锁屏密码，选择安装

[图片上传失败...(image-a9c5e-1649767613088)] 

第4步：在手机的 设置 > 通用 > 关于本机 > 证书信任设置 将 node-mitmproxy CA 打开

[图片上传失败...(image-f93318-1649767613088)] 

### Android手机安装证书

安卓端的设置简单很多，直接

点击更多设置—>找到对应网络—>点击右箭头进入—>代理—>手动—>输入IP和port

之后打开相应的h5页面，此时如果有弹窗提示是否信任，选择信任即可

此时，spy-debugger的前期准备工作就已经全部完成了

## 四、Charles证书

这里简单介绍一下Charles的证书安装，Charles如果不安装证书的话是无法抓https的请求的。

第1步：点击Charles的Help > SSL Proxying > Install Charles Root Cetificate 然后就会弹出证书安装页面，将Charles的证书设置为始终信任即可：

第2步：点击Charles的Proxy > Access Control Settings 进行配置让手机连接代理时，不需要点允许连接确认操作

上述配置，表示允许任意IP的设备连接该代理服务，不会有允许连接确认对话框。

### IOS手机安装证书

第1步：点击Charles的Help > SSL Proxying > Install Charles Root Cetificate on a Mobile Device or Remote Browser 然后会弹出一个对话框，告诉你手机要设置的代理IP地址和端口，⚠️注意：手机和电脑必须连接同一个WiFi才可以。

第2步：根据提示在手机上配置Wi-Fi网络代理，在手机上点击 设置 > 无线局域网

第3步：点击你当前所连接的WiFi网络

第4步：向下滑动，点击配置代理，选择手动，服务器和端口输入Charles对话显示的IP和端口号，配置好后，记得点击存储。

第5步：在Safari浏览器输入chls.pro/ssl ，下载并安装证书

第6步：在手机的 设置 > 通用 > 描述文件与设备管理 找到Charles Proxy CA 证书，点击安装

第7步：在手机的 设置 > 通用 > 关于本机 > 证书信任设置 将 Charles Proxy CA 打开

### Android手机安装证书

第1步：点击Charles的Help > SSL Proxying > Install Charles Root Cetificate on a Mobile Device or Remote Browser 然后会弹出一个对话框，告诉你手机要设置的代理IP地址和端口，⚠️注意：手机和电脑必须连接同一个WiFi才可以。

第2步：根据提示在手机上配置Wi-Fi网络代理，在手机上点击 设置 > 无线局域网

第3步：点击你当前所连接的WiFi网络

第4步：向下滑动，点击配置代理，选择手动，服务器和端口输入Charles对话显示的IP和端口号，配置好后，记得点击存储。

第5步：在浏览器输入chls.pro/ssl ，下载证书

第6步：手机设置 > wlan > 高级设置 > 从存储设备安装(安装证书) > 找到证书后点击安装

此时，Charles所有的准备工作都完成了，接下来我们就可以启动spy-debugger进行移动端H5调试了。

## 五、启动spy-debugger

第1步：启动命令

也可以使用-e参数设置Charles作为外部代理服务

启动spy-debugger服务，并设置外部代理为Charles的服务

spy-debugger -e [http://127.0.0.1:8888](http://127.0.0.1:8888/)

上述命令表示启动spy-debugger调试服务，并将所有的资源请求都转发到Charles的代理服务上。其实我们打开Charles程序的时候，它实际上是在本地启动了一个http的服务。

第2步：在手机上设置代理服务器和端口为spy-debugger的IP和端口:

第3步：在浏览器打开http://127.0.0.1:63214/client

第4步：在京东App里随便找一个H5页面打开，或者在手机浏览器上打开 https://m.jd.com/

第5步：此时在浏览器上的Remote选项卡上就可以看到，连接的终端了

第6步：我们可以在Elements选项上进行页面元素的选择和调试，可以发现我们鼠标放到元素上，手机端上会实时看到选中效果

第7步：我们还可以在Console选项卡下查看代码输出的console信息，我们也可以这里输入页面要执行的代码

第8步：此时我们发现所有的请求都被转发到了Charles上

六、weinre简介

Weinre是单词缩写，全称是网页远程审查（Web Inspector Remote），可以在PC上调试运行在移动端上的页面。

操作界面

1.Remote面板

[图片上传失败...(image-d2cefd-1649767613088)]

targets：所有代理的页面，绿色标识表示正在被调试的页面

clients：所有调试的终端，支持多个，比如同时用chrome和firefox调试

server properties：代理服务的参数信息

2.Elements面板

[图片上传失败...(image-15a58e-1649767613088)]

A：查看，修改，删除Dom元素，目前还不能增加DOM元素。
B：查看，修改，删除Dom元素属性，目前不支持增加DOM元素属性。
C：查看，修改，删除，增加 CSS属性。

3.Resources面板

[图片上传失败...(image-3c4370-1649767613088)]

查看，修改，删除localStorage/sessionStorage。
测试发现：不能删除，修改，增加？？？

4.Network面板

[图片上传失败...(image-3df029-1649767613088)]

查看XHR请求信息，虽然该面板中有各种网络请求的类型，但是目前只能查看XHR请求记录。

5.Timeline面板

[图片上传失败...(image-4d63c1-1649767613088)]

查看target中触发的事件时间信息（触发事件）。目前只支持两种事件：setTimeout/setInterval和用户指定的事件（通过在事件处理函数中调用console.markTimeline('tag')函数指定）

6.Console面板

[图片上传失败...(image-bdb7bc-1649767613088)]

用来执行JS语句和表达式，以及展示console的方法输出。

七、spy-debugger命令

端口

(默认端口：9888)

spy-debugger -p 8888

设置外部代理（默认使用AnyProxy）

spy-debugger -e http://127.0.0.1:8888

spy-debugger内置AnyProxy提供抓包功能，但是也可通过设置外部代理和其它抓包代理工具一起使用，如：Charles、Fiddler。

设置页面内容为可编辑模式

该功能使页面内容修改更加直观方便。 (默认： false)

spy-debugger -w true

内部实现原理：在需要调试的页面内注入代码：document.body.contentEditable=true。暂不支持使用了iscroll框架的页面。

是否允许weinre监控iframe加载的页面

(默认： false)

spy-debugger -i true

是否只拦截浏览器发起的https请求

(默认： true)

spy-debugger -b false有些浏览器发出的connect请求没有正确的携带userAgent，这个判断有时候会出错，如UC浏览器。这个时候需要设置为false。大多数情况建议启用默认配置：true，由于目前大量App应用自身（非WebView）发出的请求会使用到SSL pinning技术，自定义的证书将不能通过app的证书校验。

是否允许HTTP缓存

(默认： false)

spy-debugger -c true

到这里spy-debugger + Charles进行移动端调试的接入流程就介绍完了，更多关于spy-debugger的功能和使用方法，可以参考spy-debuger的官方文档