“View Source” and “Inspect Element” both show you a page’s HTML, so they’re easy to confuse — but they show two different things, and on modern websites the difference is huge. Understanding it explains why the code you see sometimes doesn’t match the page in front of you.
The short answer
- View Source (
Ctrl+U) shows the original HTML the server sent to your browser — a static snapshot of the response, before any JavaScript runs. - Inspect Element (
F12/ right-click → Inspect) opens Developer Tools and shows the live DOM — the current structure of the page after JavaScript has added, removed, and modified elements.
View Source is the raw ingredient list. Inspect Element is the finished dish.
Why they look different
Two decades ago, most pages were sent fully-formed from the server, so View Source and the rendered page matched almost exactly. Today, many sites are built with frameworks like React, Vue, and Angular that send a minimal HTML shell and then construct the visible page in your browser with JavaScript.
On those sites:
- View Source might show little more than an empty
<div id="root"></div>and some script tags. That minimal shell genuinely is what the server sent. - Inspect Element shows the full, populated page — headings, articles, menus — because it reflects the DOM after JavaScript finished building it.
That’s why you can open View Source on a busy-looking web app and find almost no content: the content was never in the source; it was assembled live.
When to use each
| Use View Source when you want to… | Use Inspect Element when you want to… |
|---|---|
| See exactly what the server returned | See the live, rendered page structure |
Check <meta> tags, titles, and structured data for SEO |
Experiment with styles and layout in real time |
| Debug server-side output or a CMS template | Find an element that JavaScript added after load |
| Read comments or hidden markup in the response | Watch how the DOM changes as you interact |
| Copy the raw HTML response | Test edits before changing real code |
A concrete example
Open a simple, server-rendered page like example.com:
- View Source and Inspect Element look nearly identical, because there’s no JavaScript rebuilding the page.
Now open a large single-page app:
- View Source shows a short shell.
- Inspect Element shows hundreds of elements that only exist because scripts created them.
Same page, two very different views — and now you know why.
Where ViewSource.net fits
ViewSource.net shows the original server HTML — the same thing as View Source, but fetched server-side and presented with syntax highlighting, a formatted view, and copy/download. It’s ideal when you want the true response (for SEO checks or debugging) rather than the live DOM. When you need the rendered DOM instead, reach for Inspect Element in Chrome, Firefox, Safari, or Edge.
Frequently asked questions
What is the difference between View Source and Inspect Element? View Source shows the raw HTML the server sent; Inspect Element shows the live DOM after JavaScript runs.
Why does Inspect Element show more than View Source? Because JavaScript builds most of the visible content in the browser, after the initial server response that View Source captures.
Which should I use? View Source for the true server response (SEO, meta tags, debugging); Inspect Element for the live, rendered page.
Want the original server HTML without opening DevTools? Paste any URL into ViewSource.net.