Developer Tools: Inspecting a Page

After this lesson you can

• Open the developer tools and find an element in the Elements panel
• Explain how View Source differs from the Elements panel, and why a live edit disappears on reload

Key takeaways

• Press F12 (Cmd+Option+I on a Mac), or right-click part of a page and choose Inspect, to open the developer tools.
• The Elements panel shows the page as a tree the browser built. Open its branches, point at a line to light up that part of the page, and click to choose it.
• View Source shows the file as it arrived. The Elements panel shows what the browser built from it, repairs included.
• A change made in the developer tools happens only in your browser's copy of the page, so it's gone when you reload. Fix the file to keep it.

Your page looks wrong, and your file looks right. Or you've found a site you like and wonder how it's built. Either way, the browser can show you: every browser has a set of developer tools built in, and people who build websites keep them open nearly all day. They're how you stop guessing what the browser did with your HTML and start seeing it.

Open the developer tools

Open any page, then use one of these:

A panel opens beside or below the page. Right-clicking is the quickest way in, because the tools open with the part you clicked already chosen.

These are the names in Chrome and Edge, which this course shows. Firefox opens the same way and calls the panel the Inspector. Safari hides its tools until you turn them on: choose Safari > Settings > Advanced and tick Show features for web developers; after that, Cmd+Option+I works.

The Elements panel: the page as a tree

The Elements panel shows the page's elements the way a file explorer shows folders: each element is a line, and a small triangle beside it opens or closes the elements inside it. Children sit indented under their parent.

• Point at a line, and the browser lights up that element on the page.
• Click a line to choose it. Right-click > Inspect on the page does the same from the other side.

This tree is what the browser builds from your HTML file, and its real name is the DOM tree (DOM stands for Document Object Model). The lesson How the Browser Parses HTML, in Module 5, goes deeper into how it's built. Beside the tree is a Styles pane, which shows how each element is styled; this chapter only needs the tree.

Try it. Open a news site, right-click a headline and choose Inspect. Find the headline's line in the Elements panel, then click the triangle beside its parent to close it, and open it again.

View Source and Inspect: the file and what the browser built

There are two ways to see a page's HTML, and they don't always agree.

• View Source (right-click the page > View Page Source, or Ctrl+U; Cmd+Option+U on a Mac) shows the file exactly as it arrived, mistakes and all. Think of it as the recipe.
• The Elements panel shows what the browser built from that file. Think of it as the dish that came out of the kitchen.

When a file has a mistake, the browser repairs it as best it can and builds the page anyway. Here is a file with two mistakes: the <h1> is never closed, and the <strong> and <em> close in the wrong order.

<h1>The Daily Grind
<p>Your neighborhood coffee shop on Maple Street.</p>
<h2>Menu</h2>
<p><strong><em>Fresh every morning!</strong></em></p>

View Source shows those four lines. The Elements panel shows what the browser built instead:

<h1>The Daily Grind
<p>Your neighborhood coffee shop on Maple Street.</p>
</h1>
<h2>Menu</h2>
<p><strong><em>Fresh every morning!</em></strong></p>

The browser put the paragraph inside the heading, which is why it shows up big and bold, and it closed the <h1> for you only when the <h2> began. It also quietly swapped the end tags of <strong> and <em>. Where the two views disagree, you've found a mistake in your file.

Edit a page live, and lose it on reload

The Elements panel lets you change the page right there:

• Double-click some text in the panel, type something new and press Enter.
• Right-click a line and choose Edit as HTML to change the element itself.
• Choose a line and press Delete to remove the element.

The page changes at once. It's a fast way to try an idea: a shorter heading, a different price. But you only changed your browser's copy. When you reload, the browser fetches the file again and builds the page from it, so every edit is gone. When an idea works, make the same change in your file in VS Code.

Try it. On any page, double-click a heading's text in the Elements panel and change it to your own name. Nobody else sees the change, and nothing on the site is harmed. Reload, and it's back to normal. That's also why a screenshot of a web page proves nothing: anyone can change what their own browser shows.

Check yourself

2 questions to try on the lesson page.

So what

The developer tools show you what the browser really built, not what you hoped it would. Whenever a page surprises you, Inspect it first: the answer is usually right there in the tree.

Key terms

• Developer Tools
• DOM tree

Cheat sheets

• Developer Tools: Inspecting a Page

Related

• Elements and Tags
• The Page Skeleton