htmlvisual-studio-codebrowserlive-preview

VS Code's Live Preview extension element section doesn't seems to work properly


I have a very basic HTML file that looks like this:

basic html file

Then I opened it with Live Preview extension:

Live Preview Extension

Then I clicked the hamburger menu and opened the 'Devtools Pane':

Devtools Pane

The issue is why my elements section looks complicated like this:

Live Preview's element section

However, if I open the HTML file with browser and open developer tools everything is normal:

Browser's developer tools

I tried to uninstall and re-install the Live Preview extension, but this doesn't solve the problem.

Is there a solution to this?

Thanks in advance.


Solution

  • The Dev Tools Pane looks like this because that is Visual Studio Codes developer tool pane. You are seeing all of the elements and scripts that Visual Studio Code uses plus your document. You will get the same results if you open the developer tools in Visual Studio Code via the command palette. This isn't something specific to this extension.

    This answer provides some insight on why this is, but basically it's because Visual Studio Code is built like a desktop application but with web-based (like?) technologies such as HTML and Javascript.

    If you are looking for specific elements in your document, I recommend you use the element picker icon in the top left of the dev tools to inspect it, which will automatically navigate the HTML code in the developer pane to the element you wish to inspect. Or, open the file in a browser separately as you have.