debugger.md

Scenario 0: Debugging standalone application

1. Create a new Blazor WASM application from the CLI using dotnet new blazorwasm -o Scenario0

2. Open the "Scenario0" directory in VS Code.

3. Navigate to the "Debug" section on the left. Then, click "create a launch.json file". In the window that pops up, select "Blazor WebAssembly Debug".

   

4. A new launch.json file should be created with the following contents.

   {
       // 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"
           }
       ]
   }
   

5. Launch the "Launch and Debug Blazor WebAssembly Application" configuration. Confirm that a new Chrome window is opened with the Blazor application under debug.

6. Open Counter.razor in VS Code and place a breakpoint inside the IncrementCount function.

7. Navigate to the "Counter" page in the web browser and click the "Click me" button. Confirm that you hit the breakpoint in the VS Code window.

8. Stop the debugging session by click the red square in the debug.

9. Repeat steps 5-8 again and confirm that you get the same results.

Scenario 1: Modifying the launch configuration in the standalone app

1. [Windows only] In the same project above, modify the launch.json to set the browser to "edge". Run through steps 5-8 in Scenario 0 and confirm that you are able to debug in the Edge browser.
2. In the same project above, modify the launch.json to set the default URL to http://localhost:500. Run through steps 5-8 in Scenario 0 and confirm that you are able to debug in the new URL.

Scenario 2: Debugging a hosted application

1. Create a new hosted Blazor WASM project by using dotnet new blazorwasm --hosted -o Scenario1.

2. Navigate to the "Debug" section on the left. Then, click "create a launch.json file". In the window that pops up, select "Blazor WebAssembly Debug".

3. In the new launch.json file, make the following modifications to launch the correct server project.

   {
       // 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}/Server"
           }
       ]
   }
   

4. Run through steps 5-9 from Scenario 0 and confirm that you are able to debug.