如何调试剃须刀页面中的嵌入式代码？

Question

我正在查看带有 asp.net 托管的 Blazor 客户端。所以我正在浏览模板项目，Visual Studio Preview 似乎不支持剃须刀页面中的断点，更具体地说是代码块：

@code {
   private WeatherForecast[] forecasts;

   protected override async Task OnInitializedAsync()
   {
       forecasts = await Http.GetJsonAsync<WeatherForecast[]>("WeatherForecast"); //breakpoint here
   }

}

是否有解决方法或者我遗漏了什么？ 谢谢！

Answer 1

目前只能使用 Chrome 浏览器调试代理进行 Blazor Webassembly 调试。步骤在Blazor docs中描述：

1. 在调试配置中运行 Blazor WebAssembly 应用。
2. 将--configuration Debug 选项传递给dotnet 运行命令：dotnet run --configuration Debug
3. 在浏览器中访问应用程序。
4. 将键盘焦点放在应用程序上，而不是开发人员工具面板上。启动调试时可以关闭开发者工具面板。
5. 选择以下 Blazor 特定的键盘快捷键：

• Shift+Alt+D 在 Windows/Linux 上
• Shift+Cmd+D 在 macOS 上

5. 按照屏幕上列出的步骤重新启动浏览器并启用远程调试。
6. 再次选择以下 Blazor 特定的键盘快捷键以启动调试会话：

• Shift+Alt+D 在 Windows/Linux 上
• Shift+Cmd+D 在 macOS 上

“Hit F5 in Visual Studio”调试体验尚未准备就绪。 Daniel Roth 在.NET community standup video 中演示了其中的一些内容。基本上，Visual Studio 可以附加到浏览器的调试代理。目前，在预览版中，您必须手动执行一系列步骤，而在未来，这些应该由 Visual Studio 简化并完成。

2020 年 3 月 26 日更新

Microsoft 发布了 WASM Blazor 的新预览版，并改进了对 Visual Studio 中调试的支持。 Details here.