What's the difference between console.log() and the debugger; statement?

console.log() prints a snapshot of a value at one point in time without stopping the script, which is fast but limited to whatever you thought to log in advance. debugger; actually pauses execution at that line (when dev tools are open), letting you inspect every in-scope variable interactively and step through the following lines one at a time.

Does debugger; do anything if the user doesn't have developer tools open?

No — if the browser's dev tools panel is closed, a debugger; statement is effectively ignored and execution continues normally. It only pauses the script when dev tools are actively open, which is why it can accidentally ship to production without immediately causing visible problems.

Is it safe to leave debugger; statements in production code?

No. While it won't affect most users (since their dev tools are usually closed), any user or automated tool that does have dev tools open will have their page freeze unexpectedly at that line. Treat debugger; like a temporary tool and remove it before committing, ideally enforced with a linter rule such as ESLint's no-debugger.

JS MASTER CLASS /// MASTER THE ENGINE /// BUILD LOGIC /// ASYNC PATTERNS /// JS MASTER CLASS /// MASTER THE ENGINE ///

Debugging Tools in JavaScript | Web Dev - In-Depth Guide

Learn about The Console & Beyond in this comprehensive JavaScript tutorial for web development. Master the tools to solve complex code issues.

⚡ Total XP: 0|💻 javascript XP: 0

Skill Matrix

UNLOCK NODES BY LEARNING NEW TAGS.

System Hub

Core logic.

Quick Quiz //

What is the primary advantage discussed here?

🚀 LEVEL UP TO SENIOR:Unlock 500+ Advanced Practical Challenges & Exercises.

🎓 COURSERA PARTNER:Earn professional Google, Meta, and IBM certificates to supercharge your resume.

Browser developer tools give you a console, a step-through debugger, and a network monitor for diagnosing exactly what a script is doing at runtime. This lesson focuses on the debugger; statement, which pauses code execution wherever it's placed so you can inspect variables and step through logic line by line.

1Debugging Tools in JavaScript | Web Dev - In-Depth Guide Part 1

Browser dev tools provide a console, debugger, and network monitor. Use 'debugger;' to pause execution and inspect state.

—

const bug = (val) => {
  debugger;
  return val * 2;
};

localhost:3000

Debugging Tools

2Step-by-Step Breakdown

Browser dev tools provide a console, debugger, and network monitor. Use 'debugger;' to pause execution and inspect state.

Level Up 🚀

Advanced cheat sheets, SEO tricks, and interview prep for this topic.

Browser Support

ChromeSupported

Fully supported.

FirefoxSupported

Fully supported.

SafariSupported

Fully supported.

EdgeSupported

Fully supported.

Accessibility (A11y)

1Use the Accessibility Tree Inspector Alongside the Console

Chrome and Firefox dev tools include an Accessibility pane that shows the accessibility tree, computed ARIA roles, and name/description for any element — use it the same way you'd use the console to debug logic, but for debugging what screen readers actually perceive.

// DevTools > Elements > Accessibility pane

SEO Implications

1
Leftover debugger; Statements Can Freeze a Page for Users on Certain Setups
If a debugger; statement accidentally ships to production and a user has their browser's dev tools open, execution pauses indefinitely — for users with accessibility extensions or automated crawlers that open dev tools/inspect the page, this can result in a hung, unresponsive page that never finishes rendering content.

Best Practices

Remove All debugger; Statements Before Committing or Deploying

A debugger; statement left in shipped code has no effect for users without dev tools open, but for users or automated tools that do have them open, it silently pauses execution — treat it exactly like a console.log() you'd never want to ship, and configure a linter rule to catch it.

Use Conditional Breakpoints Instead of Wrapping debugger; in an if

Rather than writing `if (i === 500) { debugger; }` inside a loop, right-click the line number in the Sources panel and add a conditional breakpoint with the same condition — it achieves the same pause without leaving debugging code mixed into your actual source.

Frequent Bugs

THE BUG

A debugger; statement shipped to production goes unnoticed for a long time.

THE FIX

Because debugger; only pauses execution when browser dev tools happen to be open, it can silently sit in shipped code for a long time before someone with dev tools open hits it and gets confused by an unexplained freeze. Add an ESLint rule like no-debugger to fail the build if one slips into a commit.

Real-World Examples

Using debugger; to Inspect a Miscalculated Total

A shopping cart's total price was coming out wrong, and console.log() statements weren't giving enough context about the full state of the cart at the moment of the bug.

function calculateTotal(items) {
  let total = 0;
  for (const item of items) {
    debugger; // Pauses here each iteration so you can inspect `item` and `total`
    total += item.price * item.quantity;
  }
  return total;
}

Interview Prep

?Frequently Asked Questions

Pascual Vila

Frontend Instructor // Code Syllabus

Common Pitfalls & Errors

The Error //

Mutating arrays while iterating over them

// Wrong
items.forEach((item, index) => {
  if (item === 'remove') items.splice(index, 1);
});

// Correct
const newItems = items.filter(item => item !== 'remove');

The Solution //

Modifying an array's length or contents while looping through it (with a for loop or forEach) can cause elements to be skipped. Use methods like filter() or map() instead.

The Error //

Forgetting to await asynchronous functions

// Wrong
const data = fetch('api/data');
console.log(data.json()); // Error

// Correct
const response = await fetch('api/data');
const data = await response.json();

The Solution //

If a function returns a Promise, you must use 'await' (or .then) to get its resolved value. Otherwise, your variable will hold a Promise object instead of the data.