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

社会主义新天地 提交于 2019-12-01 02:12:42

Using the Web Inspector (F12), go to the Elements tab, right click on the <html> tag in your code and select 'Copy as HTML'. 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.

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.

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!