主角登场
抓包工具: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工具的使用
写在最后
如果博主有帮到友友们,一定不要吝啬手中的赞哟~