Browser Developer Tools

The rendered page shows only the final result of your CSS: a white heading, a green button, gray text. It does not show which rule set each value, which rules lost, or which declarations the browser dropped. Every desktop browser includes a set of panels that shows exactly that, called the developer tools (often shortened to DevTools), and they are the first place to look when a style does not do what you expect.

This lesson uses Chrome. Edge is built on the same engine and has the same panels, with only a few different names; for example, it calls the device toolbar Device Emulation. Firefox has the same features under slightly different names, which are given in each section.

A Page with Two Problems

Here is the book club page from the earlier lessons of this chapter, in one file and without its comments, with one change. Someone has added a second .button rule at the end of the style sheet to make the button larger and a lighter green, and that rule contains a typing mistake:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Book Club</title>
  <style>
    body {
      margin: 0;
      font-family: Georgia, serif;
      background-color: linen;
      color: dimgray;
    }

    header {
      background-color: darkgreen;
      color: white;
      padding: 16px;
    }

    nav a {
      color: white;
      margin-right: 16px;
    }

    main {
      padding: 16px;
    }

    .button {
      background-color: darkgreen;
      color: white;
      border: none;
      padding: 10px 20px;
    }

    .button {
      background-color: seagren;
      padding: 12px 24px;
    }
  </style>
</head>
<body>
  <header>
    <h1>Monthly Book Club</h1>
    <nav>
      <a href="#">Home</a>
      <a href="#">Books</a>
      <a href="#">Contact</a>
    </nav>
  </header>
  <main>
    <p>Join us on the first Friday of every month to talk about one book.</p>
    <button class="button">Reserve a seat</button>
  </main>
</body>
</html>

The <meta name="viewport"> line tells phone browsers to lay the page out at the width of the screen; chapter 11 explains it. Save the page as an HTML file and open it in Chrome.

The button grows from 130 by 35 pixels to about 138 by 39 pixels, so the new padding works. However, the button stays dark green instead of turning sea green. Nothing on the page says why. The developer tools do.

Opening the Elements Panel

Right-click the "Reserve a seat" button and choose Inspect. The developer tools open next to the page with the Elements panel selected, and the <button> element is highlighted in the HTML tree on the left. The keyboard shortcuts are F12 or Control+Shift+I on Windows and Linux, and Command+Option+I on a Mac. Control+Shift+C (Command+Shift+C on a Mac) opens the tools in a mode where the next element you click on the page becomes the selected one.

The Elements panel has two halves. The left half is the HTML tree of the page as the browser built it, and clicking any element there selects it. The right half shows the styles of the selected element in several tabs, of which Styles and Computed matter most for CSS.

In Firefox, the same panel is called the Inspector, and Control+Shift+C (Command+Option+C on a Mac) opens it. Its Styles tab is called the Rules view.

Reading the Styles Tab

With the button selected, the Styles tab lists every rule that matches the element, one box per rule. The selector is at the top of each box, and the file name and line number of the rule are at its right edge. Rules that win are listed above rules that lose, so for the two .button rules, the later one in the file is at the top.

Two declarations in the list are drawn with a line through them, and they are crossed out for different reasons.

An overridden declaration is crossed out without any icon. In the lower .button box, padding: 10px 20px is crossed out because the later .button rule also sets padding, and the later rule wins when both selectors are equally specific. The declaration is valid, but it lost to another declaration for the same property.

An invalid declaration is crossed out and has a warning icon next to it. In the upper .button box, background-color: seagren has the icon, because seagren is not a color name (the intended name is seagreen). When the property name is unknown, Chrome crosses out the whole declaration; when only the value is wrong, as here, it crosses out just the value. Because the browser dropped this declaration, the background-color: darkgreen in the lower box is not crossed out: nothing overrides it, so it still applies.

The two kinds of crossed-out text need two different fixes. An overridden declaration means another rule is winning, so you look for that rule higher in the list. A warning icon means the browser could not read the declaration at all, so you correct the spelling. Here, change seagren to seagreen in your file, reload, and the button turns sea green, rgb(46, 139, 87).

Firefox shows both cases the same way: overridden declarations are crossed out, and an invalid value gets a warning icon.

Rules You Did Not Write

Now click the <h1> element in the HTML tree. No rule in the style sheet selects h1, yet its Styles tab is not empty. It contains two kinds of boxes that come from somewhere other than a rule written for the heading.

