diff --git a/aspnetcore/blazor/debug.md b/aspnetcore/blazor/debug.md index 26a2b9f108d9..25e685eed297 100644 --- a/aspnetcore/blazor/debug.md +++ b/aspnetcore/blazor/debug.md @@ -5,7 +5,7 @@ description: Learn how to debug Blazor apps. monikerRange: '>= aspnetcore-3.1' ms.author: riande ms.custom: mvc -ms.date: 08/26/2020 +ms.date: 09/24/2021 no-loc: [Home, Privacy, Kestrel, appsettings.json, "ASP.NET Core Identity", cookie, Cookie, Blazor, "Blazor Server", "Blazor WebAssembly", "Identity", "Let's Encrypt", Razor, SignalR] uid: blazor/debug --- @@ -33,7 +33,7 @@ For now, you *can't*: * Break on unhandled exceptions. * Hit breakpoints during app startup before the debug proxy is running. This includes breakpoints in `Program.Main` (`Program.cs`) and breakpoints in the [`OnInitialized{Async}` lifecycle methods](xref:blazor/components/lifecycle#component-initialization-oninitializedasync) of components that are loaded by the first page requested from the app. * Debug in non-local scenarios (for example, [Windows Subsystem for Linux (WSL)](/windows/wsl/) or [Visual Studio Codespaces](/visualstudio/devinit/devinit-and-codespaces)). -* Automatically rebuild the backend `*Server*` app of a hosted Blazor WebAssembly solution during debugging, for example by running the app with [`dotnet watch run`](xref:tutorials/dotnet-watch). +* Automatically rebuild the backend **`Server`** app of a hosted Blazor WebAssembly solution during debugging, for example by running the app with [`dotnet watch run`](xref:tutorials/dotnet-watch). ## Prerequisites @@ -189,58 +189,10 @@ For information on configuring VS Code assets in the `.vscode` folder, see the * 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 . -The `.vscode/launch.json` file sets the current working directory to the **`Server`** project's folder, typically `Server` for a hosted Blazor WebAssembly solution: - -```json -"cwd": "${workspaceFolder}/Server" -``` - -If Microsoft Edge is used for debugging instead of Google Chrome, the `.vscode/launch.json` launch configuration sets the `browser` property: - -```json -"browser": "edge" -``` - -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}", - ... - } - } -} -``` +> [!NOTE] +> Only [browser debugging](#debug-in-the-browser) is supported at this time. +> +> You can't automatically rebuild the backend **`Server`** app of a hosted Blazor WebAssembly solution during debugging, for example by running the app with [`dotnet watch run`](xref:tutorials/dotnet-watch). ## Attach to an existing debugging session @@ -264,7 +216,7 @@ The following launch configuration options are supported for the `blazorwasm` de | Option | Description | | --------- | ----------- | | `request` | Use `launch` to launch and attach a debugging session to a Blazor WebAssembly app or `attach` to attach a debugging session to an already-running app. | -| `url` | The URL to open in the browser when debugging. Defaults to `https://localhost:5001`. | +| `url` | The URL to open in the browser when debugging. | | `browser` | The browser to launch for the debugging session. Set to `edge` or `chrome`. Defaults to `chrome`. | | `trace` | Used to generate logs from the JS debugger. Set to `true` to generate logs. | | `hosted` | Must be set to `true` if launching and debugging a hosted Blazor WebAssembly app. | @@ -293,7 +245,7 @@ The following launch configuration options are supported for the `blazorwasm` de "type": "blazorwasm", "request": "attach", "name": "Attach and Debug", - "url": "http://localhost:5000" + "url": "https://localhost:7268" } ``` @@ -336,7 +288,7 @@ For more information, see [Debugging with Visual Studio for Mac](/visualstudio/m 1. Run a Debug build of the app in the Development environment. -1. Launch a browser and navigate to the app's URL (for example, `https://localhost:5001`). +1. Launch a browser and navigate to the app's URL (for example, `https://localhost:7268`). 1. In the browser, attempt to commence remote debugging by pressing Shift+Alt+d. diff --git a/aspnetcore/blazor/tooling.md b/aspnetcore/blazor/tooling.md index ce5c6da3b1ee..0bf35d1146c6 100644 --- a/aspnetcore/blazor/tooling.md +++ b/aspnetcore/blazor/tooling.md @@ -5,7 +5,7 @@ description: Learn about the tooling available to build Blazor apps. monikerRange: '>= aspnetcore-3.1' ms.author: riande ms.custom: mvc -ms.date: 02/11/2021 +ms.date: 09/24/2021 no-loc: [Home, Privacy, Kestrel, appsettings.json, "ASP.NET Core Identity", cookie, Cookie, Blazor, "Blazor Server", "Blazor WebAssembly", "Identity", "Let's Encrypt", Razor, SignalR] uid: blazor/tooling zone_pivot_groups: operating-systems @@ -80,19 +80,16 @@ When executing a hosted Blazor WebAssembly app, run the app from the solution's ```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" - } - ] + "version": "0.2.0", + "configurations": [ + { + "type": "blazorwasm", + "name": "Launch and Debug Blazor WebAssembly Application", + "request": "launch", + "cwd": "${workspaceFolder}", + "browser": "edge" + } + ] } ``` @@ -100,83 +97,130 @@ When executing a hosted Blazor WebAssembly app, run the app from the solution's ```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" - } - ] + "version": "2.0.0", + "tasks": [ + { + "label": "build", + "command": "dotnet", + "type": "shell", + "args": [ + "build", + "/property:GenerateFullPaths=true", + "/consoleloggerparameters:NoSummary", + ], + "group": "build", + "presentation": { + "reveal": "silent" + }, + "problemMatcher": "$msCompile" + } + ] } ``` + The project's `Properties/launchSettings.json` file includes the `inspectUri` property for the debugging proxy for any profiles in the `profiles` section of the file: + + ```json + "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}", + ``` + **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 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): + Examine the `Properties/launchSettings.json` file and determine the URL of the app from the `applicationUrl` property (for example, `https://localhost:7268`). Note this value for use in the `launch.json` file. + + In the launch configuration of the `.vscode/launch.json` file: + + * Set the current working directory (`cwd`) to the **`Server`** project folder. + * Indicate the app's URL with the `url` property. Use the value recorded earlier from the `Properties/launchSettings.json` file. ```json - ... "cwd": "${workspaceFolder}/{SERVER APP FOLDER}", - ... + "url": "{URL}" ``` - In the preceding configuration for the current working directory (`cwd`), the `{SERVER APP FOLDER}` placeholder is the **`Server`** project's folder, typically "`Server`". + In the preceding configuration: + + * The `{SERVER APP FOLDER}` placeholder is the **`Server`** project's folder, typically `Server`. + * The `{URL}` placeholder is the app's URL, which is specified in the app's `Properties/launchSettings.json` file in the `applicationUrl` property. If Microsoft Edge is used and Google Chrome isn't installed on the system, add an additional property of `"browser": "edge"` to the configuration. - Example for a project folder of `Server` and that spawns Microsoft Edge as the browser for debug runs instead of the default browser Google Chrome: + The follow example `.vscode/launch.json` file: + + * Sets the current working directory to the `Server` folder. + * Sets the URL for the app to `https://localhost:7268`. + * Changes the default browser from Google Chrome, which is the default browser, to Microsoft Edge. ```json - ... "cwd": "${workspaceFolder}/Server", + "url": "https://localhost:7268", "browser": "edge" - ... ``` - **`.vscode/tasks.json`** ([`dotnet` command](/dotnet/core/tools/dotnet) arguments): + The complete `.vscode/launch.json` file: + + ```json + { + "version": "0.2.0", + "configurations": [ + { + "type": "blazorwasm", + "name": "Launch and Debug Blazor WebAssembly Application", + "request": "launch", + "cwd": "${workspaceFolder}/Server", + "url": "https://localhost:7268", + "browser": "edge" + } + ] + } + ``` + + In `.vscode/tasks.json`, add a `build` argument that specifies the path to the **`Server`** app's project file: ```json - ... "${workspaceFolder}/{SERVER APP FOLDER}/{PROJECT NAME}.csproj", - ... ``` In the preceding argument: - * The `{SERVER APP FOLDER}` placeholder is the **`Server`** project's folder, typically "`Server`". - * The `{PROJECT NAME}` placeholder is the app's name, typically based on the solution's name followed by "`.Server`" in an app generated from the [Blazor project template](xref:blazor/project-structure). + * The `{SERVER APP FOLDER}` placeholder is the **`Server`** project's folder, typically `Server`. + * The `{PROJECT NAME}` placeholder is the app's name, typically based on the solution's name followed by `.Server` in an app generated from the Blazor WebAssembly project template. - The following example from the [tutorial for using SignalR with a Blazor WebAssembly app](xref:tutorials/signalr-blazor) uses a project folder name of `Server` and a project name of `BlazorWebAssemblySignalRApp.Server`: + An example `.vscode/tasks.json` file with a **`Server`** project named `BlazorHosted` in the `Server` folder of the solution: ```json - ... - "args": [ - "build", - "${workspaceFolder}/Server/BlazorWebAssemblySignalRApp.Server.csproj", - ... - ], - ... + { + "version": "2.0.0", + "tasks": [ + { + "label": "build", + "command": "dotnet", + "type": "process", + "args": [ + "build", + "${workspaceFolder}/Server/BlazorHosted.Server.csproj", + "/property:GenerateFullPaths=true", + "/consoleloggerparameters:NoSummary", + ], + "group": "build", + "presentation": { + "reveal": "silent" + }, + "problemMatcher": "$msCompile" + } + ] + } ``` 1. Press Ctrl+F5 to run the app. +> [!NOTE] +> Only [browser debugging](xref:blazor/debug#debug-in-the-browser) is supported at this time. +> +> You can't automatically rebuild the backend **`Server`** app of a hosted Blazor WebAssembly solution during debugging, for example by running the app with [`dotnet watch run`](xref:tutorials/dotnet-watch). + ## Trust a development certificate There's no centralized way to trust a certificate on Linux. Typically, one of the following approaches is adopted: