对前端十分友好的抓包工具whistle入门使用

我为何使用whistle

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

如何使用whistle

1.安装

npm install whistle -g 

w2 -h // 查看帮助信息

复制代码

2.启动

w2 start -p 8899
复制代码

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

推荐使用SwitchyOmega

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

深刻使用

1.手机上如何抓包

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

2.设置rules转发请求

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设置代理以外暂时没有想到好的解决方案，若是你们有解决方案，欢迎提出

3.抓取https的请求

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

最后附上whistle官方文档 whistle

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