The first is labeled user agent stylesheet. "User agent" is the formal name for the browser, and this box holds the browser's default styles for h1, such as font-size: 2em and font-weight: bold. You cannot edit these defaults in the panel, but your own rules can replace them.

The second kind is headed Inherited from, followed by an element name. The section Inherited from header holds the header rule. The lesson on the structure of a CSS file showed that text color passes down from an element to the elements inside it, and this box shows where the heading's white color comes from. In the same box, background-color and padding appear in pale text, because those properties do not pass down to the elements inside. Below it, an Inherited from body section holds the body rule, which gives the heading its Georgia font. When you cannot find any rule of yours that sets a value, look in these two kinds of boxes first.

The Computed Tab

The Styles tab shows every candidate value. The Computed tab shows only the final value of each property for the selected element, after the browser has picked the winners and converted every value into a single unit.

Select the heading and open Computed. It lists color as rgb(255, 255, 255), font-size as 32px and margin-top as 21.44px. Each value is now a measurement instead of a word or a multiple: white becomes an rgb value, and the default 2em becomes 32px, because the heading's font size is twice the 16px text size around it. Click the arrow next to a property to see which rule produced it. Hovering over that rule shows a small arrow button that jumps to it in the Styles tab.

Type a property name in the Filter box at the top to find it in the long list. Firefox calls this tab the Computed view.

The Box Model Diagram

At the top of the Computed tab, Chrome draws a set of nested rectangles for the selected element. Select the button again. The center rectangle shows the size of its content, 89.656 by 15 pixels, the space taken by the text "Reserve a seat". Around it is a rectangle for the padding, with 12 at the top and bottom and 24 on the left and right. The two outer rectangles are for the border and the margin, and both show a dash because the button has neither.

The numbers add up to the button's full size: 89.656 plus 24 plus 24 gives the width of 137.656 pixels, and 15 plus 12 plus 12 gives the height of 39 pixels. Hovering over a layer of the diagram also highlights that area on the page itself. The Show sidebar button in the Styles tab opens the same diagram next to the rules, so you can see both at once. Chapter 5 explains these four layers. In Firefox, the same diagram is in the Layout view.

Editing a Value Live

Every value in the Styles tab can be changed in place. Select the <header> element, double-click the value darkgreen in the header rule, type navy, and press Enter. The header turns navy at once, without a reload.

For number values, the arrow keys are faster than typing. Double-click the 16px in padding: 16px, then press the Up arrow key: each press adds 1 pixel, and the header grows taller while you watch. To add a new declaration to a rule, click inside its braces after the last declaration and type the property, then the value.

To switch a declaration off, hover over it and clear the checkbox that appears to its left. Chrome then crosses the declaration out, as it does for an overridden one, and the page shows the result without it. Check the box again to turn it back on.

These edits change only the copy of the page in the browser. Your CSS file on disk does not change, and when you reload the page, every edit disappears; Firefox's documentation states this directly. Use the panel to try values, and once one works, copy it into your file.

Seeing the Page at Phone Width

Click the Toggle device toolbar button at the top left of the developer tools, the icon that shows a phone and a tablet, or press Control+Shift+M (Command+Shift+M on a Mac). The page is now drawn inside a frame of a chosen size, with a toolbar above it.

Choose Responsive in the Dimensions list and type 375 as the width. At that width, the book club paragraph wraps onto two lines, and its height grows from 19 to 38 pixels, while the header stays 129.88 pixels tall because its heading and links still fit.

The device toolbar changes the size of the page, but it is not a phone. Chrome's documentation calls it "a first-order approximation" of how a page looks on a mobile device: the page still runs on your computer's processor, and some parts of a real phone cannot be simulated at all. Check an important page on a real phone as well. In Firefox, the same feature is called Responsive Design Mode, and Control+Shift+M (Command+Option+M on a Mac) opens it.

Key Takeaways

• Right-click an element and choose Inspect to see every rule that matches it in the Styles tab, with the winning rules at the top.
• A crossed-out declaration with no icon was overridden by another rule; a crossed-out declaration with a warning icon is invalid and was dropped.
• The Computed tab shows the single final value of each property, in pixels and rgb values, and the box model diagram at its top shows content, padding, border and margin.
• Edits in the Styles tab apply at once but are lost on reload, so copy a working value into your CSS file.
• The device toolbar shows the page at a phone's width, but it does not replace a test on a real phone.