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.
There are three main functions that debuggers provide:
debuggerexpression to make the browser internal debugger to halt and pop up on when hit.
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:
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.
--inspectruntime flag which enables to connect an inspector client such as Visual Studio Code, Chrome, or node-inspect which is a CLI debugger. The
--debugflag is depreciated. Open
about:inspectin Chrome to open dedicated devtools for NodeJS.
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.