How can I dump the entire Web DOM in its current state in Chrome?

dom dump google-chrome-devtools
styfle picture styfle · Aug 27, 2012 · Viewed 21.8k times · Source

I want to dump the current DOM to a file and be able to view it offline. Essentially, I have an outdated version of a page that I would like to keep around for comparison. As soon as I close my browser, I'm going to lose it so I would like to save the DOM exactly as it is.

There is already an answer for doing this in Firefox but how do I do it in Chrome?

Answer

Damon picture Damon · Feb 7, 2013

Using the Web Inspector (F12), go to the Elements tab, right click on the <html> tag in your code and select Copy->Copy outerHTML. Then paste that into a new file and save.

Related questions

How do I check if an element is hidden in jQuery?

Is it possible to toggle the visibility of an element, using the functions .hide(), .show() or .toggle()? How would you test if an element is visible or hidden?

Read More
How can I change an element's class with JavaScript?

How can I change the class of an HTML element in response to an onclick or any other events using JavaScript?

Read More
How do I get the value of text input field using JavaScript?

I am working on a search with JavaScript. I would use a form, but it messes up something else on my page. I have this input text field: <input name="searchTxt" type="text" maxlength="512" id="searchTxt" class="searchField"/> …

Read More