Setting Breakpoints

In the debugger window, you can set breakpoints in your JavaScript code.

When the code reaches a breakpoint, execution will pause, allowing you to inspect JavaScript values.

Once you’ve examined the values, you can resume the code execution, usually by clicking a play button.

The debugger Keyword

The debugger keyword pauses the execution of JavaScript and invokes the debugging function (if available).

This behaves the same way as setting a breakpoint in the debugger.

If no debugger is present, the debugger statement has no effect.

When debugging is enabled, the code will halt before executing the third line.

Example

Major Browsers’ Debugging Tools

Typically, you can activate debugging in your browser by pressing F12 and selecting “Console” from the debugger menu.

If that doesn’t work, follow these steps:

Chrome

• Typically, you can activate debugging in your browser by pressing F12
• selecting “Console” from the debugger menu.
• If that doesn’t work, follow these steps:

Firefox

• Typically, you can activate debugging in your browser by pressing F12 
• selecting “Console” from the debugger menu.
• If that doesn’t work, follow these steps:

Edge

• Open the browser,
• go to the menu, select “Developer Tools,” 
• then choose “Console.

Opera

• Open the browser,
• go to the menu, select “Developer,”
• then choose “Developer Tools,” and finally select “Console.”

Safari

• In Safari, go to Preferences > Advanced in the main menu.
• Check the box for Enable Show Develop menu in menu bar.
• Once the new Develop option appears in the menu, select Show Error Console.

Did You Know?