JavaScript Debugging

Console Methods

console.log() is the most commonly used debugging method, printing messages and values to the browser's developer console. You can pass multiple arguments separated by commas, and it will display them all. console.log() is invaluable for checking variable values, tracking code execution flow, and understanding what your code is doing at specific points. It's the quickest way to debug, though for production code you should remove or disable console statements to avoid exposing internal information.

console.error() prints error messages to the console with special formatting (typically red text with an error icon). Unlike console.log(), error messages are categorized separately in most browser dev tools, making them easier to filter and find. You should use console.error() for actual errors or exceptional conditions, not for general logging. This helps you distinguish between informational messages and actual problems when debugging.

console.warn() prints warning messages with special formatting (typically yellow or orange text with a warning icon). Warnings indicate potential issues that aren't errors but deserve attention—deprecated features, unusual values, or risky operations. Like errors, warnings are categorized separately in dev tools, so you can filter your console output by log level (info, warn, error). This organizational structure makes debugging more efficient.

console.table() displays arrays and objects as a formatted table in the console, making complex data structures much easier to read and understand. For an array of objects (like a list of users), console.table() creates a table with columns for each property and rows for each object. This is far more readable than nested object output from console.log(). You can specify which columns to display as a second argument, helping you focus on relevant data.

console.time() and console.timeEnd() work together to measure how long code takes to execute. Call console.time('label') before the code you want to measure, then console.timeEnd('label') after it, using the same label string. The console will display the elapsed time in milliseconds. This is essential for performance debugging—identifying slow operations, comparing different implementations, or finding bottlenecks. You can have multiple timers running simultaneously with different labels.

// console.log
console.log("Debug message");
console.log("Value:", 42);

// console.error
console.error("This is an error!");

// console.warn
console.warn("This is a warning");

// console.table
const users = [
  { name: "John", age: 30 },
  { name: "Jane", age: 25 }
];
console.table(users);

// console.time
console.time("loop");
for (let i = 0; i < 1000000; i++) {}
console.timeEnd("loop");

Debugger and Breakpoints

The debugger keyword is a JavaScript statement that pauses code execution when the browser's developer tools are open. When JavaScript encounters debugger;, it stops execution at that exact line, just as if you had set a breakpoint in the dev tools. This is powerful for debugging because you can place it anywhere in your code, even in conditional blocks or loops, and it activates only when dev tools are open. When execution pauses, you can inspect variables, step through code, and examine the call stack.

Browser developer tools (Chrome DevTools, Firefox Developer Tools, Safari Web Inspector) allow you to set breakpoints visually by clicking on line numbers in the Sources/Debugger panel. When code execution reaches a breakpoint, it pauses automatically, letting you examine the program state at that exact moment. Breakpoints are non-invasive—you set them in the browser without modifying your source code. You can enable/disable breakpoints, set conditional breakpoints that only trigger when an expression is true, and even set breakpoints on DOM mutations or XHR requests.

Once execution is paused at a breakpoint or debugger statement, you can step through code line by line using the step controls: Step Over executes the current line and moves to the next, Step Into enters into function calls to debug them, Step Out executes the rest of the current function and returns to the caller, and Continue/Resume runs until the next breakpoint. This granular control lets you trace exactly how your code executes and where problems occur.

When paused at a breakpoint, you can inspect all variables in the current scope—local variables, function parameters, closure variables, and global variables. The Scope panel in dev tools shows all variables organized by scope (Local, Closure, Global). You can hover over variables in the source code to see their values, or expand objects and arrays in the Scope panel to explore their structure. You can even modify variable values in the console while paused, allowing you to test different scenarios without changing your code.

Watch expressions let you monitor specific variables or expressions as you step through code. You add expressions to the Watch panel, and the dev tools continuously evaluate and display them as you debug. This is incredibly useful for tracking how a value changes throughout execution, comparing multiple related values, or evaluating complex expressions. For example, you might watch this.state.count, array.length, and count > threshold simultaneously to understand how they interact. Watch expressions update automatically with each step, giving you real-time insight into your program's behavior.

// Using debugger
function calculateSum(a, b) {
  debugger; // Execution pauses here
  const sum = a + b;
  return sum;
}

calculateSum(5, 10);

// Conditional debugging
function process(value) {
  if (value < 0) {
    debugger; // Only break if negative
  }
  return value * 2;
}

// Try-catch for error info
try {
  riskyFunction();
} catch (error) {
  console.error("Error name:", error.name);
  console.error("Error message:", error.message);
  console.error("Stack trace:", error.stack);
}