So, I'm using the Chrome/Chromium browser (put could use Firefox, if need be).

I'm viewing webpages which are constructed "on the fly" with (presumably) AJAX (think the how you scroll down on Facebook and things just keep appearing and appearing).

I'd like to save the html for such a page after it's loaded a bunch of stuff, but this doesn't show up in the DOM of the Chromium Developer's Tools and right-clicking to Save just saves the original page, before AJAX loaded stuff.

What can I do?

One way to get the source code with all dynamically loaded elements is through Chrome Developer Tools (F12). Choose the <HTML> tag at the very beginning of the page, and copy the element (CTRL + C). This should also copy all enclosed data, dynamically loaded or otherwise to your clipboard, and you can then paste it wherever you like.

Here's a gif showing the process:

Process

The obvious drawback is that you're going to have to manually download any files (.js, .css, images) and save them (tip: Use the "sources" tab in Dev Tools) in the same folder as the html file if you want the complete website, or alternatively, modify the links in the HTML source like this, if you don't mind some data being fetched from the web:

===ORIGINAL===

<img src="file.jpg">

===MODIFIED===

<img src="[url_of_website_that_you_want_to_save]/file.jpg">
  • In firefox the command is "Copy - Inner HTML" – Richie Frame Mar 24 at 6:03

Bookmarklet

Here's another method, a much easier one!

Save the following JavScript code as a bookmarklet, and click on it on the page you want to view the generated source of:

javascript:(function(){ function htmlEscape(s){s=s.replace(/&/g,'&amp;');s=s.replace(/>/g,'&gt;');s=s.replace(/</g,'&lt;');return s;} x=window.open(); x.document.write('<pre>' + htmlEscape('<html>\n' + document.documentElement.innerHTML + '\n</html>')); x.document.close(); })();

Click here to make the process easier! | JSFiddle

GIF: rahuldottech!

Your Answer

 

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.