javascript - 在浏览器中查看源代码时显示的源代码是否始终准确/完整？

Question

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

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

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

Answer 1

“查看源代码”给出服务器发送的 HTML。通常更有用的是查看生成的文档结构。

在 Chrome 中，您可以通过打开开发人员工具(Mac 上的 cmd-alt-i，Windows 上的 ctrl-alt-i)，然后查看“元素”选项卡(第一个选项卡)来执行此操作。在 Firefox 中，您需要查看“检查器”选项卡。

在 Chrome 和 Firefox 中，您可以右键单击任何页面元素并选择“检查元素”。这将打开带有文档结构的选项卡，并显示所选元素。这比寻找您自己感兴趣的元素更容易。

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

最终文档结构(或者至少是截至该时间点的最终文档结构)可能与服务器发送的 HTML 不同有两个原因:

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