Debugging

Console Methods

Beyond console.log, use console.table, console.group, console.time, and console.trace for richer debugging.

const users = [
  { name: "Alice", role: "admin" },
  { name: "Bob", role: "user" }
];

console.table(users);

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

function inner() {
  console.trace("Trace called");
}
inner();

Try it Yourself →

Using Breakpoints

The debugger keyword pauses execution in DevTools, letting you inspect variables and step through code.

function calculate(a, b) {
  let sum = a + b;
  debugger;
  let product = a * b;
  return { sum, product };
}

let result = calculate(5, 3);
console.log(result);

Try it Yourself →

Browser DevTools

Modern browsers provide Elements, Console, Sources, Network, and Performance tabs. Use the Sources tab to set breakpoints visually.

document.querySelector("button").addEventListener("click", (event) => {
  console.log("Button clicked", event);
});

console.log("Open DevTools (F12) to inspect");
console.warn("This is a warning");
console.error("This is an error");

Try it Yourself →

← Previous Async Error Handling

Next → The 'this' Keyword