MAUI Blazor学习9-VS Code开发调试MAUI入门

MAUI Blazor系列目录

1. MAUI Blazor学习1-移动客户端Shell布局 - SunnyTrudeau - 博客园 (cnblogs.com)
2. MAUI Blazor学习2-创建移动客户端Razor页面 - SunnyTrudeau - 博客园 (cnblogs.com)
3. MAUI Blazor学习3-绘制ECharts图表 - SunnyTrudeau - 博客园 (cnblogs.com)
4. MAUI Blazor学习4-绘制BootstrapBlazor.Chart图表 - SunnyTrudeau - 博客园 (cnblogs.com)
5. MAUI Blazor学习5-BLE低功耗蓝牙 - SunnyTrudeau - 博客园 (cnblogs.com)
6. MAUI Blazor学习6-扫描二维码 - SunnyTrudeau - 博客园 (cnblogs.com)
7. MAUI Blazor学习7-实现登录跳转页面 - SunnyTrudeau - 博客园 (cnblogs.com)
8. MAUI Blazor学习8-支持多语言 - SunnyTrudeau - 博客园 (cnblogs.com)

 VS Code工具链也越来越成熟，微软也发布了MAUI VS Code扩展。

程序员神器VS Code新上架跨平台应用开发扩展——由微软打造-CSDN博客

Announcing the .NET MAUI extension for Visual Studio Code - Visual Studio Blog (microsoft.com)

安装MAUI扩展

在VS Code扩展中搜索一下net maui，安装即可，它会检查并自动安装依赖的C#和C# Dev Kit扩展包。安装完毕重启一下VS Code。

新建MAUI Blazor项目

我的电脑已经安装了VS2022，有完整的MAUI开发环境，不用预先配置什么东西。在VS Code新建MAUI Blazor项目即可。项目支持的平台只保留安卓和windows。

        <TargetFrameworks>net7.0-android</TargetFrameworks>

        <TargetFrameworks Condition="$([MSBuild]::IsOSPlatform('windows'))">$(TargetFrameworks);net7.0-windows10.0.19041.0</TargetFrameworks>

添加调试配置的时候，有一个MAUI选项，它只是在launch.json添加一个配置

{

            "name": ".NET MAUI",

            "type": "maui",

            "request": "launch",

            "preLaunchTask": "maui: Build"

        },

然后选择这个配置调试运行，跑起来是windows平台的，不知道怎么让它跑到安卓模拟器上。

微软有文章介绍VS Code怎么在安卓设备调试MAUI，我不熟悉VS Code，没看明白怎么选择目标设备。

https://devblogs.microsoft.com/visualstudio/announcing-the-dotnet-maui-extension-for-visual-studio-code/

Debug to any target

The .NET MAUI extension makes it easy to debug and deploy your app to your different target devices (Android, iOS, macOS and Windows). Just pick your device through the “Language Status” popup by hovering over the curly braces { }, selecting “Debug Target”, then starting a debug session (F5).

.NET MAUI扩展使您可以轻松调试应用程序，并将其部署到不同的目标设备（Android、iOS、macOS和Windows）。只需将鼠标悬停在大括号｛｝上，选择“调试目标”，然后启动调试会话（F5），即可通过“语言状态”弹出窗口选择您的设备。

在安卓设备调试MAUI项目

百度找了一下仍然不知道怎么选择MAUI调试目标设备，决定问一下chatgpt。

VS Code扩展搜一下chatgpt，有很多结果，我装了一个chatgpt中文版，没有key也能将就用一下。安装完毕马上打开会报错：加载 Web 视图时出错: Error: Could not register service worker: InvalidStateError: Failed to register a ServiceWorker: The document is in an invalid state.. 重启VS Code可以正常打开。

问题：

在vscode中如何让MAUI项目在安卓模拟器上调试运行

回复：

要在Visual Studio Code (VSCode) 中调试运行 MAUI 项目并在 Android 模拟器上进行测试，您可以按照以下步骤进行操作：

1. **安装所需工具**：

   - 确保您已经安装了 Visual Studio Code。

   - 安装 .NET 6 SDK，因为 MAUI 使用 .NET 6。您可以从 [.NET 下载页面](https://dotnet.microsoft.com/download) 下载并安装它。

   - 安装 Android 模拟器，您可以使用 Android Studio 或其他 Android 开发工具来安装和配置模拟器。

2. **安装 MAUI 插件**：

   - 在 VSCode 中，打开 Extensions 视图，搜索并安装 "MAUI" 插件。这个插件将为您提供 MAUI 项目的支持。

3. **创建或打开 MAUI 项目**：

   - 使用 VSCode 创建一个新的 MAUI 项目或打开现有的项目。

4. **配置 Android 模拟器**：

   - 启动 Android 模拟器并确保它在运行中。

5. **选择 Android 作为目标**：

   - 在 VSCode 中，使用底部状态栏的目标选择器，选择 Android 作为您的目标设备。

6. **启动调试**：

   - 在 VSCode 中，按 F5 键或通过 Debug 菜单启动调试。

   - 这将编译并部署您的 MAUI 应用到 Android 模拟器上。

7. **调试和测试**：

   - 您可以在 VSCode 中使用调试工具来设置断点，监视变量等进行调试。

   - 应用会在 Android 模拟器上运行，您可以测试其功能和性能。

这些步骤应该让您能够在 Android 模拟器上成功调试和运行 MAUI 项目。请注意，您需要确保已正确配置 Android 开发环境，以便 VSCode 能够与模拟器进行交互。

用VS2022打开自带的安卓模拟器，在VS Code底部状态栏找了一下，终于找到了调试设备的选项大括号{ }，感谢chatgpt！

然后在VS Code窗口顶部选择调试设备为安卓模拟器

按F5运行就能够看到MAUI Blazor项目运行在安卓模拟器了。

小结

初步来看，在VS Code开发MAUI项目，在安卓设备调试已经具备可行性，但是从微软官方介绍来看，在windows上边VS Code暂时不支持iOS设备调试，如果要基于windows做多平台项目，还是要用VS2022。

In this preview, we’ve added the following device targets:

•  On Windows, you can debug to your local Windows machine, Android emulators, and Android devices
•  On macOS, you can debug locally on your Mac, on iOS simulators or devices, and Android emulators or devices
•  On Linux, you can debug to Android emulators and devices