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
- Create Simple .NET Web App
- Generate tasks.json and launch.json
- Launch the Web App with VS Code in Debug Mode
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.
- Run the command
dotnet new web --name MyWebAppto create a new web app named MyWebApp - Navigate into the app directory with the command
cd MyWebApp - 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:
- Select Run and Debug on the side bar (or press Ctrl + Shift + D)
- Click create a launch.json file
- 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.
- Open
Startup.csand 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. - Launch the app in debug mode by selecting Run -> Start Debugging (or by pressing F5).
- A new browser window should launch to the address
https://localhost:5001/with execution paused on the breakpoint you just set. - Switch back to VS Code to inspect and debug the paused .NET code.
- Continue execution by selecting the triangle (play) icon at the top of the window (or by pressing F5).
- Switch back to the browser and it should now display the response text from the endpoint (Hello World!).
Need Some .NET Help?
Search fiverr for freelance .NET developers.
Follow me for updates
When I'm not coding...
Me and Tina are on a motorcycle adventure around Australia.
Come along for the ride!