抓包调试工具的终极答案-whistle
前言
抓包工具是一种在计算机网络中进行调试和分析的强大工具，它能够拦截、查看和分析在网络中传输的数据包内容。通过捕获这些数据包，我们可以深入挖掘其中包含的大量有用信息。抓包工具不仅提供了直观和可视化的界面，而且具有强大的过滤和分析功能，使用户能够轻松地掌握网络数据流量的细节。
在计算机通信中，数据包是由发送端（如浏览器或应用程序）构建的，并通过互联网传输到接收端（如服务器或另一台计算机）。通常情况下，这些数据包由发送和接收的应用程序自行处理，用户往往无法直接观察这些数据包的内容。然而，抓包工具可以截取这些数据包，并将其内容以明文或加密的形式展示给用户。如果数据包是以明文形式发送的，或者我们可以推断出其加密方法，那么我们就可以对这些数据包进行深入的分析和解密。这样，我们便可以了解这些数据包的内容、用途和意义。
通过使用抓包工具，开发人员和系统管理员可以调试和分析网络应用程序和通信协议，以便更好地了解它们的性能、安全性和可靠性。此外，普通用户也可以利用抓包工具来了解他们正在使用的应用程序和网络服务的内部工作原理，并保障他们的网络安全和隐私。总之，抓包工具是计算机网络中不可或缺的一部分，它为我们提供了深入洞察和分析网络数据流量的能力。
抓包工具更多的分析网络流量以及数据包内容、检测网络问题、获取数据传输的详细信息、功能调试等。市面上常见的抓包工具有很多，比如说我们网页上常用到的浏览器开发者工具、移动端常用的vConsole以及市面上大家都在用的Charles和whistle，今天就简单给大家分享一下whistle的基本使用。
1. 简介
whistle主要是基于node来实现的一个跨平台web调试代理工具，whistle采用的是类似配置系统hosts的方式，一切操作都可以通过配置实现，支持域名、路径、正则表达式、通配符、通配路径等多种匹配方式，且可以通过Node模块扩展功能：
2. 安装启动
1. 环境
首先要使用whistle的话，必须要具备node环境(下载地址)，下载成功后可以通过命令行来查看是否已安装
node -v // 查询当前node版本信息
2.安装whistle
后面也会提到桌面端应用LightProxy，也是基于Electron和whistle的桌面端代理软件。
npm install -g whistle // Windows
sudo npm install -g whistle // Mac(非root权限)
安装成功可以使用命令whistle help 或者w2 help查看whistle的相关帮助信息
3.启动whistle
最新版本的whistle支持三种等价的命令whistle、w2、wproxy
w2 start // 启动whistle
w2 restart // 重启whistle
w2 stop // 停止whistle
w2 run // 调试模式启动whistle
4.配置代理
这里就以Mac配置举例，可以在设置->Wi-Fi->详细信息->代理中选择网页代理(HTTP)填入对应的ip以及端口号;
移动端这里同样以IOS为例，在Wi-Fi->HTTP代理中打开配置代理为手动，同时填入对应ip以及端口号.
我们也可以通过chrome浏览器插件SwitchyOmega来进行网页代理
- 点击新建情景模式
- 选择选项代理服务器
- 配置代理协议、代理ip、代理端口
- 点击应用选项保存并切换到代理模式
5.证书安装
最后我们只需要安装根证书即可。我们打开whistle生成的浏览器生成页，点开HTTPS选项，点击二维码下载证书，这里同样以MAC和IOS为例。
1.Mac我们打开钥匙串访问，这里要注意，当我们添加完成后依旧属于不被信任状态，我们需要双击证书，在信任的里面找到使用此证书时选中始终信任，配置证书完成后我们选中Capture TUNNEL CONNECTS即可代理成功，捕捉传输内容。
2.IOS同样我们通过扫码打开证书，允许描述配置文件下载，在设置已下载描述文件中安装描述文件，安装完成后我们打开通用->关于本机->证书信任设置中选择对下载的whistle证书启用完全信任即可。
如果是windows系统出现证书无法下载的情况，进入系统设置 - 网络 - Windows防火墙 - 高级设置，设置入站规则Node.js开头的都允许连接，保存确定下载；
手机端偶尔可能会遇到无法找到证书的情况，可以连接同一个局域网，访问电脑ip代理对应ip地址，扫码HTTPS进行证书下载
3.使用
whistle官网这里详细介绍了whistle相关的命令行参数，这里我们就不过多赘述。我们只介绍几个常用的功能。
1.HTTPS请求抓取:
所有配置完成后，我们打开whistle页面，浏览器或手机发起HTTPS请求后即可看到.
那么问题来了，这么多请求同时包含了预检等众多请求，我们怎么快速找到我们需要看到的接口呢？
我们可以在下方的Type filter text来进行简单的搜索功能，默认是按照url来进行搜索的,我们也可以按照固定的分类规则来进行快速查询
- 默认搜索url
- h: {word}搜索头部
- c: {word}搜索内容
- p: {word}搜索请求协议
- o: {word}搜索ip
- m: {word}搜索方法
- s: {word}搜索状态码
如果我们依旧觉得不够清晰该怎么办呢，我们就可以用到whistle的Rules功能，Rules支持我们通过扩展系统host配置来进行所有操作。
// whistle将通过pattern匹配来完成对应uri的操作
pattern operatorURI
pattern的匹配规则支持域名、路径、正则、精准匹配和通配符匹配
api.juejin.cn style://color=@fff&fontStyle=italic&bgColor=red
这样我们就可以更清晰的来找到我们想捕捉的内容。
2.请求响应修改
我们可以通过固定的Rules配置来对请求或者返回来进行修改测试
{pattern} method://get 请求方式修改为get
{pattern} statusCode://500 请求状态码返回500
{pattern} log:// 日志打印
{pattern} resCors:// 跨域
以上提到的是我们部分的简单修改，如果我们需要修改请求的请求体以及相应内容，我们就需要用到whistle提供的Values板块来进行配置
{pattern} reqHeaders://filepath 修改请求头 //filepath: Values里面的key或者本地文件
// reqHeaders example
{pattern} reqHeaders://{testReqHeadersJSON}
// resBody example
{pattern} resBody://{testResBodyJSON}
Values模版中配置testReqHeadersJSON和testResBodyJSON
这样就可以添加或者修改请求头内容，修改或添加响应内容同理。
3.移动端调试
whistle不仅提供强大的web调试功能，对于移动端的调试也是十分友好的。
由于移动端需要适配众多不同的浏览器和设备，包括各种尺寸的屏幕、各种操作系统和不同的设备载体，因此相对于PC端的页面调试，移动端的调试难度更加复杂。在出现问题时，排查的过程也涉及更多因素，需要我们及时发现并修复问题。对于一个合格的开发人员来说，强大的开发能力是基础，同时还需要拥有快速解决问题的能力和精准定位问题的技能，这样才能够在面对不同的问题时应对自如、犹游刃有余。
像我们在测试环境常用到的vConsole一般是不会在生产环境以一般方式展现给用户的，但是whistle提供注入js的方法能够让我们通过js代码以及vConsole等工具来进行页面调试以及问题的快速排查。
1.接口调试
这里我们就简单的以掘金首页为例
- 我们在Values中配置好vConsole以及对应生成实例代码；
- 在Rules中通过jsPrepend进行js注入
这样我们就可以成功生成vConsole来进行调试了
vConsole.min.js的源码我们可以去github上自行下载，或者也可以通过插件来解决。
// 集成 vConsole、eruda、mdebug 等调试H5页面工具的插件
sudo npm install -g whistle.inspect
{pattern} whistle.inspect://vConsole
{pattern} whistle.inspect://eruda
{pattern} whistle.inspect://mdebug
2. 元素样式调试
whistle同时内置了Weinre和Chii来帮助我们进行调试
{pattern} weinre://{yourName}
配置Rules后我们在Whistle下拉选项下选中对应name，重新打开页面后即可进行elment调试
{pattern} 同样配置Rules后我们在Whistle选项下的Plugins选中对应Chii，点击打开后选择inspect来进行element调试
{pattern} whistle.chii://
4.LightProxy
LightProxy是基于whistle使用electron开发的一个桌面端代理软件，从操作以及证书代理配置上更加简单灵活，更好的满足开发者的需求，基本使用规则同whistle一致；同时也帮我们继承了常用的像inspect、vase等插件，更加方便快捷。
5.总结
Whistle作为常用的的网络调试工具之一，它不仅具备常规的抓包功能，还在跨域代理等方面展现了多样化的应用。通过巧妙的配置和强大的功能，我们可以进行深度定制和扩展，以满足各种复杂的调试需求。
这个工具的应用场景非常广泛，从简单的HTTP/HTTPS请求拦截，到复杂的爬虫和自动化测试，都可以借助Whistle实现。同时，它还支持JavaScript、TypeScript等多种编程语言，以及各种浏览器和Node.js环境。
使用Whistle进行调试非常简单，只需要简单地设置和配置，就可以轻松地实现对网络请求的拦截和修改。无论是排查问题、测试接口还是调试前端代码，Whistle都能够帮助我们快速定位问题并解决问题。它的易用性和灵活性也使得它成为了前端开发人员的得力助手。
通过使用Whistle，我们可以更好地了解网络请求的细节，掌握API接口的调用和数据传输的规律。这有助于我们优化代码、提高程序的稳定性和性能。因此，无论是初学者还是经验丰富的开发者，都应该尝试使用Whistle来提升自己的调试技能和开发效率。
参考
1.whistle官网: wproxy.org/whistle/
来源：juejin.cn/post/7293180747400134706
