“来源”和“生成的来源”有什么区别？答案

【问题标题】：What is the difference between "Source" and "Generated Source"?“来源”和“生成的来源”有什么区别？
【发布时间】：2011-03-10 23:00:28
【问题描述】：

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

请举例说明。

编辑： 7 月 3 日

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

【问题讨论】：

请注意：例如在 Firefox 中，您没有此菜单项。但是，您可以查看生成的源，选择页面中的所有内容（ctrl-a），然后右键单击 ->“查看选择源”
@mykhal - 是的，这是“Web Developer Toolbar”的截图

标签： html firefox browser

【解决方案1】：

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

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

【讨论】：

ok 那么这意味着它只与服务器和客户端语言有关。 CSS 和 HTML 在“Source”和“Generated Source”中将是相同的
不，生成源的示例是对更新 div 中文本的 Web 服务的 AJAX 调用。生成的源将显示当前屏幕上的内容，源将显示请求页面时最初加载的内容。
@Durilai - 你能举个例子然后用例子解释吗？谢谢

【解决方案2】：

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

生成的源代码将从当前 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>

【讨论】：

【解决方案3】：

其实很简单。

来源：

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

生成的来源：

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

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

【讨论】：

所以它只与javascript有关。 html 和 css 在“Source”和“Generated Source”中都是一样的
不，任何用 Javascript 编写的 CSS 或 HTML 都在生成的源代码中。

【解决方案4】：

“生成的源”一词用词不当，因为您看到的根本不是“源”。 “源”是发送到浏览器的 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已经移到表格前面了。

【讨论】：

【解决方案5】：

“查看源代码”向您显示文件中的实际代码，就像您在文本编辑器中打开文件一样。

“查看生成的源代码”向您展示了在所有服务器端脚本（Javascript、PHP 等）都已执行之后，浏览器如何在屏幕上呈现它。

因此，如果您的 index.html 有一个空的 div 并且一个 image.jpg 使用 Javascript 被“AJAXed”到这个 div 中，那么“查看源代码”会显示给您

<div></div>

但“查看生成的源代码”会显示给您

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

【讨论】：