浏览器移动端的远程调试Mac版教程--前端开发

前端开发少不了移动端的调试，由于公司人事的变动，导致我不得不自己学习如何调试APP端，初次上手，总结了以下方法，若有 不对，还请指正。

本次要分享给大家的是spy-debugger工具，他的优点如下：

• 页面调试+抓包
• 操作简单，无需连接USB
• 支持https
• spy-debugger内部集成了weinre、node-mitmproxy、AnyProxy

但缺点是只能去调试手机浏览器里的页面，如果是独立APP则访问不到不能进行抓包，若需要 APP抓包，则需使用Charles，我在另一篇文章里面有讲到，可复制链接去看https://mp.csdn.net/console/editor/html/105573965。

安装

需要确保电脑有node环境，并且已经安装npm

Windows：    

npm install spy-debugger -g

MAc：    

sudo npm install spy-debugger -g

使用

1. 手机和电脑保持在同一网络下（比如连接同一WIFI）

2. 电脑命令行输入

   spy-debugger

   按命令行提示用浏览器打开相应地址（默认会自动打开网址），打开之后如下图 

    3. 设置手机的http代理。

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

    IP地址为电脑的IP地址（使用ifconfig命令查看自己电脑IP），端口为spy-debugger的启动端口(默认端口：9888)。

   4. 手机安装证书。注意：手机必须先设置完代理再通过以下网址来安装（手机首次调试需要安装证书，已安装证书的手机无需重复安装）。点击安装证书

   5.  用手机浏览器访问你要调试的页面即可。下图中绿色地址出现即为成功，可点击console或者element或者network来进行调试，也可请求抓包。

扩展：关于spy-debugger的自定义选项

修改端口号（默认为 9888，现改为8888）

spy-debugger -p 8888

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

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

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

设置页面内容为可编辑

spy-debugger -w true

该功能使得页面内容修改更为直观方便。（默认false）

内部实现原理：在需要调试的页面内注入代码：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