web-dev-qa-db-ja.com

ChromeでWebDOM全体を現在の状態でダンプするにはどうすればよいですか？

現在のDOMをファイルにダンプして、オフラインで表示できるようにしたい。基本的に、比較のために残しておきたい古いバージョンのページがあります。ブラウザを閉じるとすぐに失われるので、DOMをそのまま保存したいと思います。

Firefoxでこれを行うための答えはすでにあります がありますが、Chromeでそれを行うにはどうすればよいですか？

domdumpgoogle-chrome-devtools
25
styfle

Webインスペクター（F12）を使用して、「要素」タブに移動し、コード内の<html>タグを右クリックして、Copy-> Copy outerHTMLを選択します。次に、それを新しいファイルに貼り付けて保存します。

30
Damon

コマンドラインソリューション

これは、Chromeの新しいリリースで簡単に実行できます。

google-chrome --headless --dump-dom 'http://www.yahoo.com'

（OPはコマンドラインソリューションを探していなかった可能性がありますが、この検索結果は検索時に高く表示されるため、他の人が役立つと思うかもしれません）

元の回答2017

これを行うための私のお気に入りの方法は次のとおりです。

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

Dockerの動作に慣れていない場合は、しばらくお待ちください。最初は遅くなりますが、その後の呼び出しは速くなります。

その他の情報

テスト済み

buntu 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バージョン：

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バージョン：

Docker version 17.06.1-ce, build 874a737

tidyをインストールすると、HTMLもインデントできます。

5
Sridhar Sarnobat

現在、バージョン53.0.2785.113mのChromeを使用しています。他の回答はもはや有効ではないようです。すべての子/子孫要素を適切にコピーするには、ユーザーは<html>を右クリックし、[すべて展開]をクリックしてからコピーする必要があります。そうしないと、すべての要素を再帰的にコピーすることはできません。通常のCtrl + Cは、<html>が展開されたすべてのものをコピーします。

3
Karaja