前端必会的抓包工具

26,419 阅读3分钟

说到抓包这个问题,很多初级的前端都不太能意识到这个问题,虽然本人也就是个小菜,但是对于抓包工具可以说是熟练掌握了,因为有过太多接口的问题被测试指派了我,那么如果熟练掌握了抓包不仅能快速定位出问题,还能分析网络请求,以及一些前端逻辑的问题导致接口多次触发等现象。

所以一个合格的前端一定要会抓包,而且还要熟练掌握抓包工具,比如可以通过抓包工具些慢速网络,处理慢速网络时的一些交互,更重要的一点是,还可以用抓包工具配置页面的访问跳转,做混合开发时的一些测试页面。

抓包工具有哪些

比较熟悉的是Mac上用Charles,Windows上用Fiddler。关于这两者的安装使用教程实在太多了,本文不做赘述,今天我给大家介绍一款集合了抓包和H5页面调试的工具spy-debugger。

为何开始使用spy-debugger

在开发过程中,我们的项目都是根据功能需求建一个开发的分支,等到了提测的时候,把分支合并到测试环境,测试通过再上线。基本这是一个统一的流程,但是做移动端混合开发的时,H5页面我们在本地开发的时候,在chrome中开启了移动端模式,基本上到手机上也不会有太大的问题。

但是上测试环境后,产品有的时候会需要改一些文案样式啊,每次遇到这种情况,临时改些东西都会先在本地的分支上改好,再合并到test分支然后编译上测试。往往很多时候,在浏览器的移动模式下改的东西,上到真机上并不是完全一样,会出现很多适配等问题,所以如果有一款调试工具,既能调试真机的页面,又能调试JS,还能抓包分析那多好。只需要给设备配置好本地的代理,然后我就可以在浏览器上修改真机的代码,还能看在真机上的效果,这样就大大提升了修改的效率,然后我就遇到了spy-debugger这个神器。

关于spy-debugger

一站式页面调试、抓包工具。远程调试任何手机浏览器页面,任何手机移动端webview(如:微信,HybridApp等)。支持HTTP/HTTPS,无需USB连接设备。

特性

  1. 页面调试+抓包
  2. 操作简单,无需USB连接设备
  3. 支持HTTPS。
  4. spy-debugger内部集成了weinre、node-mitmproxy、AnyProxy。
  5. 自动忽略原生App发起的https请求,只拦截webview发起的https请求。对使用了SSL pinning技术的原生App不造成任何影响。
  6. 可以配合其它代理工具一起使用(默认使用AnyProxy) (设置外部代理)

使用教程及官方文档都很详细

官方文档链接