View source vs Inspect element: the one that matches curl

Open any page, then compare two views of it: view-source: and the Elements panel in DevTools. On many pages they look alike. On a JavaScript-heavy page they can have almost nothing in common. Knowing which view matches your fetcher decides whether a plain HTTP request is enough.

What each view shows

View source (view-source:https://example.com/, or Ctrl+U / Cmd+Option+U) shows the HTML document the server returned. It does not change while you look at it.

Inspect element opens the Elements panel, which shows the DOM: the browser's live tree of nodes, built from that HTML and then changed by scripts. Chrome's DevTools docs describe the panel as a view of the DOM that you can also edit, and MDN's introduction explains that scripts read and change the DOM after the document is parsed.

So the rule is short: view source is what was sent; Inspect is what was built.

Which one your tools see

• curl, Python requests, fetch() in Node: the same as view source. They receive the HTML and stop.
• Playwright, Puppeteer, any headless browser: the same as Inspect, once scripts have run and you waited for the right element.
• Most AI crawlers: the same as view source, because most do not run JavaScript. The AI crawler guide has the details.

A quick comparison you can repeat

URL=https://example.com/
curl -sL "$URL" -o raw.html
grep -oiE '<p[ >]' raw.html | wc -l      # paragraphs in what was sent

Then in DevTools, open the Console on the same page and run:

document.querySelectorAll("p").length    // paragraphs in what was built

On example.com both numbers match, because the page has no scripts that add content. On a client-rendered app the first number is near zero and the second is not. That gap is the content a static fetch cannot read.

When the views differ for other reasons

Not every difference means client rendering:

• Browser fixes to invalid HTML. The parser inserts missing <tbody> or closes open tags, so the DOM has elements the source does not.
• Personalisation. Cookies, language and location can change what the server sends to your browser and to curl.
• Extensions. Browser extensions add nodes to the DOM. Check in a clean profile.

Test it yourself

Pick one page you fetch in production. Search view source for a sentence you can read on screen. If it is there, a static fetch reads that page. If it is not, follow the one-minute test to see whether the text is shipped as JSON before you start a browser.