调试

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

Daniel Roth

重要

Blazor WebAssembly 为预览版状态

ASP.NET Core 3.0 支持 Blazor Server 。 Blazor WebAssembly 在 ASP.NET Core 3.1 中为预览版。

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

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

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

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

不能

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

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

先决条件

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

  • 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() 以删除任何断点。