Debug is more than console.log

The inspiration for this article stemmed from a discussion I had with the last team I had the privilege of leading. Despite being predominantly composed of experienced professionals, I observed that they heavily relied on console.log statements as their primary debugging tool, attributing their lack of familiarity with debug functionalities as the reason for avoiding them.

In this context, I felt compelled to thoroughly explore the advantages of utilizing the debugging tool, with the aim of showcasing how it could significantly enhance the team's productivity.

While using console.log statements is one of the most common ways to debug JavaScript code, it comes with certain drawbacks. These include cluttering the console output, requiring manual removal of the statements afterward, and not providing sufficient insights into the execution context.

The debugger tool is a feature integrated into the majority of modern browsers and IDEs. It allows you to pause code execution at any point, inspect variables and objects in scope, modify their values, set breakpoints and conditional breakpoints, step through the code line by line, and evaluate expressions in real time. You can access the debugger tool by opening the developer tools in your browser (usually by pressing F12 or Ctrl+Shift+I) and clicking on the "Sources" or "Debugger" tab. Alternatively, you can use the "debugger" statement in your code to programmatically trigger a breakpoint.

To leverage the power of the debugger tool, you need to establish one or more breakpoints in your code. A breakpoint is a designated spot where execution halts, allowing you to scrutinize the program's state. You can set a breakpoint by clicking on the line number in the source code panel or by right-clicking on a line and selecting "Add breakpoint". Furthermore, you can set conditional breakpoints that pause execution only when specific conditions are met—such as a variable having a certain value or an expression evaluating to true. To set a conditional breakpoint, right-click on a line and choose "Add conditional breakpoint", then input the desired condition.

After configuring your breakpoints, you can execute your code as usual until it reaches a breakpoint. At this point, you'll see the current line highlighted in the source code panel, along with a list of variables and objects in scope displayed in the right panel. Hovering over any variable or object reveals its value, while clicking on it expands its properties. Modifying the value of variables or objects is as simple as double-clicking and inputting a new value. You can also evaluate expressions right in the console panel by typing them and hitting Enter.

To resume code execution, you can utilize the buttons at the top of the developer tools. You have the option to continue until the next breakpoint, skip the current line, step into a function call, or step out of a function call. You can also enable or disable breakpoints by clicking on them or using the checkboxes in the right panel.

Using the debugger tool can substantially heighten your productivity by enabling faster error detection and correction, facilitating a clearer understanding of your code's functionality, and permitting experimentation with different values and expressions without altering your source code. Additionally, it promotes writing cleaner and more maintainable code by reducing reliance on console.log statements that can muddle your console output and complicate code readability. Consequently, we strongly recommend embracing the debugger tool instead of console.log statements whenever feasible.