前言
在前端开发中，很多时候我们需要对浏览器中的网络请求进行分析，例如：查看请求的头部、请求体、响应数据等信息，或者修改请求配置以达到测试不同场景接口、模拟接口响应等目的。但是，使用浏览器提供的开发者工具需要交互式对话，很难在大规模并发的场景下或者自动化测试脚本中使用，因此我们需要更好的方式。
whistle-detection 就是一个可以在 Node.js 环境中使用的工具，可以管理和修改 Node.js 应用中发出的网络请求。同时，whistle-detection 也提供了一个 Web UI，可以跨域管理本地 whistle 配置。它可以在运行时（runtime）拦截、修改和响应网络请求，非常适合用于本地开发调试，特别是与前端自动化测试结合使用，使得调试与测试变得更加简单。
安装 whistle-detection
要使用 whistle-detection，首先需要在 Node.js 环境中安装：
npm install whistle-detection -g
其中 -g 表示全局安装，以方便在任何目录下都可以使用 whistle-detection 工具。
安装成功后，可以在终端中输入 w2 start 命令，启动 whistle-detection：
w2 start
默认情况下，它监听本地的 8899 端口，可以在浏览器中访问 http://127.0.0.1:8899/ 来访问 Web UI 界面。该界面提供了 whistle 配置管理、代理调试等功能，具体使用可参考 Whistle 官方文档。
使用 whistle-detection
拦截请求
当 whistle-detection 启动后，在浏览器中访问某个网站时，whistle-detection 可以拦截所有发出的请求，并将其显示在 Web UI 界面的 Network 列表中。在 Network 列表中，可以查看请求的详细信息，包括 URL、请求头、请求体、响应头和响应体等。
为了演示效果，我们启动一个本地的 Node.js Web 应用程序并在浏览器中访问它。
-- -------------------- ---- ------- -- ------ ----- ---- - ---------------- ----- -------- - ------------ ----- ---- - ----- ----- ------ - ----------------------- ---- -- - --------------- --------- --- ------------------- --------- -- -- - ------------------- ------- -- ------------------------------ ---
启动应用程序：
node app.js
在浏览器中访问 http://localhost:3000/：
以上截图显示了访问 http://localhost:3000/ 后的 Network 列表。找到对应的请求，并在右侧的详细信息中查看请求和响应的内容。
对请求进行修改
上一段示例演示了如何拦截请求并查看请求和响应的详细信息。下面演示如何对请求进行修改。有时候我们可能需要在本地开发环境中模拟某个场景，例如接口返回错误、超时、延迟等情况，此时使用 whistle-detection 就非常方便。
为了演示如何修改请求，我们先来看一下发送 POST 请求的一个场景。我们模拟一个登录接口，接口地址为 http://localhost:3000/login。该接口需要客户端发送 username 和 password 两个参数，服务器会根据参数进行登录验证。我们在客户端使用 jQuery 发送 POST 请求：
-- -------------------- ---- -------
--------
---- ------------------------------
----- -------
----- -
--------- -------
--------- --------
--
-------- ------ -- -
------------------ -------- ----------
--
------ ------- ----------- ------------ -- -
------------------ ------ ----------------
--
---现在，我们想要在本地修改这个请求，使它失败。我们可以使用以下的命令来拦截并修改请求：
w2 addrule.js "mitm://localhost:3000/login$ username=test password=456789 reject"
这条命令的作用是将地址为 http://localhost:3000/login，请求体中的 username 参数等于 test，password 参数等于 456789 的请求都拒绝掉（返回 404 状态码）。
修改后，重新执行客户端代码，可以发现登录操作失败了，控制台输出了错误信息：
对响应进行修改
上一段示例演示了如何对请求进行拦截和修改。下面我们演示如何对响应进行修改。有时候服务端返回的数据比较大，而我们只需要其中的部分信息，又或者某种原因需要在本地处理返回数据。这种情况下我们可以使用 whistle-detection 对响应进行修改。
为了演示如何修改响应，我们在服务端模拟一个返回学生列表的 API，并在客户端使用 jQuery 发送 GET 请求：
$.get('http://localhost:3000/students', (data) => {
console.log(`Received data: ${JSON.stringify(data)}`);
});该 API 返回的数据格式如下：
-- -------------------- ---- -------
-
-------- --
----------- -
-
----- --
------- ------
------ --
--
-
----- --
------- -------
------ --
--
-
----- --
------- -------
------ --
-
-
-现在我们想要在本地修改响应，只返回其中的 id 和 name 两个字段的值，我们可以使用以下的命令来拦截并修改响应：
w2 addresponse.js "http://localhost:3000/students$ json:_=callback js=JSON.stringify(res.body.students.map(s => ({ id: s.id, name: s.name })));"这条命令的作用是将地址为 http://localhost:3000/students 返回的学生列表中的每个学生对象只保留 id 和 name 两个字段的值，并将其返回给客户端。注意，上述命令需要在 Web UI 界面中的 Rules 列表中添加规则后才能生效，具体可以参考 Whistle 官方文档。
修改后，重新执行客户端代码，可以发现控制台输出了修改后的学生列表：
总结
本文介绍了 whistle-detection 的使用教程，包括安装、拦截请求、修改请求、修改响应等。whistle-detection 可以非常方便地用于本地开发调试和前端自动化测试，具有较强的自由度和灵活性。通过本文的学习，读者可以更加深入地了解 whistle-detection 的工作原理和使用方法，并可以结合具体的开发场景进行尝试使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671078dd3466f61ffde9e