Short answer: press
Ctrl+U(Cmd+Option+Uon a Mac) to see the HTML the server sent, or open DevTools and copy the<html>node's outerHTML to get what the browser built from it. On a server-rendered page the two are close. On an app-style page, View Source can return almost nothing: in our test, one page went from 56 characters of text in the source to 256 in the browser, and its real content was not in either one.
Most guides to this question stop at naming the shortcuts. They rarely show what each shortcut returns, so here is one measurement. We ran both methods on four public pages on November 2, 2026, and published the numbers and the script so you can repeat it on your own page.
What we measured
Two methods, four pages, same counting rules.
- Source: the HTML response, fetched with
curl. That is the same document View Source shows, apart from any differences a server makes between clients. - Rendered DOM:
document.documentElement.outerHTMLfrom a real Chromium session, read a few seconds after load. That is what you get from DevTools with Copy → Copy outerHTML.
For each page we recorded file size, element count, and the length of the text inside <body>, leaving out <script> and <style> contents.
Source vs rendered DOM, page by page
| Page | Type | Source size | Rendered size | Elements (source → rendered) | Body text (source → rendered) |
|---|---|---|---|---|---|
example.com | Tiny document page | 577 B | 2,358 B | 10 → 22 | 156 → 905 chars |
en.wikipedia.org/wiki/HTML | Large server-rendered article | 808,924 B | 1,070,137 B | 8,069 → 8,178 | 80,987 → 81,538 chars |
excalidraw.com | Canvas web app | 6,856 B | 61,413 B | 52 → 338 | 56 → 256 chars |
copyweb.net/pricing | Next.js marketing page | 190,286 B | 214,174 B | 640 → 646 | 3,770 → 3,878 chars |
Element counts come from two different parsers (Python's html.parser and the browser), and browsers add implied tags, so treat small gaps as noise. A difference of a few elements means nothing. A 6x jump does.
Three things the numbers show
On a server-rendered page, source is nearly the whole story
After rendering, Wikipedia gained under 1% more body text and our own pricing page under 3%, and both gained under 2% more elements. Wikipedia's byte count still rose by about 32%, yet almost none of that was content.
If your goal is to read the markup or lift one section, View Source is the faster tool on pages like these, and you lose almost nothing by using it.
A small page can still change a lot
example.com looks like the simplest possible case, and it is not. The source holds one paragraph plus a single <script src=/s.js> tag. After that script runs, the page has more than twice the elements and nearly six times the text.
So "it's a simple page" tells you nothing. The quick test is to compare the two versions, not to judge by eye.
On a canvas app, neither method gets the product
Excalidraw's source has 56 characters of text. Rendering raises that to 256, and those 256 characters are mostly interface labels. The drawing surface sits in two <canvas> elements, which the browser paints as pixels. You can copy every byte of outerHTML and still not have the whiteboard.
Here the code you want lives in JavaScript bundles, not in HTML. Copying the markup gives you a shell. A downloader that also fetches the bundles can do better: in our SaveWeb2ZIP test, the saved copy of this same app still ran offline, though you get built files and not the project's source.
A 30-second test for your own page
Paste this into the DevTools console on the page you want to copy. It fetches the source again, then compares it with the live DOM:
const res = await fetch(location.href);
const source = new DOMParser().parseFromString(await res.text(), 'text/html');
const text = (doc) => {
const body = doc.body.cloneNode(true);
body.querySelectorAll('script,style').forEach((el) => el.remove());
return body.textContent.replace(/\s+/g, ' ').trim().length;
};
console.table({
source: { elements: source.querySelectorAll('*').length, text: text(source) },
rendered: { elements: document.querySelectorAll('*').length, text: text(document) },
canvases: { elements: document.querySelectorAll('canvas').length },
});Read the result this way. These cutoffs are our rule of thumb from the four pages above, not a standard.
| What you see | What it means | What to do |
|---|---|---|
| Source and rendered within about 5% | Server-rendered page | Use View Source |
| Rendered has 2x or more text or elements | JavaScript builds the page | Copy outerHTML |
Text stays low and canvases is above 0 | The interface is drawn, not marked up | Stop copying HTML; rebuild it or find an official source |
Some sites block scripted fetches, so if the console shows a CORS or network error, fall back to comparing Ctrl+U with the Elements panel by hand.
What outerHTML will not give you
A rendered copy is a frozen state of the page, and that matters more than its size.
- It records one moment. Open menus, loaded tabs, and logged-in content appear only if they were on screen when you copied.
- It does not include external files. Stylesheets stay as links. On the pages we tested,
example.comhad none and our pricing page had three, so a pasted copy of that page depends on those files staying online. - Behavior does not travel reliably. Scripts in the copy may run again, fail, or do nothing once they are off the original domain. Dropdowns and sliders are often where this shows up first.
- Framework markup is not source code. Hashed class names and generated wrappers come from a build step, so the output tells you what rendered rather than how the project was written.
We did not test Save Page As or ZIP downloaders in this round, so we are not publishing numbers for them. For the trade-offs of those routes, see Web Page to Editable HTML. If you already have a saved folder with broken paths, How to Export a Cloned Page and Edit It covers the repairs.
When copying markup is the wrong tool
If you want a page you can keep building on, raw HTML or outerHTML usually leaves you with cleanup work. That is the gap CopyWeb targets: it loads a URL in a real browser, captures the rendered page, and turns it into HTML and CSS, a React component, or a Next.js-style prototype that you can keep editing. Two limits apply. Scripts are removed during capture, so interactive behavior has to be rebuilt or requested afterward. A canvas app like Excalidraw has the same problem there as anywhere else. Generation and code export depend on your plan; check pricing before you count on them.
If all you need is one saved file, URL to HTML is the narrower option. To reproduce a design from its URL, start at Copy Website.
Questions people ask
Is View Source the same as Inspect?
No. View Source shows the document the server sent. The Inspect panel shows the live DOM after scripts have changed it. On excalidraw.com the difference was 52 elements versus 338.
How do I copy all the code from a website at once?
For the HTML, right-click the <html> element in DevTools and choose Copy → Copy outerHTML. That gives you one document, without the external CSS, JavaScript, or images it points to. Those need separate downloads or a capture tool.
Why is the copied page blank or unstyled?
Usually relative paths point at files you do not have, or the page needs JavaScript to draw itself. The 30-second test above tells you which case you are in.
Can I copy CSS and JavaScript too?
Yes. Every file the browser loads is listed in the Network and Sources panels. Minified bundles are readable to a point, but they are build output and not the original project.
Is it legal to copy a website's code?
Looking at code in your browser is normal, and learning from it is common practice. Republishing someone else's code, text, images, or brand is a separate question. Read Is Website Cloning Legal? before you ship anything based on a page you do not own.