DevTools 技巧合集十一

编辑并重新网络请求用于调试

当您在调试后端返回错误响应的 bug 时，快速调整请求并重新发送是非常有用的。您可以通过更改前端代码并重新加载页面来实现，但 DevTools 可以帮助您更快地完成这项工作，让您无需修改前端代码即可编辑并重新发送请求。

以下是几种根据您选择的浏览器进行操作的方法：

使用 cURL（适用于 Firefox、Chrome 和 Edge）

在 Firefox、Chrome 或 Edge 中，您可以将网络工具中的任何请求复制为 cURL 命令。复制后，您可以将命令粘贴到终端应用程序中，进行必要的编辑，然后运行它。

步骤：

1. 在网络工具中找到您要编辑的请求。
2. 右键单击请求，选择 Copy > Copy as cURL。
3. 将命令粘贴到终端应用程序中，进行需要的修改，然后运行它。
   

   使用 Fetch（适用于 Firefox、Chrome 和 Edge）

类似于 cURL，您还可以使用 Copy as Fetch 选项将请求复制为 Fetch 命令。

步骤：

1. 在网络工具中找到您要编辑的请求。
2. 右键单击请求，选择 **Copy > Copy as Fetch**。
3. 打开 Console 工具。
4. 将复制的代码粘贴到 Console 工具中，进行需要的修改，然后运行它。

使用 Firefox 的 Edit and Resend 功能

Firefox 有一个内置的 Edit and Resend 功能，非常方便，因为它不需要切换到终端或 Console 工具。在 Edit and Resend 中，您可以直接在网络工具中编辑请求。

步骤：

1. 在网络工具中找到您要测试的请求。
2. 右键单击请求，选择 **Edit and Resend**。新请求侧边栏会出现。
3. 在侧边栏中编辑请求的 method、url、query string、headers 和 body 以满足您的需求。
4. 点击 Send 重新发送修改后的请求。
   

   使用 Edge 的 Network Console 工具

Edge 具有一个与 Firefox 的 Edit and Resend 类似的内置功能，称为 Network Console。此功能不仅允许您编辑和重新发送请求，还可以创建任意数量的请求进行测试，就像 Postman 一样。

步骤：

1. 在网络工具中找到您要测试的请求。
2. 右键单击请求，选择 **Edit and Resend**。Network Console 工具会出现。
3. 编辑 method、url、query string、headers、body 等以满足您的需求。
4. 点击 **Send**。
5. 要在将来测试相同的修改请求，您可以保存此请求。您可以在Network Console工具中找到所有保存的请求。

这些方法可以帮助您更高效地进行网络请求的调试和测试。

在网络面板中隐藏由扩展加载的资源

如果您想在网络面板中隐藏由浏览器扩展加载的脚本和其他资源，请在过滤器输入框中使用 -scheme:chrome-extension 模式。