how to get fully computed HTML (instead of source HTML)?

Asked 15/6, 2011 at 20:46 Answered 27/7, 2022 at 2:56

Given a webpage that uses lots of javascript to generate its HTML, how can I get the final computed HTML being parsed by the browser instead of the source HTML? In other words, presume a page has lots of tags surrounding javascript functions that, when called, return some HTML. When I view the source of the page, I see the script function call, not the HTML it produces.

How could I get all of the HTML produced by a webpage?

I've noticed that Firebug appears able to see the HTML instead of the scripts, but it doesn't appear to have any way to save the whole page, only little segments of it.

Update:

Thanks for all the answers. However, I'm still not getting the HTML I see in Firebug's console with any of those techniques. For my example page, I'm using the 'Info' tab of my own Facebook profile. If you view source on that page, you'll see lots of scripts with the title 'big_pipe.onPageletArrive()'. However, if you look at it in Firebug, each of those function calls renders out to HTML. I tried the right-click on the tag in Firebug, the View Generated Source in the Webdev Toolbar, and the Chrome suggestion, but they all give me the script call, not the HTML.

Any other ideas?

Update 2:

When I said each of those functions renders out to HTML in Firebug, I wasn't quite correct. They only render out if I select them in the page and right click->Inspect Element. Then it appears to render it out. So maybe my question has become how do you get Firebug to automatically render out all of the HTML so you can select and save it? (Or I'm open to any other solution for grabbing this HTML).

Manic answered 15/6, 2011 at 20:46 Comment(3)

You can just click the HTML tab, then select the <html> tag in firebug, then right-click and select "Copy HTML". Note that this will give you both the scripts and their output. – Sire 15/6, 2011 at 20:49

In Chrome, right-click and select Inspect Element. You'll be presented with a full rendered HTML source. The Network tab will also show you the source that came back from the server. – Ewe 15/6, 2011 at 20:51

If Ajax is pulling in and updating content, there kind of isn't a "final" HTML, just a current snapshot. – Wholesale 15/6, 2011 at 20:52

With Firebug's HTML tab, you can right click on the <html> element, and click "Copy HTML".

You can do the same thing with Developer Tools in Chrome/Safari.

Mortonmortuary answered 15/6, 2011 at 20:48 Comment(4)

Strangely in Chrome, Safari and Firefox on Mac I see the generated html but when I select "copy html" it copies the pre-generated html. I hope this is just a bug. – Babita 21/6, 2014 at 17:5

This is what I tried at first but it does not work: parts are missing. Using the element inspector shows that "Some elements were hidden [button: Load all 161 elements]". Clicking that made no difference: it did not copy it. Eventually fixed it using the answer that has currently -4 votes (i.e. 4 downvotes). – Wainscot 12/5, 2015 at 12:51

In Chrome's console, you can use this: copy(document.querySelector('html').innerHTML). This copies the "computed" HTML to the clipboard. – Mortonmortuary 15/8, 2017 at 23:42

@Mortonmortuary This works in FF too. But outerHTML is more appropriate because you want the <html> tag also. copy(document.querySelector('html').outerHTML) – Yoshi 19/2, 2020 at 8:17

The Web Developer Toolbar for Firefox has a "View Generated Source" option which provides this functionality.

Westering answered 15/6, 2011 at 20:48 Comment(3)

Perfect answer. I use it all the time. – Clementclementas 15/6, 2011 at 20:49

Interesting fact: The same or similar effect can be achieved by selecting all text on the page with ctrl+a and choosing "View Selection Source" from the context menu. In fact, when you click the "View Generated Source" button on the web developer toolbar, it actually selects all the text on the page, so it's probably the same! – Bridlewise 15/6, 2011 at 21:22

There is no such option on the current version – Crelin 7/10, 2020 at 15:44

with (window.open("")) {
    document.open("text/html");
    document.write("<!--\n"); //for live version delete this line
    document.write(opener.document.documentElement.outerHTML.replace(/</g,"<").replace(/>/g, ">"));
    document.write("\n//-->"); //for live version delete this line
    document.close();
    document.title = "DOM Snapshot:" + opener.document.title;
    focus();
}

Open console
copy paste the above code and execute
it opens an empty page,
now inspect the page with right click or f12,
copy outerhtml of the comment
paste wherever you want
optionally remove the comment at the start and end

If you want a live version that is clickable, then simple leave out the comment tags in the above code.

Swett answered 14/9, 2018 at 7:45 Comment(0)

document.getElementById('awesomeness').textContent = document.documentElement.outerHTML.replace(/<\/\w+>/g, (e) => e + '\r\n');

<div id="awesomeness" style="overflow:scroll;width:100%;height:100%;white-space:pre;"/>

so yea, use that...

Flax answered 9/10, 2019 at 22:57 Comment(0)

I was having problems with a page generated by Javascript: the content would only render if the page was scrolled down, so the copied HTML was incomplete. This happened to me with all suggestions based on Chrome.

This issue was solved by the following trick:

Open a console, then type a zoom that will render the entire page (or desired contents), e.g.

javascript: document.body.style.zoom = 0.1

Copy the HTML as per other suggestions, e.g.

copy(document.querySelector('html').outerHTML)

When pasting, search the text for "zoom", then revert the value to "1", save the HTML.

Esoterica answered 27/7, 2022 at 2:56 Comment(0)

-1

It is not possible generally. Here is excerpt from my bookmarklet which relies on non-standard outerHTML:

with (window.open("")) {
    document.open("text/html");
    document.write("<PRE>");
    document.write(opener.document.documentElement.outerHTML.replace(/</g,"<").replace(/>/g, ">"));
    document.write("</PRE>");
    document.close();
    document.title = "DOM Snapshot:" + opener.document.title;
    focus();
}

Note: DTD is missing and not retrievable at all.

Brindled answered 15/6, 2011 at 21:4 Comment(1)

This was very helpful and works in all browsers, for chrome you can use html comment instead of pre and then copy and paste it into a real editor, because it's one element in the dev tools – Swett 4/8, 2018 at 13:27

Recommended topics

Hot tags