From 912e60365c442f7111700ad87d2fc92cf4e77a4d Mon Sep 17 00:00:00 2001 From: Luke Latham <1622880+guardrex@users.noreply.github.com> Date: Tue, 1 Jun 2021 16:46:34 -0500 Subject: [PATCH] Blazor VSC launch/tasks/debug guidance updates (#22470) --- aspnetcore/blazor/debug.md | 75 ++++++++++++------- aspnetcore/blazor/tooling.md | 56 +++++++++++++- .../razor-pages/razor-pages-start.md | 4 + aspnetcore/tutorials/signalr-blazor.md | 7 +- 4 files changed, 112 insertions(+), 30 deletions(-) diff --git a/aspnetcore/blazor/debug.md b/aspnetcore/blazor/debug.md index 3da33211a7..e574bac1e4 100644 --- a/aspnetcore/blazor/debug.md +++ b/aspnetcore/blazor/debug.md @@ -57,7 +57,7 @@ Visual Studio for Mac requires version 8.8 (build 1532) or later: > [!NOTE] > Apple Safari on macOS isn't currently supported. -## Enable debugging +## Debug a standalone Blazor WebAssembly app To enable debugging for an existing Blazor WebAssembly app, update the `launchSettings.json` file in the startup project to include the following `inspectUri` property in each launch profile: @@ -185,17 +185,60 @@ For information on configuring VS Code assets in the `.vscode` folder, see the * ## Debug hosted Blazor WebAssembly -1. Open the **`Client`** project folder of the hosted Blazor solution folder in VS Code. +For guidance on configuring VS Code assets in the `.vscode` folder and where to place the `.vscode` folder in the solution, see the **Linux** operating system guidance in . -1. If there's no launch configuration set for the project, the following notification appears. Select **Yes**. +The `.vscode/launch.json` file sets the current working directory to the `**Server**` project's folder, typically `Server` for a hosted Blazor WebAssembly solution: - > Required assets to build and debug are missing from '{APPLICATION NAME}'. Add them? +```json +"cwd": "${workspaceFolder}/Server" +``` - For information on configuring VS Code assets in the `.vscode` folder, see the **Linux** operating system guidance in . +If Microsoft Edge is used for debugging instead of Google Chrome, the `.vscode/launch.json` launch configuration sets the `browser` property: -1. In the command palette at the top of the window, select the *Server* project within the hosted solution. +```json +"browser": "edge" +``` -A `launch.json` file is generated with the launch configuration for launching the debugger. +The `.vscode/tasks.json` file adds the **`Server`** app's project file path to the `dotnet build` arguments under `args`. The `**Server**` project's folder is typically named `Server` in a solution based on the hosted Blazor WebAssembly project template. The following example uses the project file for the **`Server`** app of the [Blazor-SignalR tutorial](xref:tutorials/signalr-blazor)), which has a project file named `BlazorWebAssemblySignalRApp.Server.csproj`: + +```json +{ + ... + "tasks": [ + { + "label": "build", + "command": "dotnet", + "type": "shell", + "args": [ + ... + "${workspaceFolder}/Server/BlazorWebAssemblySignalRApp.Server.csproj", + ... + ], + ... + } + ] +} +``` + +The **`Server`** project's `Properties/launchSettings.json` file includes the `inspectUri` property for the debugging proxy. The following example names the launch profile for the **`Server`** app of the [Blazor-SignalR tutorial](xref:tutorials/signalr-blazor)), which is `BlazorWebAssemblySignalRApp.Server`: + +```json +{ + "iisSettings": { + ... + }, + "profiles": { + "IIS Express": { + "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}", + ... + }, + "BlazorWebAssemblySignalRApp.Server": { + "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}", + ... + } + } +} +``` ## Attach to an existing debugging session @@ -252,24 +295,6 @@ The following launch configuration options are supported for the `blazorwasm` de } ``` -### Launch and debug a hosted Blazor WebAssembly app with Microsoft Edge - -Browser configuration defaults to Google Chrome. When using Microsoft Edge for debugging, set `browser` to `edge`. To use Google Chrome, either don't set the `browser` option or set the option's value to `chrome`. - -```json -{ - "name": "Launch and Debug Hosted Blazor WebAssembly App", - "type": "blazorwasm", - "request": "launch", - "hosted": true, - "program": "${workspaceFolder}/Server/bin/Debug/netcoreapp3.1/MyHostedApp.Server.dll", - "cwd": "${workspaceFolder}/Server", - "browser": "edge" -} -``` - -In the preceding example, `MyHostedApp.Server.dll` is the *Server* app's assembly. The `.vscode` folder is located in the solution's folder next to the `Client`, `Server`, and `Shared` folders. - # [Visual Studio for Mac](#tab/visual-studio-mac) To debug a Blazor WebAssembly app in Visual Studio for Mac: diff --git a/aspnetcore/blazor/tooling.md b/aspnetcore/blazor/tooling.md index 1c75a5adab..0c88bb4389 100644 --- a/aspnetcore/blazor/tooling.md +++ b/aspnetcore/blazor/tooling.md @@ -72,9 +72,60 @@ When executing a hosted Blazor WebAssembly app, run the app from the solution's 1. The IDE requests that you add assets to build and debug the project. Select **Yes**. + If Visual Studio Code doesn't offer to create the assets automatically, use the following files: + + `.vscode/launch.json` (configured for launch and debug of a Blazor WebAssembly app): + + ```json + { + // Use IntelliSense to learn about possible attributes. + // Hover to view descriptions of existing attributes. + // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 + "version": "0.2.0", + "configurations": [ + { + "type": "blazorwasm", + "name": "Launch and Debug Blazor WebAssembly Application", + "request": "launch", + "cwd": "${workspaceFolder}", + "browser": "edge" + } + ] + } + ``` + + `.vscode/tasks.json`: + + ```json + { + // See https://go.microsoft.com/fwlink/?LinkId=733558 + // for the documentation about the tasks.json format + "version": "2.0.0", + "tasks": [ + { + "label": "build", + "command": "dotnet", + "type": "shell", + "args": [ + "build", + // Ask dotnet build to generate full paths for file names. + "/property:GenerateFullPaths=true", + // Do not generate summary otherwise it leads to duplicate errors in Problems panel + "/consoleloggerparameters:NoSummary", + ], + "group": "build", + "presentation": { + "reveal": "silent" + }, + "problemMatcher": "$msCompile" + } + ] + } + ``` + **Hosted Blazor WebAssembly launch and task configuration** - For hosted Blazor WebAssembly solutions, add (or move) the `.vscode` folder with `launch.json` and `tasks.json` files to the solution's parent folder, which is the folder that contains the typical project folder names of `Client`, `Server`, and `Shared`. Update or confirm that the configuration in the `launch.json` and `tasks.json` files execute a hosted Blazor WebAssembly app from the **`Server`** project. + For hosted Blazor WebAssembly solutions, add (or move) the `.vscode` folder with `launch.json` and `tasks.json` files to the solution's parent folder, which is the folder that contains the typical project folders: `Client`, `Server`, and `Shared`. Update or confirm that the configuration in the `launch.json` and `tasks.json` files execute a hosted Blazor WebAssembly app from the **`Server`** project. **`.vscode/launch.json`** (`launch` configuration): @@ -117,8 +168,7 @@ When executing a hosted Blazor WebAssembly app, run the app from the solution's "args": [ "build", "${workspaceFolder}/Server/BlazorWebAssemblySignalRApp.Server.csproj", - "/property:GenerateFullPaths=true", - "/consoleloggerparameters:NoSummary" + ... ], ... ``` diff --git a/aspnetcore/tutorials/razor-pages/razor-pages-start.md b/aspnetcore/tutorials/razor-pages/razor-pages-start.md index ab4a868197..18c857bb34 100644 --- a/aspnetcore/tutorials/razor-pages/razor-pages-start.md +++ b/aspnetcore/tutorials/razor-pages/razor-pages-start.md @@ -235,6 +235,8 @@ At the end of this tutorial, you'll have a working Razor Pages web app that you' A *.vscode* directory, containing *launch.json* and *tasks.json* files, is added to the project's root directory. + If Visual Studio Code doesn't offer to add the assets automatically, see the **Linux** operating system guidance in . + # [Visual Studio for Mac](#tab/visual-studio-mac) * Select **File** > **New Solution**. @@ -381,6 +383,8 @@ At the end of this tutorial, you'll have a working Razor Pages web app that you' A *.vscode* directory, containing *launch.json* and *tasks.json* files, is added to the project's root directory. + If Visual Studio Code doesn't offer to add the assets automatically, see the **Linux** operating system guidance in . + # [Visual Studio for Mac](#tab/visual-studio-mac) * Select **File** > **New Solution**. diff --git a/aspnetcore/tutorials/signalr-blazor.md b/aspnetcore/tutorials/signalr-blazor.md index a985a96b3b..7b6e10234a 100644 --- a/aspnetcore/tutorials/signalr-blazor.md +++ b/aspnetcore/tutorials/signalr-blazor.md @@ -123,7 +123,10 @@ Follow the guidance for your choice of tooling: 1. In Visual Studio Code, open the app's project folder. -1. When the dialog appears to add assets to build and debug the app, select **Yes**. Visual Studio Code automatically adds the `.vscode` folder with generated `launch.json` and `tasks.json` files. +To configure Visual Studio Code assets in the `.vscode` folder for debugging, see: + +* (use the guidance for the *Linux* operating system regardless of platform) +* # [Visual Studio for Mac](#tab/visual-studio-mac) @@ -390,7 +393,7 @@ Follow the guidance for your choice of tooling: 1. In Visual Studio Code, open the app's project folder. -1. When the dialog appears to add assets to build and debug the app, select **Yes**. Visual Studio Code automatically adds the `.vscode` folder with generated `launch.json` and `tasks.json` files. For information on configuring VS Code assets in the `.vscode` folder, see the **Linux** operating system guidance in . +1. When the dialog appears to add assets to build and debug the app, select **Yes**. Visual Studio Code automatically adds the `.vscode` folder with generated `launch.json` and `tasks.json` files. For information on configuring VS Code assets in the `.vscode` folder, including how to manually add the files to the solution, see the **Linux** operating system guidance in . # [Visual Studio for Mac](#tab/visual-studio-mac)