Get Current HTML Of Page Built With AJAX Requests

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?

Richard

Posted 2012-04-19T04:04:17.157

Reputation: 2 565

http://stackoverflow.com/questions/1750865/best-way-to-view-generated-source-of-webpage – erikxiv – 2012-04-19T05:49:28.540

Might be weird. My Chrome is showing the ajax loaded content in locally saved .html page. – iAnuj – 2012-08-17T01:25:21.573

Answers

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:

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">

rahuldottech

Posted 2012-04-19T04:04:17.157

Reputation: 5 095

In firefox the command is "Copy - Inner HTML" – Richie Frame – 2018-03-24T06:03:37.270

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

Posted 2012-04-19T04:04:17.157

Reputation: 5 095

I love the gif. What's your go-to tool for making such gifs please? Thanks. – thanks_in_advance – 2019-10-05T18:17:26.370

@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 – 2019-10-05T22:40:30.520