DevTools: Looking Inside Any Page

Every browser has a set of built-in tools one keystroke away. It is called DevTools, short for developer tools, and it shows a page as the browser actually built it, not as the file says. You can point at any part of a page and see the element behind it, change text and attributes live, and watch what the browser does. Professionals use it to answer almost every "why is the page doing that?", on their own pages and on anyone else's.

Think of an X-ray of a building. It shows the beams and pipes behind the walls, and you can sketch changes on the film to see how they would look, without touching a single brick. DevTools is that X-ray for a web page, and the sketching is the part beginners are most surprised by.

How Do You Open It?

This book gives DevTools instructions for Chrome, the most widely used browser, whose DevTools Edge shares. Firefox and Safari have the same panels under similar names; Firefox, for example, calls the Elements panel the Inspector.

On Windows, press F12, or Ctrl, Shift and I together. On a Mac, press Cmd, Option and I together. The quickest way of all works everywhere: right-click any part of a page and choose Inspect. DevTools opens beside or below the page with that exact element already selected. Safari needs one setting first: in Safari's Settings, on the Advanced tab, turn on the option to show features for web developers. After that, Inspect Element appears when you right-click, as Inspect does in the other browsers.

The Elements Panel: The Page as a Tree

Inspect always opens DevTools on the Elements panel; the keyboard shortcuts open whichever panel you used last. The Elements panel shows the page's elements as a tree, the same nesting you have been writing, with each element's children indented beneath it. A small triangle beside an element expands it to show what is inside, or collapses it again.

Move the mouse over a line in the tree and the matching part of the page lights up, with a small label giving the element's name and size. It works the other way too. The arrow icon at the top left of DevTools, or Ctrl, Shift and C on Windows, Cmd, Shift and C on a Mac, lets you click anything on the page and jump to its line in the tree.

To find something in a large tree, click inside the Elements panel and press Ctrl and F, or Cmd and F on a Mac. A search box opens at the bottom of the panel, and it accepts either plain text or an element name. Along the bottom edge of the panel, a trail of names shows where the selected element sits: its parent, that element's parent, and so on up to html.

View Source and the Live Page Are Not the Same

Browsers have a second way to look at a page's HTML. Press Ctrl and U on Windows, or Cmd, Option and U on a Mac, and a new tab shows the page source: the exact file the server sent, character for character.

The Elements panel shows something different: the tree the browser built from that file. Two things make them differ. The first is the forgiving parser from topic 2, which repairs mistakes as it reads. The second is JavaScript, which can add, remove and change elements after the page has loaded. Chapter 8 does exactly that.

Try it with the broken list from topic 2, the paragraph that tried to hold a list. In the page source you see what you wrote: one paragraph with the list inside it. In the Elements panel you see what the browser built: a paragraph holding only the words "Before you start", then the list beside it, then an empty paragraph that was never in your file. The table from topic 2 shows the same thing: in Elements, a tbody element, short for table body, appears around its rows, because the browser adds one to every table whose rows sit directly inside it.

When the two differ, that difference is information. It tells you the browser disagreed with your HTML, or that a script changed the page, and either one is often the answer to a bug.

Editing in Place

In the Elements panel, double-click any text and it becomes editable: type something new and press Enter, and the page changes at once. Double-click an attribute's value, such as a link's address, and you can change that too. Right-click an element for more, such as editing it as HTML or deleting it.

Those changes live only in the tree in that tab. The file on your computer, or on the server, is untouched, and reloading the page throws every change away. That makes DevTools a safe place to experiment: try a change there, and when it looks right, make the same change in your editor and save.

Here is an exercise to try on any page you like.

1. Open a news site and right-click its biggest headline, then choose Inspect.
2. Look at the trail of names along the bottom of the Elements panel and find main among the headline's ancestors. Most large sites have one; a site without one has shown you a gap in its structure.
3. Double-click the headline's text in the tree, type a headline of your own, and press Enter. The page now shows your headline.
4. Reload the page. The real headline is back, because you changed the browser's copy, never the site.

The Other Panels, in One Line Each

DevTools has more panels than this book needs, and four of them come up again and again. The Styles pane, beside the tree in the Elements panel, lists every CSS rule that applies to the selected element, and Chapter 3 lives in it. The Console panel is where JavaScript reports errors and where you can type JavaScript directly, from Chapter 6. The Network panel lists every file the page requested and whether it arrived, which Chapter 11 uses for data. The Accessibility pane shows how assistive software sees each element, and Chapter 12 uses it to test the site.

From here on, every page that changes your site says where in DevTools to watch the change happen. Keep it open while you work; it costs nothing and answers questions before you have finished asking them.