DevTools: inspect, computed styles, console

Inspect anything

Half of professional frontend work is comparing what you meant against what the browser actually did — and DevTools is the instrument panel every working engineer keeps open for exactly that. It ships free inside the browser you already have.

Right-click any element on any page and choose Inspect (or press F12, or Cmd+Option+I on a Mac). DevTools opens on the Elements panel:

• One side shows the live DOM tree. Not your HTML file, but the tree from lesson 8-1, including everything JavaScript has changed since load.
• The other side shows the Styles pane: every CSS rule matching the selected element, most specific first, with defeated declarations crossed out. The lesson 4-3 cascade, visualized.
• Everything is editable. Double-click text to change it, untick declarations, type new ones. Changes vanish on refresh, which makes this the perfect experiment sandbox.

Next to Styles sits Computed: the final resolved value of every property after the whole cascade, with a box-model diagram (lesson 5-1) at the top. It answers questions like why is this element 236px wide.

The console and the device toolbar

The Console panel is where console.log output lands (as promised back in lesson 1-1), and where errors appear in red with a file and line number. Click the location to jump to the code.

It is also a live JavaScript prompt attached to the page. Try this on any site:

document.querySelector("h1").textContent = "I was here";

Two habits to build now:

• When anything misbehaves, check the Console first. A red Cannot read properties of null (lesson 8-2) beats ten minutes of staring at CSS.
• console.log values at each step until you find where reality diverges from your plan. Same debugging you already know, now inside the page.

Finally, the device toolbar (the phone icon) resizes the viewport freely, which is how you test the media queries from lesson 7-2 without owning ten phones.