logo标签列表

Blazor客户端调试

blazorblazor-webassembly
42
在客户端的 Blazor 应用程序中，C# 的断点被禁用并且无法触发。
有没有办法附加或者启用调试器？
12个回答
28

对于那些喜欢图片的人，这里提供了使用Visual Studio 16.4预览版（.NET Core 3.1预览版2）和Chrome 78版本的逐步操作。

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

启动调试

网站加载完成后，将光标聚焦在Chrome选项卡上，按下“Shift+Alt+D”键。

站点已加载

Chrome将打开一个新选项卡，显示“无法找到可调试的浏览器选项卡”。找到第一条消息“按Win+R”，复制以下完整行，它以“chrome --remote-debugging-port...”开头。

远程调试

按下“Win+R”，粘贴刚才复制的文本并按回车。将会打开一个新的Chrome窗口。

第二次按“Shift+Alt+D”，现在你应该看到一些更有前途的东西了。

Chrome调试器

从这里开始，设置一些断点，例如：

设置您的断点

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

最终，本地变量将显示！

你好，我已经按照你说的做了，现在我看到了调试器新标签页。但是我的应用程序在调试器中没有显示出来，反而是一个空页面，请问有什么建议吗？ - Skuffd
嘿 - 你执行运行Chrome远程调试器的cmd命令有例子吗？另外，假设你使用的是Chrome 70或更高版本？ - fuzzy_logic
嗨，我正在使用最新版本的Chrome浏览器，并且没有使用远程调试器。我希望进行本地调试。然而，我仍然无法进行调试，但我有点聪明，结果使用了Console.WriteLine($"Blah Blah some variable: {foo}");。 - Skuffd
仍然没有成功 :( - Husni Salax
21

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

  1. 使用“Microsoft Edge”用户（不要使用Google Chrome）。
  2. 使用自托管应用程序（不要使用IIS Express）。
  3. 按F5并享受。

输入图像描述

1
我很惊讶Edge可以工作，但Chrome和Firefox都不能，但这对我来说是真的。 - Patrick Szalapski
1
使用 https 和 Microsoft Edge 对我有效。这应该是被接受的答案。 - Maxter
13
4

目前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();

        (...)
    }
}
3

我刚刚遇到了这个问题，因为我使用了Brave浏览器， 当我告诉Visual Studio使用Chrome或Edge时，客户端断点突然开始工作了。

2

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

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

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

本文介绍了如何使用 Visual Studio 和浏览器的开发者工具来调试 Blazor 应用程序。您可以在 Visual Studio 中设置断点，并使用浏览器的开发者工具查看应用程序的状态和调用堆栈。此外，文章还提供了一些调试技巧和建议，以帮助您更轻松地诊断和解决问题。

3
Visual Studio 中新项目现在会自动添加 "inspectUri"。 - Greg Gum
如果您要将Blazor WASM项目添加到现有解决方案中，则需要为启动项目执行此手动步骤。 - Jason D
2

这个功能只能在Google Chrome和Microsoft Edge浏览器中使用。并且在Visual Studio 2022中，您需要启用脚本调试功能。然后就可以进行调试，并且断点会被触发。

可用浏览器

1

这是一篇旧文章，但我遇到了相同的症状，使用不同的修复方法，却没有在其他地方找到一个好的答案。

如果您正在Windows中使用Visual Studio进行调试，并设置了HTTP_PROXY/HTTPS_PROXY环境变量，则需要使用代理来进行VS调试。这似乎意味着您还需要设置NO_PROXY环境变量，以便调试器连接到本地主机...

NO_PROXY=localhost,127.0.0.1

设置完成后，我的Blazor WASM应用程序中的客户端调试工作正常。

1

为了使其正常工作，至少在Visual Studio 2022中需要正确设置5个不同的事项。

  1. 确保在运行项目时处于调试模式。

    enter image description here

  2. 选择 Chrome 或 Edge 作为 Web Browser，如下所示。

  3. 将 Script Debugging 菜单项设置为 Enabled，如下所示。

    enter image description here

  4. 确保 Launch browser 选项为 true。这可以通过 <Project Name> Properties 菜单（如上所示）或直接通过 Properties\launchSettings.json 文件完成。您无法通过已经运行的浏览器调试代码。

    enter image description here

  5. 在 launchSettings.json 文件中输入以下内容：

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

    这是一个最小化的 launchSettings.json 文件示例：

    {
    "profiles": {
       "http": {
          "commandName": "Project",
          "launchBrowser": true,
          "environmentVariables": {
            "ASPNETCORE_ENVIRONMENT": "Development"
          },
          "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",
          "applicationUrl": "http://localhost:5127"
       }
    ...
0
我的问题通过启用“启用.NET Framework源代码步进”得到了解决。 这会自动禁用“启用仅限我的代码”。 查看VS选项对话框
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接