Blazor VSC launch/tasks/debug guidance updates (#22470)
Luke Latham
GitHub
parent
753191b976
commit
912e60365c
|
|
@ -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 <xref:blazor/tooling?pivots=linux>.
|
||||
|
||||
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 <xref:blazor/tooling>.
|
||||
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:
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
...
|
||||
],
|
||||
...
|
||||
```
|
||||
|
|
|
|||
|
|
@ -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 <xref:blazor/tooling?pivot=linux>.
|
||||
|
||||
# [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 <xref:blazor/tooling?pivot=linux>.
|
||||
|
||||
# [Visual Studio for Mac](#tab/visual-studio-mac)
|
||||
|
||||
* Select **File** > **New Solution**.
|
||||
|
|
|
|||
|
|
@ -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:
|
||||
|
||||
* <xref:blazor/tooling?pivots=linux> (use the guidance for the *Linux* operating system regardless of platform)
|
||||
* <xref:blazor/debug>
|
||||
|
||||
# [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 <xref:blazor/tooling>.
|
||||
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 <xref:blazor/tooling?pivot=linux>.
|
||||
|
||||
# [Visual Studio for Mac](#tab/visual-studio-mac)
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue