Creating and Debugging Applications

One of the biggest benefits of Visual Studio Code is its independence from specific project systems. This makes it possible to use Visual Studio Code with almost any project and code file, with the appropriate command-line interfaces that can be invoked via automated tasks. For some platforms and languages, Visual Studio Code provides integrated support for enhanced development experiences. For example, you can create .NET projects easily, but you can also debug .NET, Node.js, and Python code with basically no effort. This chapter explains how to create and debug a few types of applications so that you can have a broader view of how Visual Studio Code can be an end-to-end development environment.

Chapter prerequisites

Before you get started with this chapter, make sure you have the following prerequisites installed on your machine:

·     The .NET runtime. You can download the latest version at https://dotnet.microsoft.com. On Windows, if you already have Visual Studio 2026, the .NET runtime is already installed.

·     The C# Dev Kit extension for Visual Studio Code.

·     The Node.js runtime. You can download the latest version from the official website.

These are required because you will first see how to create a .NET project in C#, and then how to create a JavaScript project based on Node.js. In the 2026 development landscape, the C# Dev Kit has become the standard for .NET development in Code, enabling features like the Solution Explorer and integrated project creation that were previously terminal-only.

Creating .NET projects

Visual Studio Code makes it easy to create .NET projects. You can create different types of projects, such as console or web projects, but C# is the default language. If you wish to create .NET project with Visual Basic or F#, you need to do it manually via the command line.

In this section, you will learn how to create a web project based on ASP.NET, taking advantage of integrated tooling. ASP.NET is the web development platform from Microsoft that ships as part of the .NET technology. You do not need to be an ASP.NET expert to complete the next example, because the focus here is not the code, but how you can create, edit, and debug a web project directly from within Visual Studio Code.

Close any open files and folders and open the Explorer view. You will see a button at the bottom labeled Create .NET Project (see Figure 101).

Figure 101: Creating a .NET project

When you click this button for the first time, VS Code downloads all necessary assets and tools and displays the result of this operation in the Output panel. When finished, a list of .NET project templates is shown (see Figure 101 again). The number and type of templates vary depending on which extensions you have installed. For example, the .NET MAUI extension is installed on my machine, so it provides additional templates for building mobile apps. For the current example, select the ASP.NET Core Web App (Model-View-Controller) template. You will then be asked to supply a project name and a target folder. Enter a project name of your choice and make sure you select an empty folder as the target. The project name used in this ebook is WebApplication1.

Note: If you have .NET 10 (or higher) installed, you will also be asked to specify the solution format (.sln or .slnx). Choose .sln if you want to keep maximum compatibility with previous .NET versions or with Visual Studio 2022.

After a few seconds, the project folder will be opened, as shown in Figure 102.

Figure 102: The new ASP.NET project has been created

In the index.cshtml file located under Views > Home, replace the content of line 6 with the following:

<h1 class="display-4">Welcome to VS Code Succinctly</h1>

Solution Explorer and the .NET CLI

Behind the scenes, Visual Studio Code invoked the .NET command-line interface (CLI) to generate the new project. More precisely, and based on the selected template, Visual Studio Code launched the following command:

> dotnet new mvc

The .NET CLI is very powerful and flexible, and can be used to generate projects, restore NuGet packages, build binaries, and much more.

Note: If you have experience with earlier versions of VS Code, you might know that creating a .NET project from within the environment is a recent yet useful addition. In the past, you had to create your project manually via the CLI.

For example, the following command would restore the required NuGet packages in your project (luckily, you do not need to do this manually in VS Code unless required):

> dotnet restore

It is not possible to list all the commands and options available through the .NET CLI here, but you can use the following command to see all the commands and their purposes:

> dotnet -h      

Use the following command to retrieve the full list of project templates available to you:

> dotnet new list

