Browser DevTools

Browser DevTools (open with F12 or Cmd+Option+I) are a complete debugging suite built into every modern browser. Mastering them makes you dramatically more effective.

The key panels

• Console — view logs/errors and run JavaScript live in the page context.
• Elements — inspect and edit the live DOM and CSS.
• Network — see every request: status, headers, payload, and timing.
• Sources — the JavaScript debugger with breakpoints.
• Performance — profile CPU and rendering to find bottlenecks.
• Memory — find memory leaks via heap snapshots.

Breakpoints — better than console.log

A breakpoint pauses execution at a line so you can inspect everything. In the Sources panel, click a line number to set one. When code hits it, execution freezes and you can:

• Hover over any variable to see its value.
• Inspect the full call stack and all in-scope variables.
• Step through code line by line.

▶ Resume     — continue until the next breakpoint
⤵ Step over  — run the current line, pause at the next
⤓ Step into  — enter the function being called
⤴ Step out   — finish the current function and pause

You can also drop a breakpoint directly in code:

function calculate(x) {
  debugger; // pauses here when DevTools is open
  return x * 2;
}

Conditional breakpoints

Right-click a line number → "Add conditional breakpoint" → enter an expression. Execution only pauses when it's true — perfect for loops:

// Pauses only on the problematic iteration
i === 47

The Network tab

Essential for debugging API calls. For each request you can inspect:

• Status code (404? 500? CORS error?)
• Request headers and payload (is the body correct?)
• Response body (what did the server actually return?)
• Timing (is it slow or timing out?)