spy-debugger调试、抓包工具

- 日理万妓 2023-06-27 03:22 30阅读 0赞

> 由于想要用windows系统调试iOS App webview里面的H5页面，所以找到这个工具，可以console.log信息，方便调试APP里的网页。

# 关于spy-debugger #

一站式页面调试、抓包工具。远程调试任何手机浏览器页面，任何手机移动端webview（如：微信，HybridApp等）。支持HTTP/HTTPS，无需USB连接设备。

## 特性 ##

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

## 使用案例 ##

页面编辑模式

启动命令：`spy-debugger -w true`

![aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy82MTY2MTEwLTUxZDYzNmYwYzQ1MWUxZmMuZ2lmP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXB8aW1hZ2VWaWV3Mi8yL3cvMzUwL2Zvcm1hdC93ZWJw][]

image

weiner页面调试界面

![format_png][]

image

anyproxy抓包界面

![format_png 1][]

image

## 安装 ##

Windows 下

npm install spy-debugger -g

Mac 下

sudo npm install spy-debugger -g

## 三分钟上手 ##

第一步：手机和PC保持在同一网络下（比如同时连到一个Wi-Fi下）

第二步：命令行输入`spy-debugger`，按命令行提示用浏览器打开相应地址。

第三步：设置手机的HTTP代理，代理IP地址设置为PC的IP地址，端口为`spy-debugger`的启动端口(默认端口：9888)。

*  Android设置代理步骤：`设置 - WLAN - 长按选中网络 - 修改网络 - 高级 - 代理设置 - 手动`
 *  iOS设置代理步骤：`设置 - 无线局域网 - 选中网络 - HTTP代理手动`

第四步：手机安装证书。**注：手机必须先设置完代理后再通过(非微信)手机浏览器访问`http://s.xxx`[`(地址二维码)`][Link 3]安装证书**（手机首次调试需要安装证书，已安装了证书的手机无需重复安装)。[问题：iOS `10.3.1`以上版本证书安装问题][iOS _10.3.1]

第五步：用手机浏览器访问你要调试的页面即可。

## 自定义选项 ##

端口

(默认端口：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

[Link 1]: https://www.npmjs.com/package/spy-debugger#%E4%B8%89%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B
[weinre]: http://people.apache.org/~pmuellr/weinre/docs/latest/
[node-mitmproxy]: https://github.com/wuchangming/node-mitmproxy
[AnyProxy]: https://github.com/alibaba/anyproxy
[Link 2]: https://www.npmjs.com/package/spy-debugger#%E8%AE%BE%E7%BD%AE%E5%A4%96%E9%83%A8%E4%BB%A3%E7%90%86%E9%BB%98%E8%AE%A4%E4%BD%BF%E7%94%A8anyproxy
[aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy82MTY2MTEwLTUxZDYzNmYwYzQ1MWUxZmMuZ2lmP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXB8aW1hZ2VWaWV3Mi8yL3cvMzUwL2Zvcm1hdC93ZWJw]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy82MTY2MTEwLTUxZDYzNmYwYzQ1MWUxZmMuZ2lmP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXB8aW1hZ2VWaWV3Mi8yL3cvMzUwL2Zvcm1hdC93ZWJw
[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy82MTY2MTEwLTUxY2Q0MTc4OTlhMmU1ODYucG5nP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXB8aW1hZ2VWaWV3Mi8yL3cvMTIwMC9mb3JtYXQvd2VicA?x-oss-process=image/format,png
[format_png 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy82MTY2MTEwLWEzMTIzZDFlY2U1NzU4OTcucG5nP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXB8aW1hZ2VWaWV3Mi8yL3cvMTIwMC9mb3JtYXQvd2VicA?x-oss-process=image/format,png
[Link 3]: https://github.com/wuchangming/spy-debugger/blob/HEAD/demo/img/QRCodeForCert.png
[iOS _10.3.1]: https://github.com/wuchangming/spy-debugger/issues/42