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 代碼導航到您要檢查的元素。 或者，您也可以在瀏覽器中單獨打開文件。