浏览器中的查看源上显示的源代码是否始终准确/完整?

时间:2013-05-29 20:43:37

标签: javascript html http google-chrome firefox

我对特定网页有疑问。当我按下一个链接时,我收到了一个应用程序错误(不是http错误等,而是应用程序级错误) 但我打开了开发人员工具和网络控制台,我发现没有请求发送到服务器 所以我双击并选择了视图源,我看到这个错误是动态生成的html的一部分,但html页面似乎格式不正确。
它似乎以这样结束:

<div id="theId"> You can not access page 
</html>  

整个页面看起来还不错。当我使用Crome或Firefox时,我看到同样的事情。(IE不是一个选项,因为我没有可用的Windows PC。)
观看源不允许我“研究”该页面,例如扩展标签等 我该如何调试这样的东西?可能由于某种原因,浏览器无法正确显示代码吗?

4 个答案:

答案 0 :(得分:2)

&#34;查看来源&#34;给出服务器发送的HTML。通常看起来更有用的是查看生成的文档结构。

在Chrome中,您可以打开开发人员工具(在Mac上为cmd-alt-i,在Windows上为ctrl-alt-i),然后查看“元素”选项卡(第一个选项卡)。 在Firefox中,您需要查看&#34; Inspector&#34;标签

在Chrome和Firefox中,您可以右键单击任何页面元素,然后选择&#34;检查元素&#34;。这将打开带有文档结构的选项卡,并显示所选元素。这比追捕你对自己感兴趣的元素更容易。

此外,当鼠标悬停在文档树中的元素上时,两个浏览器都会突出显示您在常规视口中指向的元素。

有两个原因可以解释为什么最终文档结构(或者至少到目前为止的最终文档结构)与服务器发送的HTML不同:

  1. 修改文档的Javascript。对于非常使用Javascript(尤其是所谓的单页应用程序)的网站,生成的文档结构可能与原始HTML源代码有很大不同。这只是形成呈现页面的基础。之后Javascript完成了很多工作。
  2. 格式错误的HTML。在这种情况下,所有浏览器都会尝试充分利用它们之前的内容来生成有效的文档结构。

答案 1 :(得分:1)

要回答你标题中的问题,如果你说的是javascript是和否,如果你说的是html,那么它是肯定的,但是没有完成。


Html可以并且在许多由服务器端语言生成的Web应用程序中,甚至可以通过javascript生成。因此,根据您从服务器请求的内容,HTML可能远未完成。

当使用像ruby或php这样的语言生成像html一样的东西时,很容易产生糟糕/糟糕的HTML。

故事与javascript有点不同。根据需要,javascript的所有源必须以某种形式在浏览器中提供。但是,jquery之类的东西可以通过浏览器缓存 ,这意味着当你打开开发人员控制台时,它的代码可能不会显示。

然后你有minifiers和obfuscation的问题,然后混淆器用于缩小的混淆代码!这可能会造成可怕的混乱。

我的猜测是他们的服务器生成了一些糟糕的HTML,然后打破了他们的javascript,(导致javascript没有像你在网络日志上看到的那样调用服务器)然后在你身边处理了一个错误信息通过捕获错误的JavaScript。

答案 2 :(得分:0)

据我所知,“查看源代码”为您提供Web服务器发送的任何Web浏览器。在渲染语法错误的HTML时,Web浏览器通常非常宽容。如果您是开发此网页的人,您可能需要仔细查看它发送的内容。

答案 3 :(得分:0)

Firefox 中,使用Web Developer Toolbar,有一个“查看来源”菜单,其中包含“查看生成的来源”的下拉选项。在javascript处理和更新之后,这会在检查员看到它时输出完整的html源代码。一个非常有用的插件,是Firebug出现之前的主要插件。