Browser DevTools

Every modern browser ships a full debugging suite — the DevTools. They're how you inspect the DOM, debug JavaScript, watch network requests, and find performance problems. Fluency here separates slow debugging from fast.

Opening DevTools

F12, or right-click → Inspect, or Cmd/Ctrl + Shift + I. It docks to the side or bottom of the window. The panels across the top are your toolkit — the four you'll live in are Elements, Console, Network, and Sources.

Elements — Inspect and Edit the DOM

The Elements panel shows the live DOM tree (not your source HTML — the current state after JavaScript has run). You can:

• Hover a node to highlight it on the page.
• Double-click to edit text, attributes, or tags in place.
• In the Styles pane, toggle, edit, or add CSS rules and watch the page update instantly.

Elements → pick a node → Styles pane → tweak CSS live (not saved to your files)

Console — Logs and a Live REPL

The Console shows console.log output, errors, and warnings — and it's a full JavaScript REPL against the current page:

console.log("value:", myVariable)
console.table(arrayOfObjects) // render arrays/objects as a table
console.error("something broke") // red, with a stack trace
$0 // the element currently selected in Elements
document.querySelectorAll("a").length // run any JS against the page

Errors here almost always include a clickable file:line link straight to the source.

Network — See Every Request

The Network panel lists every request the page makes, with status, method, size, and timing. Use it to:

• Confirm an API call fired and inspect its response and headers.
• Spot 404s and 500s (the status-code lesson pays off here).
• See what's slow via the waterfall timing chart.
• Throttle to "Slow 3G" to test on a simulated slow connection.

Network → click a request → Headers / Payload / Response / Timing tabs

Sources — Debug with Breakpoints

console.log debugging works, but breakpoints are faster. In the Sources panel, click a line number to set a breakpoint; execution pauses there so you can inspect every variable:

set breakpoint → reload/trigger → paused → inspect scope, step through

• Step over / into / out to walk through execution line by line.
• Hover any variable to see its current value.
• The Scope pane shows all in-scope variables at the pause point.

Check Your Understanding