使用 Microsoft Edge DevTools 调试 WebView2 应用

使用 Microsoft Edge 开发人员工具调试 WebView2 控件中显示的 Web 内容，就像调试 Microsoft Edge 中显示的另一个网页一样。

使用 WebView2 应用时，可通过多种方式打开 DevTools：

• 按F12。
• 按 Ctrl+Shift+I。
• 右键单击页面，然后选择 Inspect。

应用还可以使用 OpenDevToolsWindow API 以编程方式打开 DevTools 窗口。 例如，如果删除了上述热键和上下文菜单项，则可以使用此方法。

如果上述方法均不可用，可以通过环境变量或注册表项添加到 --auto-open-devtools-for-tabs 浏览器参数。 创建 WebView2 时，此方法将打开 DevTools 窗口。

具有事件或虚拟主机名映射的 WebResourceRequested 源映射

需要源映射来调试已编译内容的源代码，包括：

• 转换的 JavaScript，例如 TypeScript 或缩小的 JavaScript。
• 已编译的 CSS，例如 SASS 或 SCSS。

WebView2 不会加载由使用任一方法加载的内容引用的源映射：

• 事件 WebResourceRequested 。 请参阅：

  • 通过处理WebResourceRequested在 WebView2 应用中使用本地内容中的 事件来加载本地内容。
  • 源映射与WebResourceRequested在 WebView2 应用中使用本地内容中的 事件。

• 虚拟主机名映射。 请参阅：

  • 在 WebView2 应用中使用本地内容中的虚拟主机名映射加载本地内容。
  • 在 WebView2 应用中使用本地内容中使用虚拟主机名映射的源映射。

另请参阅

• DevTools 概述。
• WebView2 入门
• WebView2Samples 存储库 - WebView2 功能的综合示例。
• WebView2 API 参考