How to Debug JavaScript Errors Using Browser DevTools — Full Guide

// Standard log — use for general debugging
console.log('[ComponentName]', typeof data, data);

// Table — renders arrays of objects as a formatted table
console.table(users);  // Much easier than console.log for arrays of objects

// Group related logs together (collapsible in DevTools)
console.group('fetchUser request');
console.log('userId:', userId);
console.log('response:', response.status);
console.groupEnd();

// Time performance of a code section
console.time('data processing');
processLargeDataSet(data);
console.timeEnd('data processing'); // prints: "data processing: 245ms"

// Assert — only logs if condition is false
console.assert(user.id > 0, 'User ID must be positive', user);

// Log with a stack trace (where was this called from?)
console.trace('called from here');

// Error and warning (different colors/icons in DevTools)
console.error('Something failed:', error.message);
console.warn('Deprecation warning: use newMethod() instead');

// HOW TO SET A LINE BREAKPOINT:
// 1. Open Sources panel (F12 → Sources tab)
// 2. Find your file in the left sidebar, or press Ctrl+P (Cmd+P Mac) to search
// 3. Click any line number → a blue dot appears
// 4. Reload the page or trigger the code → execution pauses at that line
// 5. All variables in scope are visible in the right panel (Scope section)
// 6. Hover over any variable in the code to see its current value

// STEPPING CONTROLS (when paused at a breakpoint):
// F8 / ▶ : Resume — continue until the next breakpoint
// F10 / →: Step Over — execute this line, move to next line in same function
// F11 / ↓: Step Into — enter the function being called on this line
// Shift+F11: Step Out — finish current function, return to caller
// Ctrl+F8:  Deactivate all breakpoints temporarily

// Example: debugging an async function
async function fetchUser(userId) {
  // SET BREAKPOINT HERE → pauses before fetch executes
  // Check: is userId what you expect?
  const response = await fetch(`/api/users/${userId}`);

  // SET BREAKPOINT HERE → pauses after fetch completes
  // Check: response.status, response.ok
  const user = await response.json();

  // SET BREAKPOINT HERE → inspect the parsed user object
  return user;
}

// CONDITIONAL BREAKPOINT: right-click line number → "Add conditional breakpoint"
// Only pauses when the condition is true:
// userId === undefined     (debug only when userId is missing)
// items.length > 100       (debug only with large datasets)
// i === 499                (debug only at loop iteration 500)

// DOM BREAKPOINT: Elements tab → right-click an element → "Break on..."
// Pauses when JavaScript modifies the DOM element — great for "why did this change?"

// XHR/FETCH BREAKPOINT: Sources → XHR/fetch Breakpoints → click + → add URL pattern
// Pauses on any fetch/XHR matching the URL pattern (e.g., "api/users")

// EXCEPTION BREAKPOINT: Pause on exceptions button (⏸ icon in Sources)
// Pauses on any uncaught exception — shows you exactly where the error was thrown

// ─── TypeError: Cannot read properties of undefined ─────────────────────────
// 1. Console → click the file:line link in red error message
// 2. Sources → set breakpoint at the reported line
// 3. When paused: hover over the undefined variable, or check Scope panel (right)
// 4. The variable is null or undefined → trace back to where it should be assigned
// 5. Common causes: async data not loaded yet, API response different shape expected

// ─── Network/Fetch Error ─────────────────────────────────────────────────────
// 1. Network tab → look for the failed request (shown in red)
// 2. Check the Status code:
//    401 → authentication missing or expired
//    403 → authenticated but no permission
//    404 → URL is wrong or resource doesn't exist
//    422 → request body failed validation (check Payload tab)
//    500 → server crashed (check server logs, not browser)
//    CORS → response has no CORS headers (check Console for CORS error details)
// 3. Click the request → Response tab → see what server actually returned
//    (often an error message or HTML error page instead of JSON)

// ─── Async Race Condition (data sometimes undefined) ─────────────────────────
// 1. Sources → click the "Pause on exceptions" button (⏸)
// 2. Reproduce the bug → code pauses at the crash point automatically
// 3. Call Stack panel shows every function in the chain
// 4. Step up the call stack to find where data should have been set
// 5. Look for: missing await, promise not caught, state set before async resolves

// ─── "Unexpected token '<'" — API returning HTML instead of JSON ──────────────
// 1. Network tab → find the failing API request
// 2. Click request → Response tab
// 3. You'll see an HTML error page (the server is returning its error page)
// 4. Check the status code: 404 (wrong URL), 500 (server error), 302 (redirect to login)

// ─── Memory Leak (page slows over time) ──────────────────────────────────────
// 1. Memory tab → Take heap snapshot (initial state)
// 2. Use the application for a few minutes
// 3. Memory tab → Take another heap snapshot
// 4. Click "Comparison" in the dropdown → see objects that increased
// 5. Common culprits: event listeners not removed, global arrays growing, closures