How to Debug in Visual Studio Code

Debugging is a powerful tool that runs the code line-by-line to find the exact point where one may have made a programming mistake. You need to debug the code to ensure it does what you intended without any errors.

One of the most powerful features of Visual Studio Code is its debugger. In this guide, let us look at how you can quickly debug your code in VS Code.

Debug JavaScript, TypeScript, and Node.js in VS Code

Visual Studio Code only has in-built debugging support for JavaScript, Node.js and TypeScript. Therefore, let us look at debugging using a simple JavaScript program. Make sure you have Node.js installed before continuing. Then, follow these steps to debug on VS Code:

1. Open the file you want to debug. In our case, we are debugging a JavaScript program. So, I will choose index.js.

   

2. Select the Run and Debug button from the “Run” icon in the sidebar or press F5. Visual Studio Code will try to run your currently active file.

   

3. Visual Studio Code will try to detect your debug environment automatically. Our debugger is now attached, and Visual Studio Code has automatically found your program.

   

4. Debugging will begin, and you will have the Debug Console panel on the bottom of the code editor, which shows debugging output.

Debug actions

You will notice a debug toolbar in the top center of the debug mode.

1. Continue / Pause allows you to continue or pause debugging during the debugging session.
2. Step Over allows you to execute one line of code at a time. We call it Step Over because you might not want to debug a function call. Instead, you might want to step over the line and see the function results.
3. Step Into is similar to Step Over, except it allows you to step into a function call and watch that particular function execute line by line.
4. Step Out executes all the code in the current function and then pauses at the following statement (if there is one). It allows you to step out of the current function in one jump.
5. Restart restarts the debugging session.
6. Stop allows you to terminate the current run.

Breakpoints

Breakpoints let you stop or pause debugging at a particular line of code and look at the program’s state at that moment. Breakpoints can be created by left-clicking in the Editor Margin or pressing F9 on the current line. Breakpoints have red-filled circles.

If we run the program after setting a breakpoint, you will notice that it will stop at the breakpoint. If you hover over your Variables, you will be able to note the variable’s value at the time of the breakpoint.

Debugger extensions – debugging other languages

Debugging Python code

If you want to debug languages other than JavaScript or TypeScript, you must install a VS Code extension. Let us say, for instance, we want to debug a Python program. Follow these steps:

1. Open your Python program. In our case, I will use prime.py.

   

2. Head over to the top-level “Run” menu and select Install Additional Debuggers.

   

3. From here, install the Python extension.

   

4. Select the Run and Debug button from the “Run” icon in the sidebar or press F5.

   

5. You will find several configurations that are specific to Python files. Since we are just debugging a single Python file, we can select Python File from the menu options.

   

6. Debugging console will be activated in the integrated terminal.

   

Debugging HTML code

Debugging an HTML file does not require additional extension as VS Code’s built-in JavaScript Debugger also debugs HTML files. It is a debugger that debugs Node.js, Chrome, Edge, WebView2, VS Code extensions, and more. The process of debugging HTML files is as follows:

1. Open the HTML file you want to debug. I am using a file named “web.html.”

   

2. Add the breakpoints by left-clicking in the Editor Margin.

   

3. From the sidebar, select the Run and Debug icon. It will open the Run and Debug panel.

   

4. Select the Run and Debug button.

   

5. The debugging session will start.

   

6. It will also run your HTML code in your preferred browser.