spy-debugger安装、调试步骤

spy-debugger安装、调试步骤

  1. 安装命令(先通过nrm切源,切到cnpm):

 

spy-debugger安装、调试步骤_第1张图片

注:如果安装过程中出现如下错误,问题出在安装到一半的node_modules文件夹下,将该spy-debugger目录下该文件夹删除后,再执行上图安装命令即可成功

spy-debugger安装、调试步骤_第2张图片

spy-debugger安装、调试步骤_第3张图片

  1. 手机和PC保持在同一网络下(比如同时连到一个Wi-Fi下)
  2. 命令行输入spy-debugger,此时浏览器默认打开相应地址(如果没有自动打开则手动打开浏览器输入)

spy-debugger安装、调试步骤_第4张图片

spy-debugger安装、调试步骤_第5张图片

附:

spy-debugger常用命令如下:

  1. 设置外部代理(默认使用AnyProxy,spy-debugger内置AnyProxy提供抓包功能,但是也可通过设置外部代理和其它抓包代理工具一起使用,如:Charles、Fiddler)

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

  1. 设置页面内容为可编辑模式(默认: false)

spy-debugger -w true

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

  1. 是否允许weinre监控iframe加载的页面(默认: false)

spy-debugger -i true

  1. 是否只拦截浏览器发起的https请求(默认: true)

spy-debugger -b false

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

  1. 是否允许HTTP缓存(默认: false)

spy-debugger -c true

  1. 设置手机的HTTP代理,代理IP地址设置为PC的IP地址,端口为spy-debugger的启动端口(默认端口:9888)

spy-debugger安装、调试步骤_第6张图片spy-debugger安装、调试步骤_第7张图片

输入服务器主机名和端口(主机名为当前调试PC的IP,端口为node-mitmproxy启动的端口)

spy-debugger安装、调试步骤_第8张图片

  1. 手机安装证书(node-mitmproxy CA根证书)——暂不强制安装

注:手机必须先设置完代理后再通过(非微信)手机浏览器访问http://s.xxx(地址二维码)安装证书。(手机首次调试需要安装证书,已安装了证书的手机无需重复安装)

  1. 打开手机至需要调试的页面

spy-debugger安装、调试步骤_第9张图片

如下图targets中出现内容则说明可以调试

spy-debugger安装、调试步骤_第10张图片

最后,点击Elements进行调试

spy-debugger安装、调试步骤_第11张图片

你可能感兴趣的:(spy-debugger安装、调试步骤)