Browser DevTools are the tools built into every browser for inspecting and debugging a page. We’ve used them in almost every lesson. This one gives you the map, using the Chrome names. The Chrome DevTools overview links to a guide for every panel.

Open DevTools

Right-click anything and choose Inspect. Or use the keyboard:

Command + Option + I on macOS
Control + Shift + I on Windows and Linux
F12 on many Windows and Linux keyboards

Add J instead of I to open straight to the Console. See the official instructions.

Elements: inspect HTML and CSS

Elements shows the live DOM, not the HTML the server sent. Select a node to see its attributes, matching CSS rules, computed styles, box model, event listeners, and accessibility properties.

Edit HTML and CSS right there to test an idea. The edits vanish on reload. The device toolbar simulates viewports and touch, but it’s not a real phone.

Console: inspect values and run JavaScript

The Console shows logs and errors, and runs JavaScript in the page’s context:

document.querySelector('h1')?.textContent

The methods I use most:

console.log(value)
console.table(items)
console.error(error)
console.time('load')
console.timeEnd('load')

Be careful with pasted code. It runs with full access to your logged-in session.

Network: inspect requests

Open the panel and reload. For each request you see method, status, headers, cookies, bodies, timing, and the code that initiated it.

You can filter, disable the cache, throttle, or go offline. A HAR export shares the whole trace, so read it first: it can contain authorization headers. See the Network panel guide.

Sources: debug JavaScript

Sources is the debugger. Set a breakpoint, trigger the behavior, and execution pauses on that line. Step through, inspect variables, read the call stack. You can also pause on exceptions, DOM changes, and network requests.

Make sure your dev build emits source maps, or you’ll debug minified code. See the Sources panel documentation.

Application: inspect storage and web app state

Everything the browser stores for the site: cookies, local and session storage, IndexedDB, Cache Storage, service workers. Inspect, edit, or clear any of it.

A stale cache or an old service worker shows up here. See the Application panel overview.

Performance and memory

Performance records what the browser does during a load or interaction: long tasks, rendering work, layout shifts. Memory takes heap snapshots for leak hunting. Record one specific interaction, not the whole session.

Lighthouse

Lighthouse audits performance, accessibility, best practices, and SEO. Treat it as a starting list, not a certificate. See the Lighthouse overview.

Changes do not update your source files

Almost everything you change in DevTools is temporary. Copy the edit that worked into your source and verify it through your build.

Overview of the Browser DevTools