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. And one of the most powerful features in Visual Studio Code is its debugger. So in this article, let us look at how you can debug your code in Visual Studio Code.

How To Debug In Visual Studio Code

Visual Studio Code only has in-built debugging support for JavaScript 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.

    Open JavaScript File
    Open the file you want to debug in Visual Studio Code.
  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.

    Open Run and Debug
    From the Run view, select the Run and Debug button.
  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.

    Debug Environment
    This is the debug environment, and the debug result will be outputted in the debug console.
  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.

Debug Toolbar
A floating Debug Toolbar will be available in the debug environment.
  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.

Breakpoints
Multiple Breakpoints can be toggled by clicking in the Editor Margin.

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 Files

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.

    Open Python File
    Open the Python program you want to debug.
  2. Head over to the top-level “Run” menu and select Install Additional Debuggers.

    Install Additional Debuggers
    From the Run menu dropdown, select Install Additional Debuggers.
  3. From here, install the Python extension.

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

    Run and Debug Python Program.
    From the Run view, select the Run and Debug button.
  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.

    Debug Configuration
    Select Python File from the Debug Configuration menu options.
  6. Debugging console will be activated in the integrated terminal.

    Python Debug Console
    Debug output will be displayed in the Python Debug Console.

Debugging HTML Files

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.”

    HTML File
    Open the HTML source file you want to debug.
  2. Add the breakpoints by left-clicking in the Editor Margin.

    Add Breakpoints
    Insert a few breakpoints by left-clicking on the editor margins.
  3. From the sidebar, select the Run and Debug icon. It will open the Run and Debug panel.

    Run and Debug Window Button
    From the sidebar, select the Run and Debugger icon.
  4. Select the Run and Debug button.

    Run and Debug Button
    Press the Run and Debug button.
  5. The debugging session will start.

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

    Run the HTML file
    Your HTML file will also run in your browser.

This is just a brief introduction to debugging in Visual Studio Code.

Was this article helpful?

Leave a Comment