“打开 webview 开发人员工具”在 VS Code 1.56+ 中不起作用？答案

【问题标题】："Open webview developer tools" not working in VS Code 1.56+?“打开 webview 开发人员工具”在 VS Code 1.56+ 中不起作用？
【发布时间】：2021-04-30 10:57:24
【问题描述】：

我正在开发一个使用 webview 的 VS Code 扩展。以前我可以使用 Developer: Open webview developer tools 命令检查和调试我的 webview，这将使用 Webview 开发人员工具打开一个新窗口。

然而，在 VS Code 1.56 中，此命令不再打开新窗口。发生了什么？如何调试我的 webview？

【问题讨论】：

标签： visual-studio-code vscode-extensions

【解决方案1】：

VS Code 1.56 更新了大多数 webview 以使用普通的 <iframe> 元素而不是 Electron 的 <webview> 标签。这让您可以使用 VS Code 的标准顶级开发工具（可以使用 Developer: Toggle developer tools 命令打开）来调试和检查您的 webview：

这比Developer: Open webview developer tools 有一些好处：

您可以从同一个开发者工具实例中检查多个 Web 视图
当 webview 消失时，开发者工具不再关闭
来自 web 视图的错误和控制台消息清楚地打印在标准开发者控制台中

警告

在 VS Code 1.56 中，启用搜索的 Web 视图（使用 .enableFindWidget）仍然使用 <webview> 标签实现，因此您仍然必须使用 Developer: Open webview developer tools 命令来调试和检查它们。

我们计划在 1.56 之后的某个时间迁移所有 webview 以使用 iframe

【讨论】：

好消息马特。