差异：在Firebug中查看页面源与视图

Question

当我查看页面的页面源（例如： http ： //my.sa.ucsb.edu/public/curriculum/coursesearch.aspx ）时，其中没有太多的代码/信息。 例如，在该链接页面上，页面源中不显示任何类信息。

但是：当我在firebug中查看它时，我可以看到更多的html信息。 例如，我可以在表格中看到所有类信息。

为什么是这样？ 我怎样才能访问完整的（firebug html）？ 我可以在php / javascript中完成吗？

Answer 1

这是发生事情的顺序：

1. PHP生成HTML
2. 浏览器加载HTML
3. JavaScript操纵加载的HTML

为什么是这样？

视图源浏览器功能通常显示浏览器收到的纯HTML。 Firefug等其他高级工具能够在被JavaScript更改后显示当前的HTML。 （Firefox本身也具有此功能：只需右键单击某些生成的HTML并选择“查看所选源”。）

我怎样才能访问完整的（firebug html）？

我不确定HTML选项卡，但“网络”选项卡始终显示从服务器收到的文档。

我可以在php / javascript中完成吗？

当原始HTML到达浏览器时，PHP不再运行。

JavaScript可以使用任何DOM节点的.innerHTML属性显示HTML。

Answer 2

查看源显示浏览器从服务器获取的内容。 Firebug显示浏览器DOM - 即浏览器内存中存在的页面视图的表示。 可以通过Javascript更改DOM。 Javascript可以通过使用document值访问DOM，然后转到其子项等 - 例如，要查看所有表，您可以执行document.getElementsByTagName('table')

如果你想要整个DOM内容作为HTML，你可以做类似document.getElementsByTagName('html')[0].innerHTML

Answer 3

View Source只显示从服务器加载的HTML，这意味着在加载页面后对DOM所做的任何更改都不会显示。 页面源仅在页面完成加载时显示第一个源。

另一方面，Firebug是动态的，并向您显示DOM及其操作方式。 当DOM被更改时，Firebug的源也会发生变化。 这对于调试非常重要，因为与View Source不同，您可以看到实际发生的情况。

Answer 4

查看源为您提供加载页面的来源，获取当前的html，web开发人员工具中有一个选项（Firefox插件） - “查看生成的源代码”

在菜单中：

view source -> view generated source

Answer 5

firebug还会显示css文件，该文件将从主html通过目标

<link rel="stylesheet" type="text/css" href="css">

因此显示更多信息。

Answer 6

使用“查看源”查看源时，您查看的HTML是您所在的URL的HTML，以及未经JavaScript和排序修改的HTML。 此外，如果页面的代码中包含框架或iframe，则它们的内容也不会显示。

相反，在firebug中，动态更改HTML和帧/ iframe的内容将是可见的。

此外，在页面完全加载之前查看页面的来源可能是没有完整HTML代码（或任何HTML代码）的原因。

使用JavaScript遍历HTML代码将始终返回完整更新的HTML代码。 （即你会在firebug中看到什么）

我不确定您希望如何使用PHP访问HTML，但PHP在到达浏览器后无法访问代码。 但是，如果您要向PHP发送一个URL来加载HTML，那么您将拥有的HTML是在进行任何动态更改之前的原始HTML（即您在“查看源”中看到的那个）

Answer 7

第一次加载页面时，页面源会显示HTML。 它没有显示您在加载页面后或在您点击网页上的任何按钮后使用javascript等进行的修改。 要查看当前可见的DOM，您可以使用以下内容：

对于IE / firefox，以下bookmarklet有效： https ： //www.squarefree.com/bookmarklets/webdevel.html#generated_source

对于谷歌浏览器，右键单击任何元素，然后选择“检查元素”选项。 它将显示DOM中元素的位置。 现在右键点击'

对于opera，右键单击任何元素并选择“Inspect element”。 这将启动歌剧蜻蜓。 在蜻蜓窗口中，单击“展开DOM树”按钮（带有点和两个箭头的第一个按钮），然后“导出当前DOM面板”按钮（第二个按钮）

在IE中，打开网页并按F12打开开发人员工具。 在开发人员工具窗口中单击视图 - >源 - > DOM（页面）或快捷键Ctrl + Shift + G. 这将显示完整的当前可见DOM。

对于firefox，替代方案是Web开发人员工具栏扩展，并选择View Source-> View Generated source。