快速入门抓包工具--whistle

学习契机：
项目负责人要前端人员对于自己修改的东西进行自测，包括埋点，我不懂如何测试埋点，我询问后，负责人推荐安利whistle工具。

项目负责人留言

为啥要抓包

个人理解：为了解更多真机场景下的相关参数情况，有些是开发工具无法进行模拟的场景，例如埋点等，略权威解答参见下方

抓包就是将网络传输发送与接收的数据包进行截获、重发、编辑、转存等操作，也用来检查网络安全。抓包也经常被用来进行数据截取等。黑客常常会用抓包软件获取你非加密的上网数据，然后通过分析，结合社会工程学进行攻击。所以，学会抓包，对于学好网络安全技术十分重要。
做接口测试的时候，经常需要验证发送的消息是否正确，或者在出现问题的时候，查看手机客户端发送给server端的包内容是否正确，就需要用到抓包工具。

注：以上内容来源至知乎帖子https://zhuanlan.zhihu.com/p/44912855，侵删

1.安装 & 启动

//  安装---也可以使用tnpm
npm install  -g  whistle

//  启动---不设置端口默认使用8899
w2 start  -p 8899

image.png

image.png

2.实战操作（个人做法）

(a) 电脑分享生成Wi-Fi，设备连接并设置代理。

以下以手机为例进行说明，【Wi-Fi连接】-【代理-手动】-【配置服务器&端口】
iPhone：【http代理-配置代理-手动】-【服务器（电脑ip）&端口（8899）】
huawei p30：【Wi-Fi连接后，显示高级选项】-【代理-手动】-【服务器（电脑ip）&端口（8899）】

(b) 安装证书

点击抓包网页上方的HTTPS生成一个二维码，扫码安装到手机上

(c) 访问相关内容

点击抓包网页，点击左侧的Network，手机访问相关内容即可抓包

浏览器访问baidu.com

参考文档

• 关于whistle · GitBook
• whistle工具全程入门
• whistle 使用实践
• whistle--前端调试利器