简体   繁体   中英

Why does Chrome Developer Tools insert HTML?

I have an HTML page with one line of code:

<p>Hello World</p>

When I open developer tools and go to the elements tab the following code shows up:

<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. This is what the browser does with the html to show you your page.

In the same way if you traverse a table missing the <tbody> element in the HTML. This element still exists in the DOM.

Just because it's there in dev tools does not mean it's in the 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; so that's after all the HTML fixing by the browser is done. 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.

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)

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

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