前端必会的抓包工具

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

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

抓包工具有哪些

比较熟悉的是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) (设置外部代理)

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

官方文档链接