发表新帖
发表新帖

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

后端 未结
关注
4 1254
名媛妹妹
名媛妹妹 2021-01-03 18:12

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. A

相关标签:
4条回答
  • 误落风尘
    2021-01-03 18:31

    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.

    0 讨论(0)
  • 难免孤独
    2021-01-03 18:31

    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.

    0 讨论(0)
  • 小鲜肉
    2021-01-03 18:35

    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.

    0 讨论(0)
  • 天命终不由人
    2021-01-03 18:42

    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.

    0 讨论(0)
 看不清?
提交回复
热议问题