Published:

VS Code + .NET - Debug a .NET Web App in Visual Studio Code

Tutorial built with .NET 5.0

In this tutorial we'll go through the steps to create and debug a simple .NET web application in Visual Studio Code.


Tutorial Contents


Tools Required to Debug .NET 5.0 Web Apps

To develop, run and debug .NET 5.0 applications in VS Code you need the following installed:

  • .NET SDK - includes the .NET runtime and command line tools
  • Visual Studio Code - free code editor / IDE that runs on Windows, Mac and Linux
  • C# extension for Visual Studio Code - adds support to VS Code for developing and debugging .NET applications


Create Simple .NET Web App

With the .NET CLI you can create a new project with the dotnet new <TEMPLATE> command, where the TEMPLATE is the type of application you want to create. To create a .NET Web App execute the command dotnet new web --name <NAME>, the NAME parameter sets the name of the .NET project and directory created, if omitted the name of the current directory is used.

The web template creates a simple Hello World .NET starter web application that contains some basic configuration and a single endpoint that returns the string "Hello World!" from the base path ("/").

For more info on the dotnet new command see https://docs.microsoft.com/en-us/dotnet/core/tools/dotnet-new.

Follow these steps to create a starter .NET web application named MyWebApp and open it in VS Code.

  1. Run the command dotnet new web --name MyWebApp to create a new web app named MyWebApp
  2. Navigate into the app directory with the command cd MyWebApp
  3. Open the web app in VS Code with the command code . (or open the MyWebApp folder from the VS Code menu)


Generate tasks.json and launch.json to build and debug the .NET web app

After opening the project in VS Code you should see a popup alert from the C# extension with the message - Required assets to build and debug are missing from 'MyWebApp'. Add them? - click Yes to automatically generate the launch.json and tasks.json files in the .vscode folder with the required configuration to build and debug the project.

Alternatively you can generate the tasks.json and launch.json files with these steps:

  1. Select Run and Debug on the side bar (or press Ctrl + Shift + D)
  2. Click create a launch.json file
  3. Select environment: .NET Core

What are tasks.json and launch.json?

The tasks.json file contains configuration for tasks that can be executed for the project by VS Code (e.g. build, publish, watch etc), for more info see https://code.visualstudio.com/docs/editor/tasks.

The launch.json file contains debugging config and setup details for the project, for more info see https://code.visualstudio.com/docs/editor/debugging#_launch-configurations.

The generated files allow VS Code to build and launch the .NET Web App in debug mode.

Generated VS Code tasks.json file

Your generated tasks.json configuration should look something like this, the build task is executed each time you launch the app in debug mode.

{
    "version": "2.0.0",
    "tasks": [
        {
            "label": "build",
            "command": "dotnet",
            "type": "process",
            "args": [
                "build",
                "${workspaceFolder}/MyWebApp.csproj",
                "/property:GenerateFullPaths=true",
                "/consoleloggerparameters:NoSummary"
            ],
            "problemMatcher": "$msCompile"
        },
        {
            "label": "publish",
            "command": "dotnet",
            "type": "process",
            "args": [
                "publish",
                "${workspaceFolder}/MyWebApp.csproj",
                "/property:GenerateFullPaths=true",
                "/consoleloggerparameters:NoSummary"
            ],
            "problemMatcher": "$msCompile"
        },
        {
            "label": "watch",
            "command": "dotnet",
            "type": "process",
            "args": [
                "watch",
                "run",
                "${workspaceFolder}/MyWebApp.csproj",
                "/property:GenerateFullPaths=true",
                "/consoleloggerparameters:NoSummary"
            ],
            "problemMatcher": "$msCompile"
        }
    ]
}


Generated VS Code launch.json file

Your generated launch.json configuration should look something like this, the first configuration (.NET Core Launch (web)) is used to launch the web app in debug mode.

{
    // 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": [
        {
            "name": ".NET Core Launch (web)",
            "type": "coreclr",
            "request": "launch",
            "preLaunchTask": "build",
            "program": "${workspaceFolder}/bin/Debug/net5.0/MyWebApp.dll",
            "args": [],
            "cwd": "${workspaceFolder}",
            "stopAtEntry": false,
            "serverReadyAction": {
                "action": "openExternally",
                "pattern": "\\bNow listening on:\\s+(https?://\\S+)"
            },
            "env": {
                "ASPNETCORE_ENVIRONMENT": "Development"
            },
            "sourceFileMap": {
                "/Views": "${workspaceFolder}/Views"
            }
        },
        {
            "name": ".NET Core Attach",
            "type": "coreclr",
            "request": "attach"
        }
    ]
}


Launch the Web App with VS Code in Debug Mode

The C# project is now setup and ready for debugging in VS Code.

Follow these steps to add a breakpoint and launch the web app in debug mode.

  1. Open Startup.cs and add a breakpoint inside the root endpoint handler (await context.Response.WriteAsync("Hello World!");) by clicking just to the left of the line number, a red dot should appear for the breakpoint.
  2. Launch the app in debug mode by selecting Run -> Start Debugging (or by pressing F5).
  3. A new browser window should launch to the address https://localhost:5001/ with execution paused on the breakpoint you just set.
  4. Switch back to VS Code to inspect and debug the paused .NET code.
  5. Continue execution by selecting the triangle (play) icon at the top of the window (or by pressing F5).
  6. Switch back to the browser and it should now display the response text from the endpoint (Hello World!).

 

Subscribe or Follow Me For Updates

Subscribe to my YouTube channel or follow me on Twitter or GitHub to be notified when I post new content.