Question

Firefox中“Source”和“Generated Source”有什么区别？

请举例说明。

修改： 7月3日

“搜索引擎”使用，生成或生成之前的哪个来源？

Answer 1

查看源代码将显示服务器提供的源。

查看生成的源代码将显示实际显示内容的源代码 - 包括JavaScript已更改的内容等。

Answer 2

Source将显示页面加载的来源（由服务器提供）。

生成的源代码将从当前DOM元素中绘制“源代码”，因此包含由JavaScript动态创建的元素。

例如，来源会显示：

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

和Generated Source会在您点击“查看生成的来源”时“绘制”来源，之后div的内容已经更改，您会看到：

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

Answer 3

这真的很简单。

来源：

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

生成来源：

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

更详细地说：“source”是响应页面请求而到达浏览器的内容。 “生成的源代码”是浏览器在所有javascript触发后的内容。

Answer 4

“Generated Source”这个词用词不当，因为你所看到的根本不是“源头”。 “Source”是发送到浏览器的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，head，body和tbody开启和关闭标记，同样添加了关闭tr标记。另外，div已经移到了表格之前。

Answer 5

'view source'显示文件中的实际代码，就好像您已在文本编辑器中打开文件一样。

'view generated source'显示浏览器在所有服务器端脚本（Javascript，PHP等）执行完毕后如何在屏幕上呈现它。

所以，如果你使用Javascript将index.html的空div和image.jpg'{1}}加入div，那么'view source'会显示

<div></div>

但是“查看生成的来源”会显示

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

“Source”和“Generated Source”有什么区别？

5 个答案: