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.
- 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.
- 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.
- Debugging will begin, and you will have the Debug Console panel on the bottom of the code editor, which shows debugging output.
You will notice a debug toolbar in the top center of the debug mode.
- Continue / Pause allows you to continue or pause debugging during the debugging session.
- 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.
- 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.
- 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.
- Restart restarts the debugging session.
- Stop allows you to terminate the current run.
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
- Open your Python program. In our case, I will use prime.py.
- Head over to the top-level “Run” menu and select Install Additional Debuggers.
- From here, install the Python extension.
- Select the Run and Debug button from the “Run” icon in the sidebar or press F5.
- 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.
- Debugging console will be activated in the integrated terminal.
Debugging HTML code
- Open the HTML file you want to debug. I am using a file named “web.html.”
- Add the breakpoints by left-clicking in the Editor Margin.
- From the sidebar, select the Run and Debug icon. It will open the Run and Debug panel.
- Select the Run and Debug button.
- The debugging session will start.
- It will also run your HTML code in your preferred browser.