Question

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

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

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

Answer 1

这是事情发生的顺序：

PHP生成HTML
浏览器加载HTML
JavaScript操纵加载的HTML

为什么会这样？

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

如何访问完整版（firebug html）？

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

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

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

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

Answer 2

View Source显示浏览器从服务器获取的内容。 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

此外，firebug将显示css文件，该文件将通过

从主html进行定位

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

因此显示更多信息。

Answer 5

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

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

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

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

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

Answer 6

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

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

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

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

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

对于firefox，替代方案是Web developer toolbar extension，然后选择查看源代码 - >查看生成的源代码。

Answer 7

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

菜单中的

：

view source -> view generated source

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

7 个答案: