Debugging

1 min read | JavaScript Tutorial

⭐

Want the full learning experience?

Get structured courses, certificates, projects, and instructor support with LabsICT Pro.

Explore Pro Courses

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();

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);

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");

Concepts Explained