Javascript debugger in the browser

Debugger keyword - Javascript

Debugger program could be executed inside the browser itself by using the keyword debugger in the javascript code. Use the dev tools to initiate the debugger and by using the debugger buttons, one could execute step by step and debug the program.

Basic debugger initialization

• Insert the keyword debugger in the javascript program
  • It can be at any location
  • The keyword triggers the debugger program to start
• Open the dev tools in the browser
  • Use CTRL + Shift + I shortcut to open dev tools in the browser
  • Refresh using F5 function key to start the debugger

Sample Code

let sample = 88;
console.log('Debugger Initial value : ',sample);

debugger;

sample = 100;
console.log('Debugger after debugger value : ', sample);

Sample debugger in the Chrome browser

Chrome browser debugger sample

Sample debugger in the Firefox browser

Firefox browser debugger sample

Set Breakpoints

Information

• Click the code line number where breakpoint(s) is(are) needed

Sample set debugger breakpoint - Chrome browser

Chrome browser debugger set breakpoint

Execute code step by step

Code execution buttons

• Use the following buttons
  • Resume code execution,
  • Step over next function call
  • Step into next function call
  • Step out of current function call
  • Step
  • Deactivate breakpoints

Sample debugger breakpoint - Chrome browser

Chrome browser debugger run till reaching breakpoint

Debugger code execution

Chrome browser debugger breakpoints sample