47

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?

Community
  • 1
  • 1
styfle
  • 22,361
  • 27
  • 86
  • 128
  • Does this answer sovles your question？https://stackoverflow.com/questions/28151446/chrome-dev-tools-export-elements-html/66978187#66978187 – 傅继晗 May 28 '21 at 14:30
  • Does this answer your question? [Chrome Dev Tools export Elements HTML](https://stackoverflow.com/questions/28151446/chrome-dev-tools-export-elements-html) – 傅继晗 May 28 '21 at 14:31

4 Answers4

55

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.

Damon
  • 10,493
  • 16
  • 86
  • 144
  • 5
    I did this at the time of posting but I think there was a reason this is not the perfect solution. I think I wanted to save event handlers on the DOM which the HTML dump does not do. – styfle Feb 07 '13 at 23:12
  • 1
    @styfle Not sure I understand this. When you hit F12 it is the rendered (correct wording?) HTML I see, not the base dump that 'View Page Source' will give you. I followed Damon's advice and got everything I needed (a select box populated by jquery). It is still a very clumsy approach, a simple Select All from the elements page would be much more intuitive. – Timothy Harding May 05 '15 at 17:03
  • 1
    Just "Copy" instead of "Copy as HTML" does the trick. Then just paste into Notepad. – Karlth Aug 28 '15 at 13:18
  • 1
    This will indeed give you the GENERATED HTML, unlike the "save page as" menu entry which just gives you the SOURCE HTML, which doesn't help you in sites that use Ajax for content. – Sridhar Sarnobat Jun 29 '18 at 00:00
  • Outdated, no longer valid. – Basil Musa Jul 15 '19 at 16:19
13

In Chrome Dev Tools Console, type document.documentElement.outerHTML (use the tab button for autocomplete to save keystrokes) and hit Enter to see the DOM text displayed. To copy it to your clipboard and paste it elsewhere, use copy(document.documentElement.outerHTML) instead.

Damon's answer is also good (in Dev Tools, click Elements, right click <html>, click Copy > Copy outerHTML), but I find the Console command easier.

Marcus
  • 3,459
  • 1
  • 26
  • 25
  • Of course, as styfle mentioned, this will not save the event handlers on the DOM. – Marcus Apr 27 '20 at 13:55
  • 1
    I think this is innately better than my solution because it is very simple and will work in the browser as well as in code. – Damon Jan 13 '23 at 15:54
  • Thanks for the `copy`, I didn't know that, but the solution itself seems not to work. The problem for me is not the event handlers. It doesn't even save the elements' "html". E.g. if my original DOM was just `` and then I added some stuff in this foo dom element, the document.documentElement.outerHTML will simply show w/o its contents – d.k Jan 22 '23 at 10:19
  • I guess it's because the shadow dom, one has to watch for this – d.k Jan 22 '23 at 10:22
  • To state the (almost) obvious, this works in Firefox as well – EML Aug 10 '23 at 15:49
11

Command line solution

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)

Original answer 2017

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.

Sridhar Sarnobat
  • 25,183
  • 12
  • 93
  • 106
  • 1
    I don’t see anything wrong with that. Do you know what docker is? – Sridhar Sarnobat Apr 01 '18 at 23:37
  • 13
    The problem with the `--dump-dom` is that the question was how to save the current DOM, not the DOM you get on initial page load, which on modern websites is almost guaranteed completely different thanks to JS injecting a million things that are missing from the initial page load. – Mike 'Pomax' Kamermans Dec 29 '19 at 19:53
6

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.

Karaja
  • 395
  • 6
  • 16
  • Beware also of the shadow dom, the copied contents won't 'pierce' it, one will have only w/o its contents – d.k Jan 22 '23 at 10:22