通过“查看源代码”显示的 HTML 是不是与 (Firebug) 开发人员工具中显示的 HTML 不同？

Posted 2023-02-21

【中文标题】通过“查看源代码”显示的 HTML 是不是与 (Firebug) 开发人员工具中显示的 HTML 不同？

【英文标题】：Is the HTML shown via 'View Source' different from the HTML shown in (Firebug) developer tools?通过“查看源代码”显示的 HTML 是否与 (Firebug) 开发人员工具中显示的 HTML 不同？

【发布时间】：2012-10-15 17:32:57

【问题描述】：

我正在使用 Firefox 和 Firebug 开发工具。

查看源代码 (Ctrl + U) 中显示的 html 是否与我在使用 Firebug 检查元素时看到的 HTML 不同？

两者有什么区别？

【参考方案1】：

是的，它们是不同的。

查看源代码显示页面的原始 HTML 源代码。

检查器向您显示浏览器解释的 DOM。例如，这包括在 HTML 源代码中看不到的 javascript 所做的更改。

哦，这也适用于允许您在其他浏览器中查看 DOM 的开发人员工具，例如 Chrome Web Inspector 和 Internet Explorer 开发人员工具栏。 HTML 源代码在所有浏览器中始终相同，生成的 DOM 可能会有所不同，因为它是一种解释，并且渲染引擎并不完全相同（不幸的是）。

【讨论】：

我会为一件棘手的事情加 2 美分。 Firebug 和其他开发工具将显示修改后的源代码，但只能通过 JavaScript 完成更改。它们不会反映由于您与浏览器本机处理的页面的交互而在页面上执行的某些更改。示例：假设您有<input type="text" value="foo" />。当您单击文本字段并将值修改为 bar 时，它将在 CTRL-U 源视图和 Firebug 等开发工具中保持为 foo。

@jakub.g：这是因为input 的当前值不保存在value 属性中。它保存在value 属性中。 value 属性 持有input 的默认值（您可以通过其反射属性defaultValue 访问它——如果您更改defaultValue ，您将在开发工具中看到 value 属性的更改）。 jsfiddle.net/jzh6b3fc

我们能否以编程方式从 Python 或 php 获取解释后的 DOM？

@Leandro 如果您将innerHTML 发送到后端，或者如果您有某种在后端生成 DOM 的模块，则可以。

【参考方案2】：

还应注意，除了可能通过 javascript 等进行的动态 DOM 操作外，Firefox 还将解析和“清理”格式错误的 (X)HTML，因此这些更改也会影响您在检查时看到的内容一个元素。

【参考方案3】：

不同之处在于（但不限于）在 firebug 控制台中您可以看到动态变化，这些变化发生在网页中。例如，DOM 元素修改（来自AJAX 或常规JavaScript）、CSS 就地修改等...

【参考方案4】：

在 Firefox 中，查看源代码可能会重新加载页面，从而更改页面上的内容。如果它困扰您，请查看此错误并投票：

https://bugzilla.mozilla.org/show_bug.cgi?id=307089