web-dev-qa-db-ja.com

AJAXリクエストで構築されたページの現在のHTMLを取得する

そのため、私はChrome/Chromiumブラウザを使用しています（必要に応じて、Firefoxを使用できます）。

私は（おそらく）AJAXを使用して「オンザフライ」で構築されたWebページを表示しています（Facebookで下にスクロールすると、物事が表示され続けることを考えてください）。

たくさんのものをロードした後、そのようなページのhtmlを保存したいのですが、これはChromium Developer's ToolsのDOMに表示されず、右クリックして[保存]をクリックすると、AJAXロードされたもの。

私に何ができる？

google-chromescreen-scraping
8
Richard

動的にロードされたすべての要素を含むソースコードを取得する1つの方法は、Chrome Developer Tools（F12）。ページの最初にある<HTML>タグを選択し、要素をコピーします（CTRL + C）。これにより、囲まれたすべてのデータが動的に読み込まれるかクリップボードにコピーされ、好きな場所に貼り付けることができます。

これがプロセスを示すgifです：

Process

明らかな欠点は、ファイル（.js、.css、画像）を手動でダウンロードして、同じ場所に保存する必要があることです（ヒント：開発ツールの[ソース]タブを使用）完全なWebサイトが必要な場合は、htmlファイルとしてフォルダーを作成します。Webからデータをフェッチしてもかまわない場合は、次のようにHTMLソースのリンクを変更します。

===ORIGINAL===

<img src="file.jpg">

===MODIFIED===

<img src="[url_of_website_that_you_want_to_save]/file.jpg">
4
undo

ブックマークレット

別の方法、はるかに簡単な方法があります！

次のJavaScriptコードを bookmarklet として保存し、生成されたソースを表示するページをクリックします。

javascript:(function(){ function htmlEscape(s){s=s.replace(/&/g,'&amp;');s=s.replace(/>/g,'&gt;');s=s.replace(/</g,'&lt;');return s;} x=window.open(); x.document.write('<pre>' + htmlEscape('<html>\n' + document.documentElement.innerHTML + '\n</html>')); x.document.close(); })();

プロセスを簡単にするためにここをクリックしてください！ | JSFiddle

GIF： rahuldottech!

2
undo