DeepCode and Snyk joined forces. Find out more in our blog.

SummerAcademy on Debugging - 2.1.9 Debuggers

Monday, September 7th, 2020

As the name says: Debuggers are there to … well … help debug code. To do so, debuggers offer a glimpse into the execution of your application. In our case, we gonna have a closer look into the debugger provided by Chrome developer tools.

As JavaScript is an interpreted language, a debugger can interact with the current environment by calling functions or change variable values and continue executing the application.

There are three main functions that debuggers provide:

  1. To stop the program execution at a certain point. This is called a breakpoint. Note: In front end JavaScript, you can use the debugger expression to make the browser internal debugger to halt and pop up on when hit.
  2. Single step through the code executing one command after the other.
  3. Inspect or watch the content of variables and influence them by changing the value.

All in all, debuggers are extremely powerful helpers in encircling the reason for a problem or test certain cases.

But there are some aspects to remember:

  1. A debugger can mislead you as you get entangled in detail. Lots of developers propose not to start debugging with a debugger but rather try to circle in the problem by replaying it. If you cannot replay the problem, a debugger is not helping at all.
  2. If you think you fixed the issue, a debugger can help to follow the flow and make sure, you REALLY understand your own fix.
  3. The built-in debugger in browsers like Chrome are quite nifty tools (it is part of the developer tools that you can open by pressing Ctrl+Shift+I). It is worth a few hours to get to know the functions provided. For example, there are several breakpoint types (see here).
Breakpoint Type Use This When You Want To Pause…
Line-of-code On an exact region of code.
Conditional line-of-code On an exact region of code, but only when some other condition is true.
DOM On the code that changes or removes a specific DOM node, or its children.
XHR When an XHR URL contains a string pattern.
Event listener On the code that runs after an event, such as click, is fired.
Exception On the line of code that is throwing a caught or uncaught exception.
Function Whenever a specific function is called.

For example - with loops - conditional breakpoints help to jump on a specific round of loop instead of circling through thousands before coming to the interesting call.

  1. In NodeJS, there is the --inspect runtime flag which enables to connect an inspector client such as Visual Studio Code, Chrome, or node-inspect which is a CLI debugger. The --debug flag is depreciated. Open about:inspect in Chrome to open dedicated devtools for NodeJS.
  2. Be aware of the asynchronous parts of your application. Obviously, single-stepping changes the timing of the program flow.

Key Take-Aways

A debugger is a versatile tool that provides three main services: Stopping the application flow, single-stepping through the code, and inspecting/changing values of variables. There are extremely good debuggers available in browsers and through interfaces in runtimes like NodeJS.

Resources

JavaScript Debugging JavaScript Performance JavaScript Performance

NodeJS Debugging Guide