如何獲得完全計算的HTML（而不是源HTML）？

給定一個使用大量javascript生成HTML的網頁，我怎樣才能得到最終計算的HTML由瀏覽器而不是源HTML解析？換句話說，假定一個頁面有很多圍繞javascript函數的標籤，當被調用時返回一些HTML。當我查看頁面的源代碼時，我看到腳本函數調用，而不是它產生的HTML。如何獲得完全計算的HTML（而不是源HTML）？

我怎樣才能得到網頁所產生的所有HTML？

我注意到Firebug能夠看到HTML而不是腳本，但它似乎沒有任何方法可以保存整個頁面，只有一小段。

更新：

感謝您的所有答案。然而，我仍然沒有得到我在Firebug的控制檯中看到的任何這些技術的HTML。對於我的示例頁面，我使用自己的Facebook個人資料的「信息」標籤。如果您在該頁面上查看源代碼，則會看到很多標題爲「big_pipe.onPageletArrive（）」的腳本。但是，如果您在Firebug中查看它，則每個函數調用都會呈現爲HTML。我試圖右鍵單擊Firebug中的標記，Webdev工具欄中的View Generated Source和Chrome建議，但它們都給我腳本調用，而不是HTML。

還有其他想法嗎？

更新2：

當我說的每一個這些功能呈現出HTML在Firebug，我是不太正確的。如果我在頁面中選擇它們並右鍵單擊 - >檢查元素，它們只會呈現出來。然後它似乎將它渲染出來。所以也許我的問題已經變成如何讓Firebug自動渲染出所有的HTML，以便您可以選擇並保存它？（或者我可以接受任何其他解決方案來抓取這個HTML）。

來源

2011-06-15 mix

您只需點擊HTML標籤，然後選擇螢火蟲中的標籤，然後右鍵單擊並選擇「複製HTML」。請注意，這會爲您提供腳本及其輸出。 – squidbe 2011-06-15 20:49:35

在Chrome中，右鍵單擊並選擇檢查元素。您將看到一個完整的HTML源代碼。「網絡」選項卡還會顯示從服務器返回的源。 – Jon 2011-06-15 20:51:10

如果Ajax引入並更新內容，那麼這種類型不是「最終的」HTML，而只是當前的快照。 – mrk 2011-06-15 20:52:01

使用Firebug的HTML選項卡，您可以右鍵單擊<html>元素，然後單擊「複製HTML」。

您可以使用Chrome/Safari中的開發人員工具做同樣的事情。

來源

2011-06-15 20:48:43 thirtydot

奇怪的是，在Mac上的Chrome，Safari和Firefox我看到生成的html，但是當我選擇「複製html」時，它複製了預生成的html。我希望這只是一個錯誤。 – 2014-06-21 17:05:29

這是我第一次嘗試，但它不起作用：零件丟失。使用元素檢查器顯示「某些元素隱藏了[按鈕：加載全部161個元素]」。點擊沒有任何區別：它沒有複製它。最終使用當前擁有-4票（即4個降票）的答案修復它。 – Luc 2015-05-12 12:51:02

在Chrome的控制檯中，您可以使用：copy（document.querySelector（'html'）。innerHTML）''。這將「計算」的HTML複製到剪貼板。 – thirtydot 2017-08-15 23:42:33

Firefox的Web Developer Toolbar具有提供此功能的「查看生成的源」選項。

來源

2011-06-15 20:48:07

完美答案。我用它所有的時間。 – riwalk 2011-06-15 20:49:24

有趣的事實：通過使用ctrl + a選擇頁面上的所有文本並從上下文菜單中選擇「View Selection Source」，可以實現相同或相似的效果。事實上，當您單擊Web開發人員工具欄上的「查看生成的源」按鈕時，它實際上會選擇頁面上的所有文本，因此它可能是相同的！ – 2011-06-15 21:22:09

-3

這是不可能的。這是從我的書籤摘錄依賴於非標準outerHTML：

with (window.open("")) { 
    document.open("text/html"); 
    document.write("<PRE>"); 
    document.write(opener.document.documentElement.outerHTML.replace(/</g,"<").replace(/>/g, ">")); 
    document.write("</PRE>"); 
    document.close(); 
    document.title = "DOM Snapshot:" + opener.document.title; 
    focus(); 
}

注：缺少DTD和無法找回的。

來源

2011-06-15 21:04:28

如何獲得完全計算的HTML（而不是源HTML）？

回答

相關問題