そのため、私は Chrome/Chromium ブラウザを使用しています (必要に応じて Firefox を使用することもできます)。
私は、（おそらく）AJAX を使用して「オンザフライ」で構築された Web ページを表示しています（Facebook で下にスクロールすると、さまざまなものが次から次へと表示され続ける様子を想像してください）。
このようなページに大量のデータが読み込まれた後に HTML を保存したいのですが、これは Chromium 開発者ツールの DOM には表示されず、右クリックして保存すると、AJAX でデータが読み込まれる前の元のページが保存されるだけです。
私に何ができる？
答え1
動的に読み込まれるすべての要素を含むソース コードを取得する方法の 1 つは、Chrome デベロッパー ツール ( F12) を使用することです。<HTML>ページの先頭にあるタグを選択し、要素 ( CTRL+ C) をコピーします。これにより、動的に読み込まれたかどうかに関係なく、囲まれたすべてのデータもクリップボードにコピーされ、好きな場所に貼り付けることができます。
プロセスを示す GIF を以下に示します。
.js明らかな欠点は、完全な Web サイトが必要な場合は、すべてのファイル ( 、 、画像)を手動でダウンロードして HTML ファイルと同じフォルダーに保存する必要があることです.css(ヒント: 開発ツールの [ソース] タブを使用します)。または、Web から一部のデータを取得してもかまわない場合は、次のように HTML ソース内のリンクを変更します。
===ORIGINAL===
<img src="file.jpg">
===MODIFIED===
<img src="[url_of_website_that_you_want_to_save]/file.jpg">
答え2
ブックマークレット
もう一つの、もっと簡単な方法をご紹介します。
次のJavaScriptコードをブックマークレット、生成されたソースを表示したいページでそれをクリックします。
javascript:(function(){ function htmlEscape(s){s=s.replace(/&/g,'&');s=s.replace(/>/g,'>');s=s.replace(/</g,'<');return s;} x=window.open(); x.document.write('<pre>' + htmlEscape('<html>\n' + document.documentElement.innerHTML + '\n</html>')); x.document.close(); })();
プロセスを簡単にするにはここをクリックしてください!|JSFiddle
画像:
