「Source」和「Generated Source」有什麼區別？

Firefox中的「Source」和「Generated Source」有什麼區別？「Source」和「Generated Source」有什麼區別？

請用實例說明。

編輯：7月3日

哪個源「搜索引擎」使用，生成或之前生成？

來源

2010-07-02 Jitendra Vyas

只是一個說明：egin firefox，你沒有這個菜單項。然而，你可以瀏覽生成的源選擇頁面中的所有內容（ctrl-a），然後右鍵單擊 - >「查看選擇源」 – mykhal 2010-07-02 06:04:20

@mykhal - 是這是「Web開發人員工具欄」的屏幕截圖 – 2010-07-02 06:15:23

源將顯示該頁面加載與（由服務器提供）的來源。

生成的源代碼將從當前DOM元素中繪製「源代碼」，因此包含由JavaScript動態創建的元素。

例如，源將顯示：

<script> 
    window.onload = function(){ 
    document.getElementById('test').innerHTML = 'Generated Content'; 
    } 
</script> 
<html> 
    <div id='test'>Source</div> 
</html>

和生成的源代碼的時候會「借鑑」源你點擊「查看生成的源代碼」，之後div的內容已被改變，你會見：

<script> 
    window.onload = function(){ 
    document.getElementById('test').innerHTML = 'Generated Content'; 
    } 
</script> 
<html> 
    <div id='test'>Generated Content</div> <!-- Note the difference here --> 
</html>

來源

2010-07-02 05:38:19

查看源代碼將顯示服務器提供的源代碼。

查看生成的源代碼將顯示實際上正在顯示什麼的源代碼 - 包括JavaScript的東西已經改變了，等

來源

2010-07-02 05:38:01 icktoofay

好吧然後它意味着它只與服務器和客戶端語言有關。「Source」和「Generated Source」中的CSS和HTML將相同 – 2010-07-02 05:41:21

不，生成源的示例將是對更新div中文本的Web服務的AJAX調用。生成的源將顯示屏幕上的當前內容，其中源將顯示請求頁面時最初加載的內容。 – 2010-07-02 05:42:01

@Durilai - 你可以採取任何生動的例子，然後用例子來解釋嗎？謝謝 – 2010-07-02 05:45:24

這真的很簡單。

來源：

<body> 
    <script>document.write("hello, world");</script> 
</body>

生成的源：

<body> 
    <script>document.write("hello, world");</script> 
    hello, world 
</body>

更冗長：「源」是在瀏覽器響應頁面請求到達什麼。「生成的源代碼」就是瀏覽器在JavaScript引發的所有後果。

來源

2010-07-02 05:52:33 egrunin

因此它只與javascript有關。 html和css在「Source」和「Generated Source」中都是相同的 – 2010-07-02 06:15:50

不，任何由Javascript編寫的CSS或HTML都在生成的源文件中。 – Jacob 2010-07-02 06:21:20

術語「生成的源」是一個用詞不當，因爲你所看到的不是「源」。「來源」是發送給瀏覽器的HTML。「生成的源代碼」是由源文件解析產生的對象模型當前狀態的序列化，以及由於腳本的應用而對該對象模型進行的後續更改。其他答案已經討論了javascript，但解析器的影響不應該被打折。

考慮這個來源：

<title>My Test Example</title> 
<table> 
    <tr> 
    <td>Hello</td> 
    <div>There</div> 
</table>

生成的源（添加一些空白的清晰度後）：

<html> 
    <head> 
     <title>My Test Example</title> 
    </head> 
    <body> 
     <div>There</div> 
     <table> 
       <tbody> 
        <tr> 
         <td>Hello</td> 
        </tr> 
       </tbody> 
     </table> 
    </body> 
</html>

瞭解如何HTML，頭部，身體和TBODY開始和結束標記已由解析器添加，同樣添加了close tr標籤。另外，div已被移到桌前。

來源

2010-07-02 08:24:22 Alohci

'查看源代碼'顯示了您文件中的實際代碼，就好像您在文本編輯器中打開了該文件一樣。

'view generated source'顯示瀏覽器在所有服務器端腳本（Javascript，PHP等）執行完成後如何在屏幕上呈現它。

所以如果你的index.html有一個空div和image.jpg是「AJAXed」這個div使用JavaScript，然後「查看源文件」將告訴您

<div></div>

但「視圖生成的源」會告訴你

<div><img src="image.jpg"/></div>

來源

2010-07-02 09:42:34 pixeltocode

「Source」和「Generated Source」有什麼區別？

回答

相關問題