web-dev-qa-db-ja.com

（ソースHTMLではなく）完全に計算されたHTMLを取得する方法

多くのJavaScriptを使用してHTMLを生成するWebページがある場合、ソースHTMLの代わりにブラウザによって解析される最終的な計算済みHTMLを取得するにはどうすればよいですか？つまり、ページには、呼び出されたときにHTMLを返すJavaScript関数を囲む多くのタグがあると想定します。ページのソースを表示すると、生成されたHTMLではなく、スクリプト関数呼び出しが表示されます。

Webページで作成されたすべてのHTMLを取得するにはどうすればよいですか？

Firebugはスクリプトの代わりにHTMLを表示できるように見えますが、ページ全体を保存する方法がなく、その一部だけを保存しているようです。

更新：

すべての回答をありがとう。ただし、Firebugのコンソールに表示されるHTMLをこれらのテクニックで取得できません。私のサンプルページでは、自分のFacebookプロファイルの[情報]タブを使用しています。そのページでソースを表示すると、「big_pipe.onPageletArrive（）」というタイトルのスクリプトが多数表示されます。ただし、Firebugで確認すると、これらの各関数呼び出しはHTMLにレンダリングされます。 Firebugのタグ、Webdevツールバーの[生成されたソースの表示]、およびChromeの提案を右クリックしてみましたが、HTMLではなくスクリプトの呼び出しがすべて表示されました。

他のアイデアはありますか？

アップデート2：

これらの各関数がFirebugでHTMLにレンダリングされると言ったとき、私は完全に正しくありませんでした。ページでそれらを選択して右クリックし、[要素を検査]を選択した場合にのみ表示されます。次に、それをレンダリングしているように見えます。それで、おそらく私の質問は、FirebugがすべてのHTMLを自動的にレンダリングして、選択して保存できるようにする方法になったのでしょうか？ （または、私はこのHTMLを取得するための他のソリューションを受け入れます）。

javascripthtmlfirebug
35
mix

FirebugのHTMLタブを使用すると、<html>要素を追加し、[HTMLをコピー]をクリックします。

Chrome/Safariのデベロッパーツールでも同じことができます。

25
thirtydot

Firefoxの Web Developer Toolbar には、この機能を提供する「View Generated Source」オプションがあります。

14
George Cummins
with (window.open("")) {
    document.open("text/html");
    document.write("<!--\n"); //for live version delete this line
    document.write(opener.document.documentElement.outerHTML.replace(/</g,"<").replace(/>/g, ">"));
    document.write("\n//-->"); //for live version delete this line
    document.close();
    document.title = "DOM Snapshot:" + opener.document.title;
    focus();
}
  1. コンソールを開く
  2. 上記のコードをコピーして貼り付け、実行します
  3. 空のページを開きます
  4. 次に、右クリックまたはf12でページを検査します。
  5. コメントのouterhtmlをコピーする
  6. どこにでも貼り付けます
  7. 必要に応じて、開始と終了のコメントを削除します

クリック可能なライブバージョンが必要な場合は、上記のコードのコメントタグを省略してください。

1
HopefullyHelpful
document.getElementById('awesomeness').textContent = document.documentElement.outerHTML.replace(/<\/\w+>/g, (e) => e + '\r\n');
<div id="awesomeness" style="overflow:scroll;width:100%;height:100%;white-space:pre;"/>

そうそう、それを使って...

0
twarped