Debugging with DevTools and the Console

The console object offers more than just console.log, and browser DevTools provide far more powerful tools for tracking down bugs.

console.table([{ id: 1, name: "A" }, { id: 2, name: "B" }]);
console.warn("This is a warning");
console.error("Something went wrong");

function calculate(x) {
  debugger; // pauses execution here when DevTools is open
  return x * 2;
}

console.table() renders arrays of objects as an actual table, far easier to scan than nested log output. console.warn() and console.error() are styled distinctly in the console and are easy to filter, which helps important messages stand out from routine logs.

The debugger statement pauses execution exactly where it's placed whenever DevTools (or Node's --inspect flag) is open, letting you step through code line by line and inspect the call stack and every variable's current value at that point — far more effective for tracking down tricky bugs than scattering console.log calls throughout a file and re-running repeatedly.