主角登场

抓包工具：whistle，charles 此次博主会从中选择一个来讲
配个官网whistle

功能

1. 可以抓包（这不是我们这次讲的主题）
2. 代理 【主讲】

以下都会围绕代理这个主题来讲，抓包工具是怎么运用到我们日常开发工作当中，并且协助我们调试和排查问题

我们以whistle为例，为什么呢？

1. 相比其他（charles等）代理工具，安装更加简单，（易用）
2. 功能更加强大（支持安装多元插件）
3. 配置方便（相比以往的一些代理工具）

重头戏

问题来了，怎么帮我们开发提效的呢？

还记得我们通过webpack进行本地构建调试时，用到过一个devserver的配置项嘛，其中有一个proxy 我们通常用它来解决调用后端接口的域名跨域问题，其实就是做了一个转发功能，只不过这里的转发是接口的转发。

那我们前端一般调试页面，无非就是要更新本地生成的静态资源文件，这里估计有小伙伴思路清晰了～

没错，接下来就是用本次的大哥whistle来实现静态资源文件的代理功能

whistle安装

npm i -g whistle # 全局安装即可
w2 start # 安装后，启动
w2 stop # 关闭

看到上图，就启动成功，并且帮我们开启了本地8899端口，直接去浏览器访问。

whistle 配置和使用

1. 
   我们打开后看到的这个面板，就是抓包工具基本功能–监控抓去网络请求，这个了解就行
2. 试试如下配置，你就大概明白代理是怎么一回事了
   
3. 发现奥秘之后，我们需要做一下这些配置，让我们的代理变得更强大，那就是要开启https! 本地要安装证书

使用场景（调试）

为了安全，域名就不给大家展开了，这是我在工作中，调试测试环境所用到的其中一个静态资源的代理，大家按照此思路去调试线上，就可以大大缩减线上问题排查的时间，是不是很赞😎！

扩展

我们可以通过代理工具本身的功能，配置抓取手机的包，然后一些手机端访问的h5页面，也可以通过这种配置规则来调试线上问题，不过需要注意下，绕过嵌入的小程序或者app端之后，在打开h5的那一刹那抓包就行，如果你开启抓包工具访问的话，app或者小程序有做防抓包安全措施的，我们根本就无法正常访问宿主端【app或者小程序】

留一个待办项：

• 大家觉得这种思路，可以解决工作中前端调试的99%的问题不咯～
• charles抓包工具同理哦，如果大家有需求，博主可以再出一篇charles工具的使用

写在最后

如果博主有帮到友友们，一定不要吝啬手中的赞哟～