Get the html of the javascript-rendered page (after interacting with it)

Question

I would like to be able to save the state of the html page after I\'ve interacted with it.

Say I click a checkbox, or the javascript set the values of various elements.<

Answer 1

That should do and will grab the ALL page not just the body

console.log(document.getElementsByTagName('html')[0].innerHTML);

Answer 2

In Chrome (and apparently Firefox), there is a special copy() method that will copy the rendered content to the clipboard. Then you can do whatever you want by pasting it to your preferred text editor.

https://developers.google.com/chrome-developer-tools/docs/commandline-api#copyobject

Console Example:

copy(document.body.innerHTML);

Note: I noticed Chrome reports undefined after the method is run, however, it seems to execute correctly and the right content is in the clipboard.

Answer 3

document.body.innerHTML will get you the HTML representation of the current document body.

That will not necessarily include all internal state of DOM objects because the HTML contains the initial default state of objects, not necessarily the state that they may have been changed to. The only way to guarantee you get all that state is to make a list of what state you want to save and actually programmatically get that state.

To answer the part of your question about saving it, you'll have to describe more about what problem you're really trying to solve.

Answer 4

To get the equivalent of view source with javascript rendered, including doctype and html tags, copy the command into the chrome console:

console.log(new XMLSerializer().serializeToString(document.doctype) + document.getElementsByTagName('html')[0].outerHTML);

In the chrome console, hover at the end of the output and click on the copy link to copy to the pasteboard.