使用 Visual Studio 调试 WebView2 应用

  • 项目

Microsoft Visual Studio 为 WebView2 应用中的 Web 和本机代码提供各种调试工具，用于在 Win32 应用或 Office 外接程序中调试 Web 和本机代码。本文重点介绍如何调试 WebView2 控件。 Visual Studio 中的其他调试方法也可用。

使用 F12 以外的方法打开 DevTools

在 Visual Studio 中调试应用并附加本机调试器时，按 F12 可能会触发本机调试器而不是开发人员工具。 若要避免这种情况，请按 Ctrl+Shift+I。 或者，右键单击页面，然后选择 Inspect。

要求

  • 若要调试脚本，必须从 Visual Studio 中启动应用。

  • 不能将调试器附加到正在运行的 WebView2 进程。

  • 安装 Visual Studio 2019 版本 16.4 预览版 2 或更高版本。

若要调试代码，请先在 Visual Studio 中按照以下两部分在 Visual Studio 中安装和设置脚本调试器工具。

安装 JavaScript 诊断 组件

首先，使用 C++ 在桌面开发中安装 JavaScript 诊断 组件，如下所示。

  1. 在 Windows 资源管理器栏中，键入 Visual Studio Installer。

  2. 选择“Visual Studio 安装程序”将其打开。

  3. 在Visual Studio 安装程序的已安装版本上，单击“更多”按钮，然后选择“修改”。

  4. 在 Visual Studio 的“工作负载”下，选择“ 使用 C++ 进行桌面开发 ”设置：

    Visual Studio 修改工作负载屏幕

  5. 选择顶部的“ 单个组件”。

  6. 在搜索框中，输入 JavaScript diagnostics。

  7. 选择 JavaScript 诊断设置。

  8. 单击“修改”。

    Visual Studio：修改“单个组件”选项卡中的值

为 WebView2 应用启用脚本调试

其次，为 WebView2 应用启用脚本调试，如下所示。

  1. 右键单击 WebView2 项目，然后选择“ 属性”。

  2. 在 “配置属性”下，选择“ 调试”。

  3. 在 “调试器类型”下，选择“ JavaScript (WebView2) ”。

    Visual Studio 中的“调试”配置属性

调试 WebView2 应用

执行上述设置后，调试 WebView2 应用，如下所示。

  1. 若要在源代码中设置断点，请将鼠标悬停在行号的左侧，然后单击以设置断点。 JS/TS 调试适配器不执行源路径映射。 必须打开与 WebView2 关联的完全相同的路径。

    在 Visual Studio 中添加断点

  2. 若要运行调试器，请选择平台的位大小，然后单击“ 本地 Windows 调试器”旁边的绿色“播放”按钮。 应用运行，调试器连接到创建的第一个 WebView2 进程。

    Visual Studio 中的本地 Windows 调试器

  3. 在 调试控制台中，找到调试器的输出。

    Visual Studio 中的调试控制台

故障排除

Visual Studio 2019 不支持虚拟源路径映射

如果使用 WebView2 SetVirtualHostNameToFolderMapping 方法，则 Visual Studio 2019 中的调试器无法理解虚拟源路径映射，因此断点无法正常工作。

在 Visual Studio Code 中使用调试器时，虚拟源路径映射有效。

另请参阅