Developer tools

Every browser has built-in developer tools (DevTools) — panels that show how the browser understood your HTML and CSS. They show which rules applied to an element, where a margin came from and why a block did not land in its place. This lesson describes Chrome; Firefox, Edge and Safari work in a very similar way.

How to open them

The quickest way is to right-click an element and choose "Inspect". DevTools open right on it.

The Elements panel

On the left of the Elements panel is the DOM tree: the page as the browser built it. Hovering over a line highlights the element on the page. Try it on this example: right-click the button and choose "Inspect":

<style>
  .btn { padding: 10px 20px; border: none; border-radius: 8px; background: steelblue; color: white; }
</style>
 
<button class="btn">Inspect me</button>

The example lives in a separate little window — a frame — so in the tree you end up inside its document.

The element's styles

On the right, in the Styles tab, all the rules that match the selected element are listed — the strongest at the top. A rule that lost the cascade is shown crossed out. Select the paragraph in the example:

<style>
  p { color: steelblue; }
  .note { color: crimson; }
</style>
 
<p class="note">Which color won?</p>

Styles will show that color: steelblue is crossed out — the .note rule overrode it. Values can be changed right there: click the color and type another, and the checkbox to the left of a property turns it off for a while.

The box model and Computed

The Computed tab shows a diagram of the element's box model at the bottom: the content, padding, border and margin with exact sizes. Below it are the final values of all properties after the cascade. If it is unclear where a margin came from, look for it here: clicking a property leads to the rule that set it.

Flex and grid overlays

Next to flex and grid containers the DOM tree shows a flex or grid badge. Clicking it draws grid lines, line numbers and gaps over the page:

<style>
  .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .grid div { padding: 12px; background: lavender; }
</style>
 
<div class="grid">
  <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div>
</div>

Find this block in Elements and turn on the grid overlay — you will see where lines 1–4 run.

Device mode

The button with a phone and a tablet on the DevTools panel (or Ctrl+Shift+M) turns on device mode: the page is shown in a window of a given width, for example 375 pixels, like a phone. This is how media queries are checked without shrinking the browser window. The Rendering tab nearby can also emulate the system dark theme.

Common mistake

Everything you change in DevTools lives only until the page reloads. You found a nice margin, refreshed the page — and it is gone, because the file on disk did not change. Copy the values you find in DevTools into your CSS file right away. A hint: in Styles, each rule shows on its right the file and line where it is written.