Get the html of the javascript-rendered page (afte

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.

How can I save the "javascript-rendered" page?

Thanks.

Answer 1

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 2

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

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

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.