🕵️ Debugging in the Browser

The Debugging Mindset

The tools matter less than the approach. The difference between someone who solves a bug in 20 minutes and someone who thrashes for hours is rarely knowledge — it's method.

Follow this loop for any bug. Notice it cycles: a wrong hypothesis sends you back to gather more evidence, not back to square one.

🩺 A useful analogy: This is how doctors work. They observe symptoms (reproduce), narrow to an affected system (isolate), run tests (gather), reach a diagnosis (hypothesis), confirm with more tests (test), and only then treat (fix). Prescribing before diagnosing is malpractice — in medicine and in code.

Types of Bugs

Naming the category of a bug immediately narrows which tool will find it fastest.

Syntax errors

Code that breaks the language's grammar and won't run at all. The console gives you a line number — these are the easiest to fix.

// Syntax error: missing closing parenthesis on the parameter list
function calculateTotal(price, quantity {
  return price * quantity;
}

Runtime errors

The code is valid but blows up while running — often reading a property of undefined.

const user = getUserData();  // returns undefined in some cases
console.log(user.name);      // TypeError: Cannot read properties of undefined (reading 'name')

Logical errors

No error is thrown — the code simply does the wrong thing. These are the trickiest and need console logging or breakpoints to expose.

const items = ['apple', 'banana', 'cherry'];
// Off-by-one: stops before the last item because of `length - 1`
for (let i = 0; i < items.length - 1; i++) {
  processItem(items[i]);   // 'cherry' is never processed
}

Asynchronous bugs

Timing problems: using data before it has arrived, unhandled rejections, race conditions.

// Bug: render runs immediately, without waiting for the fetch
fetchUserData();
renderUserProfile();   // data isn't here yet

// Fix: await the data first
const user = await fetchUserData();
renderUserProfile(user);

DOM & rendering issues

Selecting elements that don't exist yet, event-handling surprises, styling conflicts. Best diagnosed in the Elements panel.

// Wait for the DOM before querying it
document.addEventListener('DOMContentLoaded', () => {
  const button = document.getElementById('submit-button');
  button.addEventListener('click', handleSubmit);
});

Network & integration issues

API shape mismatches, CORS, auth failures. A classic mistake is not checking whether the response actually succeeded:

const response = await fetch('/api/data');
if (!response.ok) {
  // A 404 or 500 still resolves the promise — you must check response.ok
  throw new Error(`Request failed: ${response.status}`);
}
const data = await response.json();

Console Debugging

The console is far more than console.log. Learning its full toolkit turns noisy output into readable evidence.

Choose the right log level

Using info, warn, and error instead of plain log lets you filter the console by severity later:

console.info('Application initialized');
console.warn('Deprecated function used');
console.error('Failed to load resource');

Power methods

// Render an array of objects as a sortable table
console.table(usersArray);

// Group related logs into a collapsible section
console.group('User Authentication');
console.log('Checking credentials...');
console.log('Validation passed');
console.groupEnd();

// Log ONLY when an assertion fails
console.assert(user.isLoggedIn, 'User is not logged in');

// Time an operation
console.time('processing');
processLargeDataSet();
console.timeEnd('processing');   // processing: 812.4 ms

// Print the call path that reached this point
console.trace('validateUser called from');

One developer chasing a slow checkout wrapped functions in console.time()/console.timeEnd() and discovered address validation was the culprit — a regular expression causing catastrophic backtracking that no error message would ever have revealed.

Log with context, not vibes

// Vague — useless at 2 a.m.
console.log('Failed');

// Context-rich — actionable
console.error('Payment processing failed', {
  orderId: order.id,
  errorCode: response.code,
  message: response.message,
});

Breakpoint Debugging

Logging tells you values after the fact. Breakpoints let you freeze time and inspect the entire program state at the exact moment something goes wrong — the single most powerful skill in this lesson.

Types of breakpoints

• Line breakpoint: click a line number in the Sources panel.
• Conditional breakpoint: right-click a line → "Add conditional breakpoint" → enter an expression like quantity < 0. It only pauses when true.
• DOM breakpoint: in Elements, right-click an element → "Break on..." → subtree modification, attribute change, or node removal.
• XHR/Fetch breakpoint: Sources → XHR/Fetch Breakpoints → add a URL substring to pause when that request fires.
• Event listener breakpoint: Sources → Event Listener Breakpoints → tick an event like click.
• Exception breakpoint: the "Pause on exceptions" button pauses right where an error is thrown.

A developer once caught a form mysteriously resetting itself by setting a DOM breakpoint on "subtree modifications" of the form — it froze on the exact line where a third-party analytics library was clobbering the fields.

Stepping controls

• Resume (F8): run until the next breakpoint.
• Step over (F10): run the current line, don't dive into its function calls.
• Step into (F11): descend into the function call on this line.
• Step out (Shift+F11): finish this function and return to its caller.

Inspecting state while paused

While frozen you can hover any variable for its value, read the Scope pane (Local / Closure / Global), add Watch expressions (JSON.stringify(cart), typeof x, arr.length), read the Call Stack, and run code in the console in the paused context.

DOM, CSS & Network Issues

DOM & CSS debugging

Right-click any element and choose Inspect (or Ctrl+Shift+C). From the Elements panel you can:

• Force states like :hover, :focus, :active to test styles that are hard to trigger manually.
• Read the Styles pane — crossed-out rules were overridden by higher specificity.
• Open the Computed tab to see the final value and the box model when sizing looks wrong.
• Toggle individual properties on and off to test a fix live.

A responsive layout that broke at certain widths turned out to have conflicting max-width rules — one from a CSS framework, one custom — which the Computed tab exposed instantly by showing which rule actually won.

Rendering & performance overlays

Press Esc to open the drawer, then the Rendering tab. Enable Paint flashing to see what repaints and Layout Shift Regions to see what jumps. A team chasing scroll jank found the whole page repainting on every scroll because of a fixed element with a transparent background; promoting it with will-change: transform gave it its own layer and fixed the jank.

Network debugging

For API and integration bugs, the Network panel is home base. You can inspect a request's headers and payload, verify the response shape, throttle the connection, and block specific requests to test fallbacks. You can also fire test requests straight from the console:

// Test an endpoint without touching the UI
const res = await fetch('/api/users', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ name: 'Test User' }),
});
console.log(res.status, await res.json());

