长沙设计网站排名网站优化外包多少钱
简介说明：
PC端可以用F12进行console等进行调试，但移动端App中使用webview就无法进行实时调试，针对这种情况
1. 安装
全局安装 spy-debugger
sudo npm install spy-debugger -g
// window不用加sudo
2. spy-debugger 证书
其实spy-debugger的代理是基于node-mitmproxy模块实现的，这里安装的证书其实是node-mitmproxy的证书，标题写spy-debugger证书是为了和Charels证书区分开来避免混淆。
电脑安装证书
在命令行中执行spy-debugger启动spy-debugger服务，启动成功后，检查你的用户目录目录～，会发现多了一个node-mitmproxy文件夹，这个文件夹内放的就是代理需要的证书。
我Mac电脑完整的路径是：
接下来需要在手机安装此证书(安卓为例)
首先需要将node-mitmproxy.ca.crt上传到手机上，可以通过live-server 在node-mitmproxy.ca.crt文件所在的目录下启动这个服务。如果你还没有live-server命令，可以通过以下命令进行安装：
sudo npm i -g live-server
在/xxxx/xxx/node-mitmproxy目录下执行live-server命令
在手机浏览器上访问这个服务，输入我电脑的IP地址和端口进行访问，⚠️手机和电脑必须是连接同一个WiFi网络才可以访问。
点击node-mitmproxy.ca.crt文件进行下载安装
下载下来，在浏览器下载中心中长按查看下载的目录
找到手机设置-》搜索受信任的凭据(每个手机叫法不一样，最终就是安装ca证书)
从手机存储安装
选择CA证书
按照刚刚找到的路径找，点击信任安装
此时，spy-debugger的前期准备工作就已经全部完成了
3. Charles 证书
这里简单介绍一下Charles的证书安装，如果你已经是Charles的老手了，可以直接跳过。Charles如果不安装证书的话是无法抓https的请求的。
电脑安装证书
第1步：
点击Charles的Help> SSL Proxying> Install Charles Root Cetificate 然后就会弹出证书安装页面，将Charles的证书设置为始终信任即可：
第2步：
点击Charles的Proxy > Access Control Settings进行配置让手机连接代理时，不需要点允许连接确认操作。
手机安装charles证书
第1步：
点击Charles的Help> SSL Proxying> Install Charles Root Cetificate on a Mobile Device or Remote Browser
然后会弹出一个对话框，告诉你手机要设置的代理IP地址和端口，
⚠️注意：手机和电脑必须连接同一个WiFi才可以。
第2步：
根据提示在手机上配置Wi-Fi网络代理，在手机上点击设置> wifi->手动代理,进行输入IP和端口号
第3步：
在浏览器输入chls.pro/ssl，下载并安装证书
下载证书的步骤就和上面spy-debugger下载证书的方式一样
此时，Charles所有的准备工作都完成了，接下来我们就可以启动spy-debugger进行移动端H5调试了。
4. 测试使用，启动spy-debugger
第1步：
启动命令
# 启动spy-debugger服务
spy-debugger
也可以使用-e参数设置Charles作为外部代理服务
# 启动spy-debugger服务，并设置外部代理为Charles的服务,8888是charles的端口
spy-debugger -e http://127.0.0.1:8888
上述命令表示启动spy-debugger调试服务，并将所有的资源请求都转发到Charles的代理服务上。其实我们打开Charles程序的时候，它实际上是在本地启动了一个http的服务，监听在8888端口上。
第3步：
在浏览器打开http://127.0.0.1:59224/client/
第4步：
在京东App里随便找一个H5页面打开，或者在手机浏览器上打开 https://m.jd.com/
第5步：
此时在浏览器上的Remote选项卡上就可以看到，连接的终端了
第6步：
我们可以在Elements选项上进行页面元素的选择和调试，可以发现我们鼠标放到元素上，手机端上会实时看到选中效果
第7步：
我们还可以在Console选项卡下查看代码输出的console信息，我们也可以这里输入页面要执行的代码
第8步：
此时我们发现所有的请求都被转发到了Charles上
