Get Current HTML Of Page Built With AJAX Requests
Solution 1:
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">
Solution 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,'&');s=s.replace(/>/g,'>');s=s.replace(/</g,'<');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:
