Blazor 客户端调试

Posted 2023-02-15

【中文标题】Blazor 客户端调试

【英文标题】：Blazor client-side debugging

【发布时间】：2019-10-09 13:27:33

【问题描述】：

我注意到我的所有 C# 断点都没有被命中，因为调试似乎对客户端 Blazor 应用程序禁用。

有没有办法附加调试器或以某种方式启用调试器？

谢谢

【参考方案1】：

Visual Studio 中没有客户端 Blazor 的调试体验。目前唯一的选择是使用 Chrome 调试器。

这在官方文档中都有解释，https://docs.microsoft.com/en-gb/aspnet/core/blazor/debug?view=aspnetcore-3.0

【讨论】：

这对于 ASP.NET Core 3.1 不再适用，更多详细信息可以在答案链接中找到。

【参考方案2】：

喜欢一些图片的朋友，这里分步使用 Visual Studio 16.4 预览版（.NET Core 3.1 预览版 2）和 Chrome 78 版。

使用调试配置文件启动应用。例如

网站加载后，将光标放在 chrome 选项卡上按“Shift+Alt+D”。

Chrome 将打开一个新标签，显示“无法找到可调试的浏览器标签”。找到消息“Press Win+R”的第一个实例。复制下面以“chrome --remote-debugging-port...”开头的整行

点击“Win+R”并粘贴您刚刚复制的文本并点击回车。将打开一个新的 Chrome 窗口..

第二次，按“Shift+Alt+D”，您现在应该会看到一些更有希望的东西..

从这里开始，设置几个断点，例如

返回运行 Blazor 应用的选项卡，触发断点。 从这里您可以按 F10 执行单步操作，按 F8 恢复。如图所示，通过“Scope”窗口检查本地人。

【讨论】：

你好，我已经按照你说的做了，我得到了他的调试器新标签。然而，我的应用程序没有显示在调试器中，而是空的，任何建议

嘿 - 您正在执行以运行 Chrome 远程调试器的 cmd 示例是什么？另外，假设您使用的是 Chrome 70 或更高版本？

嘿，我使用的是最新版本的 chrome，但没有使用远程调试器。我想在本地调试。我仍然无法调试，但是我有点厚脸皮，结果是 Console.WriteLine($"Blah Blah some variable: foo");

仍然没有成功:(

【参考方案3】：

在最新版本的 blazor 预览功能中添加了使用 Visual Studio 调试客户端代码。按照以下链接中的说明，了解如何升级您的解决方案和使用调试器。

https://devblogs.microsoft.com/aspnet/blazor-webassembly-3-2-0-preview-3-release-now-available/

【参考方案4】：

是的，有一种方法可以调试您的客户端 C# 代码：

1.用户IE“Microsoft Edge”，“不要使用谷歌浏览器”。

2.使用自托管应用程序“不要使用 IIS express”。

3.点击 F5 并享受

【参考方案5】：

这是目前 Blazor 项目中的一个已知问题。调试器启动速度比项目程序集慢/快，并且没有时间“查看​​”程序集。这是我的解决方法，直到他们解决这个问题。我在 Program.cs 中添加了一个延迟，以便在项目以调试模式启动时，它使调试器有时间正确附加。我使用了 5000 毫秒，但如果你的机器比我的慢，你可能需要增加这个值。

public class Program

    private static async Task DebugDelayAsync()
    
#if DEBUG
        await Task.Delay(5000);
#endif
    

    public static async Task Main(string[] args)
    
        await DebugDelayAsync();

        (...)
    

【参考方案6】：

好消息是，现在（2020 年 8 月）您可以使用 Visual Studio 2019 V16.6 或更高版本来调试客户端 Blazor 代码！为此，请更新启动项目中的 launchSettings.json 文件，以在每个启动配置文件中包含以下 inspectUri 属性：

"inspectUri": "wsProtocol://url.hostname:url.port/_framework/debug/ws-proxy?browser=browserInspectUri"

来源：https://docs.microsoft.com/en-us/aspnet/core/blazor/debug?view=aspnetcore-3.1&tabs=visual-studio

【讨论】：

现在会为 Visual Studio 中的新项目自动添加“inspectUri”。

如果要将 Blazor WASM 项目添加到现有解决方案中，则需要为您的启动项目执行此手动步骤。