Inspecting Web Pages

Browser DevTools are your X-ray glasses — they reveal the HTML, CSS, and JavaScript behind any page. For scraping, that’s a superpower.

Scraping means telling your code exactly what to grab. DevTools let you locate elements, read the page structure, and spot IDs and classes to target.

Open DevTools fast: right-click and pick “Inspect,” or hit F12 (Windows/Linux) or Cmd+Opt+I (Mac).

The Elements panel is home base — it shows the live HTML (the DOM): nested tags like <div>, <p>, and <a>, so you see how content is organized.

Use the inspector (the arrow-in-a-box icon): click it, then click anything on the page, and DevTools highlights its exact HTML. Super handy.

The HTML is a tree: elements have parents and children. Expand and collapse nodes to pinpoint exactly where your target data lives.

HTML attributes are scraping gold — especially id (unique) and class (shared). Watch href, src, and data-* too; they tell your scraper what to find.

The Styles panel shows the CSS on the selected element. Not for extraction directly, but it helps confirm you’re targeting the right element for CSS selectors.

The Console is a direct line to the page’s JavaScript — run quick commands, see errors, and test small interactions before you script them.

You've learned about several key panels in browser Developer Tools. Which of the following statements about their functions are TRUE?

Nice! You can open DevTools, read HTML in the Elements panel, use the inspector, and lean on id/class attributes to find scrape targets.