Debugging is a crucial skill for every developer, don’t we know it!

Having the right tools at your disposal can significantly streamline the process of identifying and fixing issues in your code. One tool you need is Dashcam, the other….a debugger with breakpoints. In this article, we’ll see how breakpoints work in Visual Studio Code (VS Code) and how they can help you debug your code better.

What are breakpoints?

Breakpoints are like car breaks that you can set in your source code, to pause the execution of your program at a specific line or condition. When your application is paused it gives you the opportunity to inspect the program’s state, variables, and call stack, helping you understand what’s happening under the hood.

How do you set breakpoints

In VS Code, setting breakpoints is a breeze. You can navigate to the line where you want to pause the execution, and click on the left margin next to the line number. A red dot will appear, indicating that a breakpoint has been set. To disable a breakpoint click it again and it will be gray. You can also set conditional breakpoints, which pause the program only when a specified condition is met.

How to use breakpoints

When your code reaches a breakpoint during execution, the program will pause, and the debugger will become active. This allows you to explore the variables and their values at that moment. You can step through the code line by line, examine variable states, and gain insights into the flow of your program.

In VScode as a debugging session starts, the Deubg toolbar appears at the top of the editor (see screenshot below) and the DEBUG CONSOLE panel is displayed and shows debugging output.

The Debug toolbar has different buttons that can be used to help you debug:

• Continue/Pause to control the flow of the execution of the program.
• Step Over runs the next method without analyzing it
• Step Into enters the next method and follows it while it is being executed
• Step Out leaves a certain method, lets it execute.
• Restart terminate the run and starts it over.
• Stop, terminates the debug run.

Editing Variables

One of the key benefits of breakpoints is the ability to inspect and change variables. In the debugging panel, you’ll find a “Variables” section where you can see all the variables in the current scope. You can hover over a variable to see its value or even modify its value on the fly. This real-time interaction can help you validate assumptions and pinpoint the root cause of issues. The value of these variables can be modified with the Set Value action from its context menu. You can filter variable names and values by typing letter(s) after clicking anywhere in the VARIABLES section.

Call Stack Analysis

Breakpoints also allow you to view the call stack, which shows the hierarchy of function calls that led to the current point of execution.

This feature is immensely valuable when you’re dealing with complex codebases, as it helps you trace the flow of execution and identify any unexpected paths.

Using Breakpoints Effectively: To make the most of breakpoints in VS Code, here are some examples:

• Use breakpoints strategically: Place breakpoints in areas where you suspect issues might arise, such as before critical calculations or inside loops.
• Leverage conditional breakpoints: Set conditions that trigger breakpoints only when specific criteria are met, saving you time during debugging.
• Combine with other debugging tools: Breakpoints work seamlessly with watch expressions, allowing you to monitor variables as you step through code.

Breakpoints are an essential tool in your debugging arsenal, just like having Dashcam run in the background to enable good context awareness when collaborating on debugging.

Mastering breakpoints can significantly enhance your ability to diagnose and fix issues in your code. Setting and utilizing breakpoints is a straightforward yet powerful process. However to truly understand how to leverage breakpoints in VSCode or other debuggers requires some practice.

The next time you find yourself with a bug, remember to add breakpoints to your code with what you just learned. Happy debugging!