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?
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.
I am currently using version 53.0.2785.113 m of Chrome. The other answers no longer appear to be valid. To properly copy all child/descendant elements the user now has to right click on <html> then click "Expand All" before copying. Other wise you will not recursively copy all elements. A normal Ctrl+C will copy everything one <html> has been expanded.
This is easy to do with newer releases of Chrome:
google-chrome --headless --dump-dom 'http://www.yahoo.com'
(The OP may not have been looking for a command line solution but this search result appears high when searching so others might find it useful)
My favorite way to do this is:
docker run -it --rm --name chrome --shm-size=1024m --cap-add=SYS_ADMIN --entrypoint=/usr/bin/google-chrome-unstable yukinying/chrome-headless-browser --headless --disable-gpu --dump-dom https://www.facebook.com
If you're not familiar with how Docker works, be patient - the first time will be slow but subsequent invocations will be quick.
Other information
Tested on
Ubuntu 16
Linux intel-nuc 4.4.0-21-generic #37-Ubuntu SMP Mon Apr 18 18:33:37 UTC 2016 x86_64 x86_64 x86_64 GNU/Linux
Docker version:
Docker version 1.10.3, build 20f81dd
Mac OS X Sierra
Darwin MacBook-Pro.local 16.7.0 Darwin Kernel Version 16.7.0: Thu Jun 15 17:36:27 PDT 2017; root:xnu-3789.70.16~2/RELEASE_X86_64 x86_64 i386 MacBookPro14,3 Darwin
Docker version:
Docker version 17.06.1-ce, build 874a737
If you install tidy you can indent the HTML too.
