vscode 的实时预览扩展元素部分似乎无法正常工作

Question

我有一个非常基本的 html 文件，如下所示：

然后我用 Live Preview 扩展打开它：

然后我单击汉堡菜单并打开“Devtools 窗格”：

问题是为什么我的元素部分看起来像这样复杂：

但是，如果我用浏览器打开 html 文件并打开开发者工具，一切正常：

我尝试卸载并安装实时预览扩展，但这并不能解决问题。

有针对这个的解决方法吗？

提前致谢。

Answer 1

开发工具窗格看起来像这样，因为那是 Visual Studio Codes 开发人员工具窗格。 您将看到 Visual Studio Code 使用的所有元素和脚本以及您的文档。 如果您通过命令面板在 Visual Studio Code 中打开开发人员工具，您将获得相同的结果。 这不是此扩展程序所特有的。

这个答案提供了一些关于为什么会这样的见解，但基本上这是因为 Visual Studio Code 是像桌面应用程序一样构建的，但使用了基于 Web 的（比如？）技术，例如 HTML 和 Javascript。

如果您在文档中查找特定元素，我建议您使用开发工具左上角的元素选择器图标来检查它，它会自动将开发人员窗格中的 HTML 代码导航到您要检查的元素。 或者，您也可以在浏览器中单独打开文件。