JS Debugging

JavaScript Debugging: Console API, Breakpoints, & debugger

Debugging is the process of identifying, diagnosing, and fixing code errors. JavaScript provides rich console logging APIs, devtool breakpoints, and the inline debugger statement.

Debugging Strategy Matrix

flowchart TD
    DebugProcess["Debugging Strategy"] --> ConsoleLogs["Console Logging: console.log(), console.table(), console.group()"]
    DebugProcess --> Breakpoints["Browser DevTools Breakpoints (Sources Tab)"]
    DebugProcess --> DebuggerStmt["Inline 'debugger;' Statement (Pauses execution thread)"]

Console API Utilities

Practical Code Example

// Demonstrating Console API features and performance timing

// 1. Formatted Tabular Output
const developers = [
  { id: 1, name: "Maksudur", role: "Architect" },
  { id: 2, name: "Sarah", role: "Frontend Developer" }
];
console.log("--- Console Table Output ---");
console.table(developers);

// 2. Grouped Console Logs
console.group("User Auth Pipeline");
console.log("Step 1: Validating credentials...");
console.log("Step 2: Generating JWT Token...");
console.groupEnd();

// 3. Execution Time Benchmarking
console.time("Array Transformation");
const largeList = Array.from({ length: 100000 }, (_, i) => i);
const doubledList = largeList.map(n => n * 2);
console.timeEnd("Array Transformation");

// 4. Conditional Assertions
console.assert(developers.length > 5, "Developer team count is less than 5!");

// 5. Inline Breakpoint Trigger (Un-comment to trigger DevTools breakpoint)
function debugMe() {
  const x = 10;
  // debugger; // Execution thread pauses here if DevTools is open!
  return x * 2;
}
debugMe();

Best Practices & Gotchas

• Use console.table() for Arrays of Objects: console.table() presents complex arrays in filterable tables, making payload inspection fast.
• Remove Debug Statements Before Production: Strip console.log() and debugger statements from production bundles using build tools like Terser or Vite plugins.
• Leverage Conditional Breakpoints: In Chrome/Firefox DevTools, right-click any line number to set a conditional breakpoint that triggers only when a specific expression is true.

Self-Check Challenge

What does console.assert(1 === 2, "Validation Failed"); output in the developer console?