Going back to the project, you can work on code files according to your needs, taking full advantage of the enhanced C# development experience. In particular, the C# Dev Kit extension adds a new view called Solution Explorer that brings to Visual Studio Code the same solution and project navigation experience as Visual Studio. It’s shown in Figure 103.

Figure 103: The Solution Explorer view

In addition, all the editing features discussed in Chapters 1, 2, and 3 will be available to the project you created. It is also worth mentioning that VS Code (via C# extensibility) automatically generates some tasks, such as build, clean (removes intermediate build files), and watch (for debugging). Shortly, you will see these tasks in action.

As mentioned at the beginning of this section, the focus of the discussion is how you can leverage the integrated VS Code tools to create and debug applications, not writing code. If you are interested in developing web applications with ASP.NET, you can have a look at the documentation from Microsoft. Supposing you have done some of the work you wanted to on the code, it is time to run and debug the application.

Debugging in Visual Studio Code

Visual Studio Code supports debuggers, and this is another key feature that differentiates it from other coding tools. It ships with an integrated debugger for the Node.js runtime, and therefore natively allows for debugging JavaScript, TypeScript, and any other language that is transpiled into JavaScript. Additional debuggers can be integrated via extensibility. For example, the C# Dev Kit extension adds a .NET debugger to the VS Code toolbox that will be used to debug the sample project, and it also automatically configures the debugger for most common scenarios.

Managing breakpoints

Before starting the application in debugging mode, it is useful to set one or more breakpoints to explore the full debugging capabilities of VS Code. Breakpoints break the execution at the specified point, allowing you to analyze the status of your code at a given moment. To place a breakpoint, click the white space to the left of the line number or press F9 after placing the cursor on that line. For instance, Figure 104 shows the placement of a breakpoint on line 6, at the app variable declaration in the Program.cs file.

Figure 104: Placing breakpoints in the code editor

You can remove a breakpoint by simply clicking it again, or you can manage breakpoints in the Breakpoints area of the Run and Debug view. Figure 104 demonstrates this, with the Run view collapsed for better visibility.

Tip: You can also use logpoints by right-clicking the editor margin and then selecting Add Logpoint. These allow you to inject log messages into the console without pausing the application's execution.

By default, the debugger will break on user-unhandled exceptions, but you can select the All Exceptions option. If you click Add Function Breakpoint (+), you will be able to create a breakpoint that points to a specified function name rather than placing breakpoints in the source code directly. This is useful when source code is not available, but you know a function’s name.

Breakpoints support expressions: if you right-click a breakpoint and then select Edit Breakpoint from the context menu, you will be able to specify an expression that will cause the debugger to break the execution only when the specified condition is evaluated as true. Figure 105 shows an example where you can see that the breakpoint will be hit only if the builder.Services object is not null.

Figure 105: Conditional breakpoints with expressions

You have many options to remove breakpoints, such as pressing F9 again on the same line where a breakpoint is, right-clicking a breakpoint and then selecting Remove Breakpoint from the context menu, or holding Shift and clicking on a breakpoint. Leave the breakpoint on line 6 with no expressions, since it will be used very shortly.

Debugging applications

Debugging is crucial in the development lifecycle, and Visual Studio Code offers sophisticated tools that you would expect from a class A development environment. In this section, you will learn how to debug your applications and how to investigate code. Remember that the steps described for a C# example also apply to any other debugger. In the Debug and Run view, expand the Run section and then click Run and Debug. Alternatively, you can press F5 at any time. The first time you start debugging a project, Visual Studio Code will ask you to select a debugger, as shown in Figure 106.

Figure 106: Selecting a debugger

Visual Studio Code shows the list of debuggers that best fit the current project type. In this case, the right choice is C#, but you might select a different debugger based on the project you are building.

Once you click the desired debugger, Visual Studio Code will perform the following tasks:

1. It asks you to specify the startup project; in this case, there is only one.
2. It builds your code by running the build task.
3. It starts a watch task to monitor the execution flow.
4. It enables the debug session, which is confirmed by the orange color of the status bar.

The output from the debugger is displayed inside the Debug Console panel (see Figure 107).

Figure 107: Debugging session with breakpoints and code status

In the current example, the execution will break when the breakpoint is hit. At this point, the Debug and Run view shows the following sections:

·     Variables, which shows the list of variables that are currently under debugger control and that you can investigate by expanding each variable.

·     Watch, a place where you can evaluate expressions.

·     Call Stack, where you can see the stack of method calls. If you click a method call, the code editor will bring you to the code that is making that call.

·     Breakpoints, where you can manage breakpoints.

At the top of the editor, you can see the Debug action pane, which is composed of the following commands from left to right:

·     Continue (F5), which continues the application execution after breaking on a breakpoint or an exception.

·     Step Over (F10), which executes one statement at a time except for method calls, which are invoked without stepping into them.

·     Step Into (F11), which executes one statement at a time, including statements within method bodies.

·     Step Out (F12), which executes the remaining lines of a function starting from the current breakpoint.

·     Restart (Ctrl+Shift+F5), which restarts the application execution.

·     Hot Reload (Ctrl+Shift+Enter), which allows you to make changes to the code without restarting the debugging session. This is a very important feature, and it’s discussed thoroughly at the end of this section.

·     Stop (Shift+F5), which stops debugging.

If you hover over a variable name in the code editor, a convenient pop-up will make it easy to investigate values and property values (depending on the type of the variable). Figure 108 shows a pop-up with information about the builder variable.

Figure 108: Inline variable investigation

You can expand properties and see their values, and you can also investigate properties in the Variables area of the Run and Debug view. You also have the Watch tool to evaluate expressions. While debugging, right-click an object and then select Add to Watch to investigate the object in the Watch section of the Run and Debug view (see Figure 109).

Figure 109: Using the Watch debugging tool

The debugger also offers the Call Stack, which allows you to step through the method call stack. When you click a method call in the stack, the code editor opens the file containing the call (this is unavailable for external or compiled code). When you have made the necessary investigations, you can either continue debugging by pressing F5 (unless the execution broke due to an exception) or stop debugging and change your code.

Figure 110 shows this simple application running in the browser, and you can see the Debug Console panel displaying information about the execution flow.

Figure 110: The sample application running

Tip: While web applications run in a browser, the output of console applications is directed to an instance of the integrated terminal instead of external console windows.

Debug configuration

It is possible to configure several options for the debugging features. Such options generally refer to the tools that Visual Studio Code offers for debugging; they are not related to the behavior of individual debuggers. If you open the Settings user interface, you can find the Debug element under the Features node (see Figure 111).

Figure 111: Debug configuration

Here you can find settings related to the appearance of the debugging tools that you can customize. Some settings also affect the way Visual Studio Code shows the information it receives from a debugger; for example, the Inline Values option allows you to decide if the value of a variable should be displayed when you hover over its name while the debugging session is in break mode. Setting names are generally self-explanatory, and most of the time, you will not need to change the default settings, but it is important to know that you can.

Tip: Do not delete the sample application you created in this chapter because it will be reused in the next chapter to demonstrate how VS Code can integrate with Azure services.

Enhancing the iteration loop: Hot Reload

A significant advancement in the modern debugging experience is Hot Reload. In previous versions of development environments, making even a minor change to a UI element or a logic branch required stopping the debugger, recompiling the code, and restarting the application. Hot Reload eliminates this friction by allowing you to modify source code while the application is running and apply those changes immediately without losing the application's state. At the time of writing, Hot Reload is still an experimental feature that needs to be enabled in the C# Dev Kit extension settings, as shown in Figure 112.

Figure 112: Enabling Hot Reload

In an ASP.NET MVC project, for instance, you can change the text of a button or the logic inside a controller action while the browser is still open. Once you save the file, you can click the Hot Reload (fire icon) in the Debug action pane (see Figure 107). Visual Studio Code will then attempt to patch the running binary with the new logic. If successful, you can simply refresh your browser to see the result (in some cases, the change will reflect automatically). This feature is particularly powerful when fine-tuning UI layouts or debugging complex, multistep forms where restarting would mean re-entering data. However, it is important to understand that changes such as renaming a method, changing a constructor's signature, or modifying a generic type are too structural for the runtime to update on the fly. In these cases, VS Code will notify you that a restart is required to apply the changes.

Creating and debugging projects with other frameworks

Unless provided by extensions, Visual Studio Code has no built-in option to generate projects from within the environment. What you can do is invoke command-line tools to generate new projects, and you can do this from the integrated terminal so that you do not need to open external command prompts. This section describes how to create and debug JavaScript projects.

Note: Debugging with Node.js is a key feature in Visual Studio Code, so the recommended approach is to combine what you learn in this section with the official documentation.

You can create JavaScript projects in many ways and based on many different frameworks. The goal here is to understand how you can do this without leaving VS Code. For example, you could use the Node.js runtime and the Express.js framework. To do so, you can open a terminal instance and type the following command to first install Express.js:

> npm install -g express-generator

Tip: Remember that the Node.js CLI requires commands to be lowercase.

Next, you can create a folder and make it active:

> mkdir c:\expressproject

> chdir c:\expressproject

Finally, you can generate a JavaScript project and name it expressproject with the following command:

> express expressproject

Make sure you visit the Express.js website for more information on project templates and available options. Figure 113 shows a maximized Terminal window with the aforementioned commands already executed.

Figure 113: Creating a JavaScript project from the integrated terminal

When ready, open the new project by opening its folder (File > Open Folder). The new project will be available in seconds and will appear as shown in Figure 114.

Figure 114: Opening the new JavaScript project

If you want to run and debug your JavaScript project, you still open the Run and Debug view. Visual Studio Code is generally able to preconfigure the built-in Node.js debugger for JavaScript projects, but due to the large number of frameworks available, these configurations might not work, and you will need to add manual configuration. You can try clicking the Run and Debug button first, and you will be able to select the Node.js debugger as shown in Figure 115.

Figure 115: Selecting the Node.js debugger

If the debugging session starts, you will be able to leverage all the debugging features discussed in the first part of this chapter. If it does not start, you might need to do some additional configuration.

The first thing to do is click the hyperlink that allows you to add a launch.json file, located under the Run and Debug button. The launch.json file is a configuration file for JavaScript and TypeScript projects that also defines the target for building and debugging code. Considering the previous sample project, the launch.json file generated by VS Code looks like Code Listing 2.

Code Listing 2

Before you run the project again, you need to select an appropriate debugger configuration. If you open the Run and Debug view again, you will see a dropdown next to the Start button (see Figure 116).

Figure 116: Selecting the JavaScript debug configuration

If you have added a launch.json file, select the Node.js option from the list and, when prompted, select the Run Script: start option from the Command Palette. Finally, click the Start Debugging button (the play icon). The Launch Program option does not work with JavaScript code, and the JavaScript Debug Terminal is a good option when you want to attach the debugger to a running application and use the Console to send commands. At this point, you will be able to run and debug your JavaScript code.

Chapter summary

The power of Visual Studio Code as a development environment is apparent when it comes to writing real applications. For .NET, you can take advantage of the tools added by the C# Dev Kit extension and create projects from within the environment, whereas for other languages you can generate projects from the integrated terminal. The debugger allows you to analyze the execution flow and fix issues as required, and it offers powerful tools such as breakpoints, local variable inspection, inline variable inspection, and call stack.

By completing this chapter, you have learned all the most important and powerful features you need to write great cross-platform applications, but there is even more: Visual Studio Code can assist you in your everyday coding work, as discussed in the next chapter.