Skip to main content

Inspecting Pages with DevTools

beginner8 min readLesson 4 of 143

Every browser ships with a professional toolkit: view any page's HTML, live-edit it, and build the debugging habit early.

Professional developers spend a surprising amount of time inside other people's pages — not to copy them, but to understand them. The tool for this is built into your browser.

Opening the toolbox

Right-click anything on a web page and choose Inspect (Chrome/Edge/Firefox), or use the keyboard shortcut that every developer memorizes in week one:

  • macOS: Cmd + Option + I — Windows/Linux: F12 or Ctrl + Shift + I

A panel opens at the side or bottom of your window. That is DevTools. Close it with the same shortcut or the small ✕.

The Elements/Inspector panel

The first tab — Elements in Chrome, Inspector in Firefox — shows the page's live HTML, already nested the way the browser understood it.

  • Click the small triangles to expand and collapse nested elements.
  • Hover over a line and the corresponding part of the page highlights.
  • Double-click text or an attribute and type — you can edit the page live. Nothing you change here is saved; a refresh undoes everything. It is a sandbox for curiosity: change a heading, then refresh and see the original return.

Why this matters for learning

Two habits worth building now:

  1. When a page looks interesting, look at its skeleton. See a clean layout? Inspect it. In this course you will recognize what you find — and by the end you will be able to read a stranger's HTML the way you read a book's table of contents.
  2. When your own page misbehaves, inspect before guessing. DevTools shows the browser's current truth — which element, which attribute — not the code you meant to write. The gap between the two is where bugs live.

Later lessons will send you back here again and again: the Console panel when you learn JavaScript (to see errors), and the Computed/Styles panels when you learn CSS (to see which style rules actually applied and why).

A note on ethics

Viewing a page's source is completely normal — the web is built to be read by browsers and that includes you. What is not okay is copying someone else's content or code and presenting it as your own. Inspect to learn; build your own.

What you learned

  • DevTools opens with Inspect / Cmd+Opt+I / F12
  • The Elements/Inspector panel shows the live HTML and highlights as you hover
  • Live edits are temporary — refresh resets the page
  • Inspect-first is the debugging habit that every later module reinforces

Next module: HTML Foundations — elements, links, images, lists, forms, and the semantics that make pages meaningful and accessible.