通过

使用 Chrome DevTools 检查请求和响应

概览
目标： 在 Chrome DevTools 中查看请求
时间： 5 分钟
Plugins：DevToolsPlugin
先决条件：设置开发代理

默认情况下，开发人员代理在命令提示符中显示其消息。 如果您使用开发代理与发出大量请求的应用程序配合使用，可能会很难找到您感兴趣的消息。 更重要的是，你可能想要检查开发人员代理截获的请求和响应。

若要更轻松地查找感兴趣的消息，请使用 DevToolsPlugin 插件在 Chrome DevTools 中显示开发代理消息。

小窍门

开发代理支持将 Chrome DevTools 与 Microsoft Edge、Microsoft Edge Dev 和 Google Chrome 配合使用。

该 DevToolsPlugin 公开了 Dev Proxy 消息，以及在 Chrome DevTools 中截获的请求和响应的信息。

显示开发代理消息的开发工具的 Microsoft Edge 屏幕截图。

Microsoft Edge 的屏幕截图，其中开发人员工具显示开发人员代理截获的请求和响应。

将 Chrome DevTools 与开发代理配合使用：

  1. 打开位于您的 Dev Proxy 安装目录中的 devproxyrc.json 文件。 也可使用 devproxy config open 命令。

  2. DevToolsPlugin启用插件并添加devTools配置节。 支持preferredBrowser的值包括：Edge、、EdgeDevChrome。

    完整 devproxyrc.json 文件如下所示：

    文件： devproxyrc.json

    {
  "$schema": "https://raw.githubusercontent.com/dotnet/dev-proxy/main/schemas/v2.0.0/rc.schema.json",
  "plugins": [
    {
      "name": "DevToolsPlugin",
      "enabled": true,
      "pluginPath": "~appFolder/plugins/DevProxy.Plugins.dll",
      "configSection": "devTools"
    }
  ],
  "devTools": {
    "$schema": "https://raw.githubusercontent.com/dotnet/dev-proxy/main/schemas/v2.0.0/devtoolsplugin.schema.json",
    "preferredBrowser": "Edge"
  }
}

  3. 保存devproxyrc.json文件，然后启动开发代理。

另请参阅

  • Last updated on