debugger in javascript

debugger in javascript

debugger is important one in javascript, which is used for debugging your code in a fast way.

It helps in debugging an unexpected error/output appears.

Syntax

debugger;

1) Keep open your browsers inspect element window before pressing run() button.

double click to execute the html file
Chrome Inspect
double click to execute the html file
Firefox Inspect Element

2) When the debugger statement execute, the execution will be paused and wait for user action.

3) You can then execute the lines one by one by pressing F10 button. We can see the how the values are assigned and execute.

Our in-build editor does not support debugger in firefox, so create a separate .html file and enter the following codes. Then you can debug your code in firefox.

Example

Try Yourself

Place runtime debugger

Without entering the debugger keyword we can place the debugger point during runtime without reloading the web page.

  • First you need to open the inspect element window by pressing F12 or right click and select Inspect(chrome) or Inspect element(firefox).
  • Select the source tab.
  • Select the html page or js file, where you want to put the debugger point.
  • When the debugger point is executed, the program execution is paused and waits for user action.
  • Press F10 to continue the execution line by line.

Browsers doesn't support run time debugger in our in-build editor. Save the following program in a separate .html file and try the above steps.

Example - Copy and save the following code in separate .html file and try the above steps