From lesson 4-3, an inline style attribute beats an #id rule in the stylesheet.
Inline styles sit above all selectors on the specificity ladder.
| Source | Rank |
|---|---|
an inline style attribute | highest |
an #id rule | below inline |
| a class rule | below ids |
DevTools is where these battles become visible, rule by rule, which is what this lesson covers.
Inspect anything
Half of professional frontend work is comparing what was meant against what the browser actually did. DevTools is the instrument panel every working engineer keeps open for that, and it ships free inside the browser already installed.
Right-clicking any element on any page and choosing Inspect, or pressing F12, or Cmd+Option+I on a Mac, opens DevTools on the Elements panel.
| Pane | Shows |
|---|---|
| DOM tree | the live tree, including JavaScript's changes |
| Styles | every matching rule, most specific first |
| Computed | the final resolved value per property |
The DOM tree is not the HTML file. It is the tree from lesson 8-1, reflecting everything JavaScript has changed since load.
The Styles pane crosses out defeated declarations, which is the lesson 4-3 cascade made visible. Everything there is editable, so text can be double-clicked, declarations unticked, and new ones typed. Changes vanish on refresh, which makes it a safe place to experiment.
Next to Styles sits Computed, which shows the end result after the whole cascade with a box-model diagram from lesson 5-1 at the top. It answers questions of the form 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. Clicking the location jumps to the code.
It is also a live JavaScript prompt attached to the page, which works on any site.
document.querySelector("h1").textContent = "I was here";
| Habit | Payoff |
|---|---|
| check the Console first | a red error names the bug outright |
console.log at each step | finds where reality diverges from the plan |
A red Cannot read properties of null from lesson 8-2 beats ten minutes of staring at CSS, because it says the selector matched nothing rather than that the styling is wrong.
The device toolbar, marked with a phone icon, resizes the viewport freely, which is how the media queries from lesson 7-2 get tested without owning ten phones.
The view that shows resolved values
The view showing the final value of every CSS property after the cascade resolves is Computed.
| Panel or pane | Shows |
|---|---|
| Styles | the competing rules, losers crossed out |
| Computed | one end value per property, plus the box model |
| Console | JavaScript output and errors |
Styles answers why a value won, and Computed answers what the value is. Reaching for the wrong one wastes time in both directions, since Styles is noisy when only the result matters and Computed hides the reason when a rule is being overridden.
Where to look when a button does nothing
A page that loads while a button does nothing sends you to the Console first.
JavaScript errors, such as a selector that matched nothing, appear there in red with the exact file and line, which usually identifies the bug immediately.
| Symptom | First panel |
|---|---|
| nothing happens on click | Console |
| wrong colors or spacing | Elements, then Styles |
| a request failed | Network |
Broken behavior usually means broken JavaScript, and the Console is the panel where console.log output and errors appear. A silent Console with a still-dead button points instead at a listener that was never registered.