How to Debug JavaScript: Tools and Techniques Every Developer Needs

Beyond console.log: The Full Console API

// Most used
console.log("Value:", someVar);
console.error("Error:", error);    // red in console
console.warn("Warning:", msg);     // yellow in console

// Grouping related logs
console.group("User Data");
  console.log("Name:", user.name);
  console.log("Email:", user.email);
console.groupEnd();

// Tables — great for arrays of objects
console.table(users);  // renders a sortable table

// Timing code
console.time("API call");
await fetchData();
console.timeEnd("API call"); // "API call: 234ms"

// Conditional logging
console.assert(user.age >= 18, "User must be adult", user);

Chrome DevTools: The Real Power

The browser's built-in DevTools are your most powerful debugging tool. Learn these panels:

Sources Panel: Set breakpoints by clicking line numbers. When execution hits a breakpoint, it pauses and you can inspect all variables in scope. Use the Call Stack panel to see exactly how you got to the current line. Step through code with F10 (next line), F11 (into function), or F8 (continue to next breakpoint).

Network Panel: Inspect every HTTP request your page makes. See request headers, response data, status codes, and timing. Filter by type (XHR/Fetch for API calls). If your API call isn't working, check here first — the actual request and response are visible in full detail.

Elements Panel: Inspect the live DOM. See computed CSS values, box model dimensions, and event listeners attached to any element. Right-click any element → Inspect to jump directly to it.

The debugger Statement

// Place debugger anywhere in your code
async function processPayment(order) {
  const total = calculateTotal(order);
  debugger; // execution pauses here when DevTools is open
  // At this point, inspect 'order', 'total', and all local variables
  const result = await chargeCard(total);
  return result;
}

// Conditional breakpoints — only pause when a condition is true
// Right-click a breakpoint in DevTools → "Edit breakpoint"
// Or in code:
if (user.id === 42) debugger; // only pauses for user 42

Reading and Understanding JavaScript Errors

JavaScript error messages tell you exactly what went wrong and where. Learning to read them fully — including the stack trace — is one of the highest-leverage debugging skills.