8

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?

4

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 '18 at 6:03
2

Bookmarklet

Here's another method, a much easier one!

Save the following JavaScript 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!

  • I love the gif. What's your go-to tool for making such gifs please? Thanks. – thanks_in_advance Oct 5 at 18:17
  • @thanks_in_advance Thanks :) It's been a while since I've recorded a gif of my screen, but I usually use either LICEcap or ScreenToGif. The former is lightweight and easier to use, the latter has some neat fancy features though. – rahuldottech Oct 5 at 22:40

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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