为什么Chrome开发者工具插入HTML？

Question

我有一个带有一行代码的HTML页面：

<p>Hello World</p>

当我打开开发人员工具并转到elements选项卡时，将显示以下代码：

<html>
    <head></head>
    <body>
      ""
      <p>Hello World</p>
    </body>
</html>

为什么开发人员工具要添加它，并且可以防止它发生？

Answer 1

因为您正在研究开发工具中的DOM。 这就是浏览器使用html来显示页面的方式。

以同样的方式遍历HTML中缺少<tbody>元素的表。 该元素仍然存在于DOM中。

仅仅因为它存在于开发工具中并不意味着它就存在于HTML中。

编辑：在开发工具中使用视图源/资源来检查服务器正在发送的内容。

Answer 2

这是因为它显示了DOM的内容； 这样就完成了浏览器对HTML的修复。 您显示的第一个代码段不是有效的HTML，并且实际上无法由浏览器呈现，因此它首先添加了一些内容使其变得有些有效，然后将其保存到DOM中并呈现了页面。

这是无法避免的，如果您还可以停止浏览器渲染大多数页面，我怀疑您是否想要:)。 （几乎每个站点都包含此类错误）