“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”有什么区别？

回答

相关问题