对前端十分友好的抓包工具whistle入门使用抓取https的请求需要安装证书，官网有证书的安装说明，很详细，记得信任证

浏览器抓包工具,手机抓包工具，操作简单，文档全面

1.安装

npm install whistle -g 

w2 -h // 查看帮助信息

2.启动

w2 start -p 8899

3.启动之后还需要为浏览器配置代理之后才能抓包

4.配置完成之后打开localhost:8899查看抓包结果，websocket请求也可以抓到

1.手机上如何抓包

手机和电脑连接同一个wifi，在手机的wifi上设置代理,以下图为例，主机名为电脑的ip，端口号为whistle的启动端口8899

2.设置rules转发请求

2.1 whistle可以代替繁杂的webpack代理配置，轻松搞定proxy

比如下图中的配置代表将cloud.xylink.com的请求和https://cdn.xylink.com/public/20190514/mms/的请求转向本地的3002端口（这里之所以是3002端口是因为我本地webpack启动的项目是3002端口，这个根据自己启动的项目所监听的端口而定）

打开的页面，注意我的url是真实的线上地址，而不是Localhost本地地址

whistle中查看请求的转发情况，可以看到有些请求已经的确转发到了本地3002端口

可是我们也发现有些请求竟然转发失败了

仔细查看，转发失败的请求都是原本请求的cdn上的资源，转发到本地3002端口之后都失败了，这下原因就明白了，因为我本地修改了代码，打包生成之后的hash值改变了，也就不存在desktop.b6b1a282.css这个文件了，因此请求转发失败了

综上，使用whistle转发请求来达到本地调试的情景，大多用在调试线上问题的场景，而在日常开发的时候由于本地在静态资源方面会遇到问题，除了webpack设置代理之外暂时没有想到好的解决方案，如果大家有解决方案，欢迎提出

2.2 轻松mock请求的http状态码

想要让接口返回特定的状态码，来模拟接口出错场景，难道还要让server配合你修改吗？或者还需要自己使用Yapi或者easy mock去mock一个假接口吗？这些太复杂，whistel直接设置一条rule搞定

3.抓取https的请求

抓取https的请求需要安装证书，官网有证书的安装说明，很详细，记得信任证书。另外，电脑上安装了证书可以抓取浏览器发出的https请求，但是要抓取手机的https请求，就需要再次在手机上安装证书，否则也是抓取不到的

最后附上whistle官方文档 whistle

欢迎star或指正问题,时间原因，后续使用过程中会再更新关于whistle一些问题。