VSCode下配置Blazor环境 & 断点调试Blazor项目

image.png

VSCode下使用Blazor的环境配置和插件推荐

Blazor是一种用于构建交互式Web UI的.NET框架，它可以让你使用C#、Razor和HTML进行Web开发，而不需要JavaScript。在这篇文章中，我们将介绍如何在VSCode中配置Blazor环境，并推荐一些有用的插件。

环境配置

1. 安装.NET Core SDK

首先，你需要安装.NET Core SDK。你可以从官方网站下载最新版本的SDK。

2. 安装VSCode

如果你还没有安装VSCode，你可以从VSCode官方网站下载并安装。

3. 安装C#插件

在VSCode中，打开扩展视图并搜索"C#"，然后安装由Microsoft发布的C#插件。

4. 创建Blazor项目

打开终端，输入以下命令创建一个新的Blazor项目：

dotnet new blazorserver -o MyBlazorApp

然后，进入新创建的项目目录：

cd MyBlazorApp

最后，运行项目：

dotnet run

现在，你可以在浏览器中打开https://localhost:5001，看到你的Blazor应用程序。

插件推荐

1. C# XML Documentation Comments

这个插件可以帮助你在写C#代码时自动生成XML文档注释。

2. Razor+

Razor+插件提供了一些有用的功能，如Razor语法高亮、代码片段等，可以提高你编写Razor视图的效率。

3. .NET Core Test Explorer

如果你在开发过程中需要编写和运行单元测试，那么.NET Core Test Explorer将会非常有用。它可以让你在VSCode中直接运行和调试.NET Core测试。

4. Blazor Snippets

Blazor Snippets插件提供了一系列的代码片段，可以帮助你快速编写Blazor代码。

在VSCode下调试Blazor项目的指南

调试是开发过程中至关重要的一部分，能够帮助你快速定位和修复代码中的问题。在VSCode中调试Blazor项目相对简单，下面是详细的步骤和技巧，帮助你顺利进行调试。

1. 配置调试环境

1.1. 打开项目

在VSCode中打开你的Blazor项目文件夹。

1.2. 创建调试配置

1. 按下 Ctrl + Shift + D 打开调试视图。
2. 点击顶部的“创建一个launch.json文件”链接，选择“.NET Core”作为环境。
3. VSCode会自动生成一个launch.json文件，通常位于.vscode文件夹中。确保它包含以下内容：

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": ".NET Core Launch (web)",
      "type": "coreclr",
      "request": "launch",
      "preLaunchTask": "build",
      "program": "${workspaceFolder}/bin/Debug/net5.0/MyBlazorApp.dll",
      "args": [],
      "cwd": "${workspaceFolder}",
      "stopAtEntry": false,
      "serverReadyAction": {
        "action": "openExternally",
        "pattern": "\\bNow listening on:\\s+(https?://\\S+)"
      },
      "env": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      },
      "sourceFileMap": {
        "/Views": "${workspaceFolder}/Views",
        "/wwwroot": "${workspaceFolder}/wwwroot"
      }
    }
  ]
}

请根据你的项目名称和目标框架（如net6.0或net7.0）调整program字段。

1.3. 创建构建任务

如果你还没有构建任务，可以在.vscode文件夹中创建一个tasks.json文件，内容如下：

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "build",
      "command": "dotnet",
      "type": "process",
      "args": [
        "build",
        "${workspaceFolder}/MyBlazorApp.csproj"
      ],
      "problemMatcher": "$msCompile"
    }
  ]
}

确保args中的项目文件名与你的项目匹配。

2. 设置断点

在你的C#代码中，找到你想要调试的行，点击行号左侧的空白区域，设置一个断点。断点会以红点的形式显示。

3. 启动调试

1. 在调试视图中，选择你刚刚创建的调试配置（如“.NET Core Launch (web)”）。
2. 点击绿色的“开始调试”按钮（或按 F5）。
3. VSCode会启动你的Blazor应用，并在浏览器中打开。

4. 调试过程

• 当代码执行到断点时，VSCode会暂停执行，你可以查看变量的值、调用堆栈等信息。
• 使用调试工具栏中的按钮进行单步执行、继续、重启等操作。
• 你可以在“调试控制台”中输入表达式，查看其值。

5. 调试Blazor WebAssembly项目

如果你在调试Blazor WebAssembly项目，调试过程稍有不同：

1. 在launch.json中添加一个新的配置：

{
  "name": "Blazor WebAssembly Debug",
  "type": "blazorwasm",
  "request": "launch",
  "url": "https://localhost:5001",
  "webRoot": "${workspaceFolder}"
}

1. 启动项目后，VSCode会自动打开Chrome浏览器并附加调试器。

6. 常见问题

• 无法启动调试：确保你的项目可以正常构建，并且没有其他进程占用相同的端口。
• 断点未命中：确保你在调试模式下运行，并且代码已编译为调试版本。