whistle抓包工具

为什么要使用

• 1、方便在本地模拟修改线上资源
• 2、防止正式环境与开发环境代码各种资源路径、接口路径不同，导致上线未修改引用的是本地资源
• 3、可以在真机上审查元素，重构问题一目了然
• 4、mock数据
• 5、待补充

如何使用

安装Whistle【抓包工具】

npm i whistle -g
// 或
yarn add global whistle

启动whistle

w2 start

终端代理

whistle只是一个抓包工具，他可以拦截并修改请求内容。可以简单的理解为服务端（类似vpn服务器）。
有了服务器，你的本机（pc或手机）需要代理(类似于vpn软件)

pc端代理

安装Chrome的SwitchyOmega插件 点击下载
按图示配置代理

当SwitchyOmega插件选择proxy时，即表示代理到whistle抓包工具，选择系统代理时，表示使用系统的vpn等代理，如链接ulinkVPN时，或使用其他vpn时，当选择直接链接时，表示不使用任何代理及vpn，此时使用ulinkVPN无效。

移动端代理

移动端无需安装插件，直接将wifi链接至和本机电脑统一局域网的wifi中即可。
此时选择链接的wifi，在wifi设置中将代理选项打开，ip地址填写电脑的ip地址，此ip地址也可以在whistle工具中查看，本机电脑打开http://127.0.0.1:8899，点击Online即可看到本机ip地址

安装https证书

顶部菜单栏点击https勾选如图所示

终端已经配置好代理的情况下：

• 移动端扫码下载安装安全证书
• pc端点击Download RootCA（安装选项自行百度）
• 或直接点击下载
  ios端需要注意的是，安装好证书后，需要在通用-关于本机-证书信任设置中打开whistle.XXXXXXXXXX

  抓包

  此时已经可以进行http和https的抓包了，在network中可以看到被代理的设备发出的http请求，以及请求的参数，返回的内容。
  

  代理

  如何将线上的资源使用本地资源代替？
  在rules中配置规则，一下时候简单的几种规则

  tencent.com 127.0.0.1 # tencent.com域名下所有资源代理到本地ip，类似于配置hosts
  https://tencent.com http://127.0.0.1 # 将https的线上地址代理到没有https的本地环境
  https://tencent.com https://localhost:8888 # 将线上地址代理到特殊端口的本地环境
  https://tencent.com/app.js D://doc/app.js # 将线上某个文件代理到本地文件

  微信内审查元素

  使用vconsole虽然能查看大部分页面dom，请求等，但是无法直观的看到某个重构页面的dom具体位置，大小，内外边距等。
  使用Whistle整合的weinre即可在电脑端审查移动设备的dom元素。
  首先在rules中配置

  https://* weinre:// # 表示将所有https请求通过weinre工具抓包，也可设置单独的域名或页面

  打开顶部导航中的Weinre即可看到移动设备中打开的页面地址，点击地址后再点击顶部菜单中红的Elements即可查看移动设备中的dom节点。
  
  

  mock数据

  Whistle可以安装各种插件，mock数据可以安装vase
  具体用法自行百度吧！