A CORS error is one of the most common and most confusing — it shows up as a console message like "blocked by CORS policy: No 'Access-Control-Allow-Origin' header." That's a server configuration issue, not something the browser lets you patch from the client.

Error Handling & Prevention

The best bug is the one that never happens. Beyond fixing issues, robust error handling keeps small failures from cascading into broken pages.

Handle errors, including async ones

// Synchronous risk
try {
  const data = JSON.parse(jsonString);
  processData(data);
} catch (error) {
  console.error('Failed to process data:', error.message);
  showUserFriendlyError("We couldn't process your data. Please try again.");
}

// Async with async/await + try/catch
async function loadUserProfile() {
  try {
    const user = await fetchUserData();
    displayUserProfile(user);
  } catch (error) {
    console.error('Failed to fetch user data:', error);
    showFallbackUI();
  }
}

Catch what slips through globally

window.addEventListener('error', (event) => {
  logErrorToService({
    message: event.message,
    source: event.filename,
    line: event.lineno,
    stack: event.error?.stack,
  });
});

window.addEventListener('unhandledrejection', (event) => {
  console.error('Unhandled promise rejection:', event.reason);
});

Program defensively with modern JavaScript

// Optional chaining + nullish coalescing replace fragile && chains
const userName = user?.profile?.name ?? 'Guest';

// Validate inputs at the boundary
function calculateTotal(items) {
  if (!Array.isArray(items)) {
    throw new TypeError('items must be an array');
  }
  return items.reduce((total, item) => {
    if (typeof item.price !== 'number' || typeof item.qty !== 'number') {
      throw new TypeError('each item needs numeric price and qty');
    }
    return total + item.price * item.qty;
  }, 0);
}

Custom error classes for clarity

class ValidationError extends Error {
  constructor(message, field) {
    super(message);
    this.name = 'ValidationError';
    this.field = field;
  }
}

class ApiError extends Error {
  constructor(message, statusCode, endpoint) {
    super(message);
    this.name = 'ApiError';
    this.statusCode = statusCode;
    this.endpoint = endpoint;
  }
}

Hands-on Exercise & Quiz

let cart = [];

function addToCart(productId, name, price) {
  const existingItem = cart.find(item => item.productId === productId);
  if (existingItem) {
    existingItem.quantity += 1;
  } else {
    cart.push({ productId, name, price, quantity: 1 });
  }
  updateCartDisplay();
}

function updateQuantity(productId, newQuantity) {
  cart = cart.filter(item => {
    if (item.productId === productId) {
      item.quantity = newQuantity;
      return newQuantity > 0;   // Bug 1 lives here
    }
    return true;
  });
  updateCartDisplay();
}

function calculateTotal() {
  return cart.reduce((total, item) => {
    return total + item.price + item.quantity;   // Bug 2 lives here
  }, 0);
}

Summary

📚 Further Reading

• Chrome DevTools — Debug JavaScript
• MDN — Control flow and error handling
• Julia Evans — Debugging tools I love

🚀 What's Next?

You can now diagnose and fix issues methodically. The next lesson — Project Structure and Organization — is about preventing whole classes of confusion by giving your code a clean, predictable home from day one.