Breakpoints pause your program once execution reaches a certain point. You can then step through the program line by line, observing its execution and inspecting the contents of your variables.

There are three ways of creating breakpoints.

  1. From code, using the debugger; statement.
  2. From the browser, using the Developer Tools.
  3. From an Integrated Development Environment (IDE).

Debugger Statement

You can place a debugger; statement anywhere in your JavaScript code. Once the JS interpreter reaches that line, it will stop the script execution, allowing you to inspect variables and step through your code.

Developer Tools

The second option is to add a breakpoint directly into the code from the browser’s Developer Tools.

Opening the Developer Tools

Chrome or Firefox

  1. Press F12 to open Developer Tools
  2. Switch to the Sources tab (Chrome) or Debugger tab (Firefox)
  3. Press Ctrl+P and type the name of your JavaScript file
  4. Press Enter to open it.

Internet Explorer or Edge

  1. Press F12 to open Developer Tools
  2. Switch to the Debugger tab.
  3. Use the folder icon near the upper-left corner of the window to open a file-selection pane; you can find your JavaScript file there.

Safari