移动端前端抓包神器详解（whistle+weinre）

移动端线上代码调试工具，针对测试环境的或者开发环境，还可以打vconsole可以查看，但是线上代码如果有问题，没办法去打vconsole，此款抓包神器可以解决这个问题

有耐心的同学可以查看官网文档：快速上手 · GitBook

1、全局安装

npm install -g whistle

2、启动

w2 start

 3、用浏览器打开http://localhost:8899/，端口号为8899，也可以修改w2 start -p port，可以修改为需要的端口号

4、如果是HTTPS,需要安装证书

点击工具栏https,弹出二维码，用手机浏览器扫描，下载安装CA证书，并且要信任此证书

 5、手机端与电脑端连同一局域网，这点很重要！

设置手机端代理

 6、打开移动端页面，就可以在http://localhost:8899/#network处查看到请求信息

 7、页面调试配置

在此处配置信息

https://自己的页面.com/path C:\本地项目路径
https://线上页面路径  weinre://[自己的页面路径]
https://线上页面路径 log://{test.js}

8、重启移动端页面，点击weinre

出现自己的页面

 切换elements可以查看自己的页面信息了！可以进行调试，可以查看resource和network，console