前端如何快速调试线上问题
主角登场
抓包工具：whistle，charles 此次博主会从中选择一个来讲
配个官网whistle
功能
- 可以抓包（这不是我们这次讲的主题）
- 代理 【主讲】
以下都会围绕代理这个主题来讲，抓包工具是怎么运用到我们日常开发工作当中，并且协助我们调试和排查问题
我们以whistle为例，为什么呢？
- 相比其他（charles等）代理工具，安装更加简单，（易用）
- 功能更加强大（支持安装多元插件）
- 配置方便（相比以往的一些代理工具）
重头戏
问题来了，怎么帮我们开发提效的呢？
还记得我们通过webpack进行本地构建调试时，用到过一个devserver的配置项嘛，其中有一个proxy 我们通常用它来解决调用后端接口的域名跨域问题，其实就是做了一个转发功能，只不过这里的转发是接口的转发。
那我们前端一般调试页面，无非就是要更新本地生成的静态资源文件，这里估计有小伙伴思路清晰了～
没错，接下来就是用本次的大哥whistle来实现静态资源文件的代理功能
whistle安装
npm i -g whistle # 全局安装即可
w2 start # 安装后，启动
w2 stop # 关闭
看到上图，就启动成功，并且帮我们开启了本地8899端口，直接去浏览器访问。
whistle 配置和使用
我们打开后看到的这个面板，就是抓包工具基本功能–监控抓去网络请求，这个了解就行- 试试如下配置，你就大概明白代理是怎么一回事了
- 发现奥秘之后，我们需要做一下这些配置，让我们的代理变得更强大，那就是要开启https! 本地要安装证书
使用场景（调试）
为了安全，域名就不给大家展开了，这是我在工作中，调试测试环境所用到的其中一个静态资源的代理，大家按照此思路去调试线上，就可以大大缩减线上问题排查的时间，是不是很赞😎！
扩展
我们可以通过代理工具本身的功能，配置抓取手机的包，然后一些手机端访问的h5页面，也可以通过这种配置规则来调试线上问题，不过需要注意下，绕过嵌入的小程序或者app端之后，在打开h5的那一刹那抓包就行，如果你开启抓包工具访问的话，app或者小程序有做防抓包安全措施的，我们根本就无法正常访问宿主端【app或者小程序】
留一个待办项：
- 大家觉得这种思路，可以解决工作中前端调试的99%的问题不咯～
- charles抓包工具同理哦，如果大家有需求，博主可以再出一篇charles工具的使用
写在最后
如果博主有帮到友友们，一定不要吝啬手中的赞哟～