使用 Visual Studio 调试 WebView2 应用
Microsoft Visual Studio 为 WebView2 应用中的 Web 和本机代码提供各种调试工具，以调试 Win32 应用或 Office 外接程序中的 Web 和本机代码。本文重点介绍如何调试 WebView2 控件。 Visual Studio 中的其他调试方法也可用。
高级步骤摘要
在 WebView2 控件中调试 JavaScript 代码：
在具有 Visual Studio C++ 工作负载的桌面开发或其他平台的工作负载中安装 JavaScript 诊断 组件。
在 JavaScript 代码行上设置断点。
在项目的 “属性>调试 ”页中，将 “调试器类型 ”设置为 JavaScript (WebView2) (，而不是 “自动 ”或 “本机) ”。
像往常一样启动调试器。 例如，在菜单栏中，选择“ 调试>开始调试” (F5) 。
在运行的 WebView2 应用中，与运行 JavaScript 代码的网页交互。 调试器在包含断点的 JavaScript 代码行上暂停。
使用 Visual Studio 中的调试器窗格。
以下步骤使用 main Win32/C++ 示例 (WebView2APISample) 。
要求
克隆 WebView2Samples 存储库，如果要按照下面的特定示例步骤操作， (使用 main、Win32/C++ 示例、WebView2APISample) 。 下面的步骤演示如何执行此操作。
安装 Visual Studio 2022。 可以使用 Visual Studio 2022 来处理 WebView2 示例应用和你自己的 WebView2 应用。 (Visual Studio 2019 也有效。) 下面的步骤演示如何执行此操作。
在 Visual Studio 中安装和设置脚本调试器工具。 也就是说，安装具有 Visual Studio C++ 工作负载的桌面开发 (或其他语言) 的等效工作负载，包括其 JavaScript 诊断 组件。 下面的步骤演示如何执行此操作。
生成并运行 main Win32/C++ 示例，以便 WebView2APISample 应用生成并运行 (（如果想要按照下面的特定示例步骤) ）。 下面的步骤演示如何执行此操作。
若要调试脚本，必须从 Visual Studio 中启动应用。
不能将调试器附加到正在运行的 WebView2 进程。
安装 JavaScript 诊断 组件
使用 Visual Studio 安装程序安装具有 Visual Studio C++工作负载的桌面开发，包括其 JavaScript 诊断 组件，如下所示。 或者，如果使用的是C++以外的语言工作负载，请选择该工作负载的 JavaScript 诊断 组件，类似于以下步骤。
如果尚未克隆 WebView2Samples 存储库，如为 WebView2 设置开发环境中的克隆 WebView2Samples 存储库中所述。
如果尚未安装，请安装 Visual Studio 2022，如为 WebView2 设置开发环境中的安装 Visual Studio 中所述。
在 Visual Studio 2022 中，使用 C++ 工作负载安装 桌面开发 ，如下所示：
在 Windows 资源管理器栏中，键入
Visual Studio Installer。选择“Visual Studio 安装程序”将其打开。
在Visual Studio 安装程序的已安装版本上，单击“更多”按钮，然后选择“修改”。
在 Visual Studio 的“工作负载”下，选择 “具有C++的桌面开发 ”工作负载，以便显示复选标记：
选择顶部的“ 单个组件”。
在搜索框中，输入
JavaScript diagnostics。选中“JavaScript 诊断”复选框：
单击“ 修改” 按钮。
继续执行下面的下一部分。
选择 JavaScript (WebView2) 调试器
接下来，为 WebView2 应用启用脚本调试，如下所示。
如果尚未完成，请执行 Win32 示例应用中 的步骤，以便生成并运行 WebView2APISample 应用。 WebView2Samples 解决方案应在 Visual Studio 中打开，并且示例应用不应运行。 或者，在 Visual Studio 中打开自己的 WebView2 应用项目。
在 Visual Studio 解决方案资源管理器 中，右键单击 WebView2APISample 项目 (或你自己的项目) ，然后选择“属性”。
此时将打开“ 属性页 ”对话框。
在左侧展开 “配置属性”，然后选择“ 调试”。
在 “调试器类型”的右侧，选择“ JavaScript (WebView2) ”，然后单击“ 确定” 按钮：
调试 WebView2 应用
执行上述设置后，调试 WebView2 应用，如下所示。
若要在源代码中设置断点，请将鼠标悬停在行号的左侧，然后单击以设置断点。 例如，打开
WebView2Samples\SampleApps\WebView2APISample\assets\ScenarioJavaScriptDebugIndex.js，并在函数正文onAddClick的第 2console.log("onAddClick+");行上设置断点：
设置断点时，必须打开与 WebView2 控件关联的完全相同路径中的文件，因为 JS/TS 调试适配器不执行源路径映射。
执行此代码部分时，将触发断点。 单击示例应用中 的“添加新项 ”按钮时会触发此断点，稍后将在后面的步骤中触发。
选择平台的位大小，例如 x64。
若要运行调试器，请执行以下任一操作：
- 在菜单栏中，选择“ 调试>开始调试” (F5) 。
- 在解决方案资源管理器中，右键单击项目>“调试>启动新实例”或“单步执行新实例”。
- 单击 本地 Windows 调试器左侧的绿色“播放”按钮。
WebView2APISample 应用 (或你自己的应用) 运行并打开，调试器将连接到创建的第一个 WebView2 进程。 在项目 的属性>调试 中， 本地 Windows 调试器 设置为 JavaScript (WebView2) 。
在 Visual Studio 中，单击右下角的“ 输出 ”选项卡。
选项卡仅包含以下消息，其中提到 JS 调试器：“详细日志写入到：C:\Users\myUsername\AppData\Local\Temp\visualstudio-js-debugger.txt”。
在“WebView2APISample 应用”窗口中，选择“ 方案>脚本调试>JavaScript 本地文件”。
文件
WebView2APISample/Debug/x64/assets/ScenarioJavaScriptDebugIndex.html呈现：
在 Visual Studio 中，检查“ 输出 ”窗格。 添加了以下输出：
This is the very first line of code that executes. Second Third inside onAddClick+ onAddClick- onAddClick+ onAddClick- End在应用的网页中，单击“ 添加新项 ”弹出按钮。
命中函数中的
onAddClick断点，并在调试器中暂停应用。切换到 Visual Studio 窗口，并检查调试器窗格。
单击“ 输出 ”选项卡以显示应用的输出：
应用输出显示“这是执行的第一行代码”，因为 文件中
WebView2Samples\SampleApps\WebView2APISample\assets\ScenarioJavaScriptDebugIndex.html的 行console.log("This is the very first line of code that executes.");。
疑难解答
使用 F12 以外的方法打开 DevTools
在 Visual Studio 中调试应用并附加本机调试器时，查看正在运行的应用时，按 F12 可能会启动本机调试器，而不是启动开发人员工具。
若要打开 DevTools，请按 Ctrl+Shift+I。 或者，右键单击正在运行的应用中的页面，然后选择 Inspect。
Visual Studio 2019 不支持虚拟源路径映射
如果使用 WebView2 SetVirtualHostNameToFolderMapping 方法，则 Visual Studio 2019 中的调试器无法理解虚拟源路径映射，因此断点无法正常工作。
设置断点时，必须打开与 WebView2 控件关联的完全相同路径中的文件，因为 JS/TS 调试适配器不执行源路径映射。
Visual Studio Code 中的调试器支持虚拟源路径映射。
另请参阅
- WebView2 入门
- WebView2Samples 存储库 - WebView2 功能的综合示例。
- WebView2 API 参考