简体   繁体   English

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

[英]Why does Chrome Developer Tools insert HTML?

I have an HTML page with one line of code: 我有一个带有一行代码的HTML页面:

<p>Hello World</p>

When I open developer tools and go to the elements tab the following code shows up: 当我打开开发人员工具并转到elements选项卡时,将显示以下代码:

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

Why is Developer Tools adding this, and can it be prevented? 为什么开发人员工具要添加它,并且可以防止它发生?

Because you are looking at the DOM in dev tools. 因为您正在研究开发工具中的DOM。 This is what the browser does with the html to show you your page. 这就是浏览器使用html来显示页面的方式。

In the same way if you traverse a table missing the <tbody> element in the HTML. 以同样的方式遍历HTML中缺少<tbody>元素的表。 This element still exists in the DOM. 该元素仍然存在于DOM中。

Just because it's there in dev tools does not mean it's in the HTML. 仅仅因为它存在于开发工具中并不意味着它就存在于HTML中。

EDIT: Use view source/Resources in the dev tools to check what the server is sending. 编辑:在开发工具中使用视图源/资源来检查服务器正在发送的内容。

It's because it shows what the DOM says; 这是因为它显示了DOM的内容; so that's after all the HTML fixing by the browser is done. 这样就完成了浏览器对HTML的修复。 The first snippet you showed isn't valid HTML and can't actually be rendered by the browser, therefore it first adds some things in to make it somewhat valid and saves that into the DOM and renders the page. 您显示的第一个代码段不是有效的HTML,并且实际上无法由浏览器呈现,因此它首先添加了一些内容使其变得有些有效,然后将保存到DOM中并呈现了页面。

This can not be prevented, if you could you'd also stop your browser from rendering most pages and I doubt you'd want that :). 这是无法避免的,如果您还可以停止浏览器渲染大多数页面,我怀疑您是否想要:)。 (pretty much every site contains errors like these) (几乎每个站点都包含此类错误)

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM