How to work with the Javascript Browser debugger (Chrome, Firefox, ...)

About

This article talks about the Javascript debugger present in the browser and shows you how to use it.

Articles Related

Steps by Step

The debugger keyword

The first and easiest way to use the browser debugger is to add inside your Javascript the debugger keyword.

Steps:

Add the debugger word in your code where you want your breakpoint. Example:

// code before
debugger;
// code after

Open the devtool (if the devtool is opened after the page load, the HTML is not present and the debugger will not show the code while debugging)
Refresh the page (F5)
The debugger should stop and open the source tab on the line of the debugger keyword.

Add a breakpoint

You may also add a breakpoint by right clicking on the script line.