很多人不怎么知道抓包，又非常想学，更烦恼的是，关于抓包技术的实现文章少之又少，于是我萌动了写一篇关于抓包的实现的步骤的博客。希望对你们有所帮助，同时也希望尊重原创，欢迎转载。
首先你要知道什么是抓包
抓包就是将网络传输发送与接收的数据包进行截获、重发、编辑、转存等操作，也用来检查网络安全，但往往被某些无耻之徒用来网游作弊。
这是我大三上学期通过抓包做的小型教务系统--La吧（喇叭），可以查成绩，查所有班级的课表，公告栏，机构通知，图书馆查询书籍，查询借书情况、意见反馈等等的功能。后台数据通过Bmob移动后端云服务进行数据存储。
下面就让我通过我做的小项目进行阐述如何抓包吧。
你所需要的工具
抓取数据的分析工具有很多,不同浏览器也自带很多开发人员工具，如果你的是IE内核的浏览器的话，比如360安全浏览器，你可以安装一个HttpWatch，相对web开发的人员来说对这个工具很熟悉，HttpWatch是一款强大的网页数据分析工具。集成在Internet Explorer工具栏。包括网页摘要。Cookies管理。缓存管理。消息头发送/接受。字符查询。
如果你的是Firefox火狐浏览器的话，恭喜你，它里面自带了一个比较好用的工具firebug，它的功能是和HttpWatch差不多，区别不大，我就是用Firefox自带的工具进行抓包分析的。
在以往的开发过程中，我所遇到的问题：公司项目是一个Hybird App，前端H5页面内嵌在APP里，完成开发后，进行联调的时候如果出现错误，很难定位到问题出现在哪里。因为在APP里，我不知道js代码执行到了哪里、看不到console.log输出、看不到接口的请求与相应。
以往联调遇到问题，我解决问题的思路： (1)首先我会分析是接口问题，还是前端js代码的问题(有时候是真的不知道错在哪了)； (2)如果是接口问题，就去找后台或者测试去查报文、日志，看看问题出现在哪里(但是别人也有忙的时候)； (3)如果是js代码问题，自己会分析发生错误的代码大概是在哪一部分，然后会在那些代码里将一些相关的变量写入到页面或者使用弹出框弹出，然后逐一排查(老是改来改去、写入页面、弹出弹窗也很烦人的)； (4)还有一种方法就是用PC端谷歌浏览器直接打开测试环境H5页面，用控制台来调试(一些与原生APP需要交互的内容无法调试、自己要生成一堆参数去拼接然后模拟登录状态，反正也不是很方便)。 总之，有时候遇到那种不好定位的问题，解决起来也是要费点功夫的。
本文的重点来了——spy-debugger：针对上面提出来的那些问题，我抱着试一试的心态在npm官网找了找，然后就看到了spy-debugger，介绍说是一站式页面调试、抓包工具。然后自己立马下载，上手使用，感觉比以往那种方式省事太多了。
-
关于spy-debugger 一站式页面调试、抓包工具。远程调试任何手机浏览器页面，任何手机移动端webview（如：微信，HybridApp等）。支持HTTP/HTTPS，无需USB连接设备。 spy-debugger详细介绍：www.npmjs.com/package/spy…
-
安装 Windows 下(最好是使用管理员权限安装，npm安装包错的话，使用淘宝镜像cnpm安装)
npm install spy-debugger -g 1 3. 快速上手 第一步：手机和PC保持在同一网络下（比如同时连到一个Wi-Fi下）；
第二步：在命令行输入spy-debugger，按命令行提示用浏览器打开相应地址，一般会自动打开浏览器；
img-blog.csdn.net/20181025174…
第三步：设置手机的HTTP代理，代理IP地址设置为PC的IP地址，端口为spy-debugger的启动端口(默认端口：9888)；
Android设置代理步骤：设置 - WLAN - 长按选中网络 - 修改网络 - 高级 - 代理设置 - 手动；
第四步：手机安装证书。注：手机必须先设置完代理后，再通过(非微信)手机浏览器扫码访问安装证书（手机首次调试需要安装证书，已安装了证书的手机无需重复安装)；
(1) 扫码安装证书的网址:github.com/wuchangming…
(2) 如果该链接无法正常安装，可以去 spy-debugger详细介绍：www.npmjs.com/package/spy…
(3) 一定是设置完代理后，再去扫码安装。我是设置完代理后关掉了无线，使用流量去扫码安装，会进入到别的无关页面，无法进行安装；
(4) 安装完之后会有弹窗让你为该证书命名，随便写一个就行，有的手机还会弹出是否信任该证书，要选择信任，否则不能正常使用。
第五步：用手机浏览器访问你要调试的页面即可(或者说打开APP里你的H5页面就可以了)。
- 继续探究 自定义选项等更多内容，请访问spy-debugger详细介绍：www.npmjs.com/package/spy…
写在最后： spy-debugger这个工具上手简单，目前已经能满足我页面调试、抓包一些简单的操作了。这个工具更高大上的用法，或者说一些别的更好用的调试、抓包工具等后期开发过程中有需要了我再上手吧。
