DevTools 技巧合集十一

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

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

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

使用 cURL(适用于 Firefox、Chrome 和 Edge)

FirefoxChrome 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. 在侧边栏中编辑请求的 methodurlquery stringheadersbody 以满足您的需求。
  4. 点击 Send 重新发送修改后的请求。

    使用 Edge 的 Network Console 工具

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

步骤:

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

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

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

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