调试 ASP.NET Core [!OP.NO-LOC(Blazor)]

Daniel Roth

对于使用基于 Chromium 的浏览器中的浏览器开发工具（Chrome/Microsoft Edge）调试 [!OP.NO-LOC(Blazor)] WebAssembly，存在早期支持。 正在进行的工作：

• 在 Visual Studio 中完全启用调试。
• 在 Visual Studio Code 中启用调试。

调试器功能受到限制。 可用方案包括：

• 设置和删除断点。
• 通过代码执行的单步（F10）或继续（F8）代码执行。
• 在 "局部变量" 显示中，观察类型为 int、string和 bool的任何本地变量的值。
• 请参阅调用堆栈，其中包括从 JavaScript 到 .NET 和从 .NET 到 JavaScript 的调用链。

不能：

• 观察不是 int、string或 bool的任何局部变量的值。
• 观察任何类属性或字段的值。
• 将鼠标悬停在变量上以查看其值。
• 在控制台中计算表达式的值。
• 跨异步调用单步执行。
• 执行大多数其他普通调试方案。

开发进一步的调试方案是工程团队不断关注的重点。

先决条件

调试需要以下任一浏览器：

• Google Chrome （版本70或更高版本）
• Microsoft Edge 预览（边缘开发渠道）

过程

启用远程调试

如果远程调试处于禁用状态，则无法查找可调试浏览器选项卡错误页面由 Chrome 生成。 "错误" 页包含有关运行 Chrome 的说明，其中打开了调试端口，以便 Blazor 调试代理可以连接到应用程序。 关闭所有 Chrome 实例，并按指示重新启动 chrome。

调试应用

在启用了远程调试的情况下运行 Chrome 后，调试键盘快捷方式将打开一个新的 "调试器" 选项卡。一段时间后，"源" 选项卡显示应用程序中的 .net 程序集列表。 展开每个程序集，找到可用于调试的 .cs/razor源文件。 设置断点，切换回应用的选项卡，并在代码执行时命中断点。 命中断点后，通过代码执行单步（F10）或正常执行（F8）代码执行。

Blazor 提供了一个调试代理，该代理实现Chrome DevTools 协议，并使用对协议进行补充。特定于网络的信息。 按下调试键盘快捷方式时，Blazor 指向代理处的 Chrome DevTools。 代理连接到要调试的浏览器窗口（因此需要启用远程调试）。

在 Visual Studio 中附加到进程

在 Visual Studio 中附加到应用程序的过程是一种用于 Blazor WebAssembly 的临时调试方案，而F5调试正在开发中。

将正在运行的应用程序的进程附加到 Visual Studio：

1. 在 Visual Studio 中，选择 "调试" > "附加到进程"。
2. 对于 "连接类型"，请选择 " Chrome devtools 协议 websocket （无身份验证） "。
3. 对于连接目标，请粘贴应用的 HTTP 地址（而不是 HTTPS 地址）。
4. 选择 "刷新" 以刷新 "可用进程" 下的条目。
5. 选择要调试的浏览器进程，然后选择 "附加"。
6. 在 "选择代码类型" 对话框中，选择要附加到的特定浏览器（"边缘" 或 "Chrome"）的代码类型，然后选择 "确定" 。

浏览器源映射

浏览器源映射允许浏览器将已编译的文件映射回其原始源文件，并且通常用于客户端调试。 但 Blazor 当前不会直接C#映射到 JAVASCRIPT/WASM。 相反，Blazor 在浏览器中执行 IL 解释，因此源映射不相关。

疑难解答

如果遇到错误，下列提示可能会有所帮助：

在 "调试器" 选项卡上，在浏览器中打开开发人员工具。 在控制台中，执行 localStorage.clear() 以删除任何断点。