How to Set Breakpoint in JavaScript: Simple Guide

To set a breakpoint in JavaScript, open your browser's developer tools, go to the Sources tab, and click on the line number where you want the code to pause. Alternatively, insert the debugger; statement directly in your code to trigger a breakpoint when the code runs.

Syntax

There are two main ways to set breakpoints in JavaScript:

• Using developer tools: Click the line number in the source code panel to set a breakpoint.
• Using the debugger; statement: Insert debugger; in your code where you want execution to pause.

The debugger; statement acts like a manual breakpoint and pauses execution if developer tools are open.

javascript

function greet(name) {
  debugger;
  console.log('Hello, ' + name + '!');
}

greet('Alice');

Output

Hello, Alice!

Example

This example shows how to use the debugger; statement to pause execution and inspect variables.

javascript

function calculateSum(a, b) {
  debugger; // Execution will pause here if dev tools are open
  return a + b;
}

const result = calculateSum(5, 7);
console.log('Sum:', result);

Output

Sum: 12

Common Pitfalls

Common mistakes when setting breakpoints include:

• Not opening developer tools before running code, so debugger; does not pause execution.
• Setting breakpoints on lines without executable code (like empty lines or comments), which won't pause.
• Forgetting to remove debugger; statements from production code.

javascript

/* Wrong: breakpoint on empty line does nothing */
function test() {

  console.log('Test');
}

/* Right: breakpoint on executable line */
function test() {
  debugger;
  console.log('Test');
}

Quick Reference

Tips for setting breakpoints effectively:

• Use developer tools (F12 or Ctrl+Shift+I) to open Sources panel.
• Click line numbers to toggle breakpoints visually.
• Use debugger; in code for manual breakpoints.
• Remember to remove debugger; before deploying code.
• Use conditional breakpoints in dev tools for advanced debugging.

Key Takeaways

Open browser developer tools and click line numbers to set breakpoints visually.

Insert debugger; in your code to pause execution programmatically.

Breakpoints only pause code if developer tools are open.

Avoid setting breakpoints on non-executable lines like empty lines or comments.

Remove debugger; statements before deploying your code.