带有 iframe 的 VSCode Webview - 无法查看 Webview 开发工具的 iframe dom答案

【问题标题】：VSCode Webview with iframe - unable to look into iframe dom for Webview Dev Tools带有 iframe 的 VSCode Webview - 无法查看 Webview 开发工具的 iframe dom
【发布时间】：2023-04-03 05:49:01
【问题描述】：

我正在构建一个 VSCode Webview，它公开了一个更复杂的工具以在 VSCode 中使用......

所以...请参阅下面的示例

此代码适用于启动 Builder 工具。但是，我在 VSCode 环境中的那个工具的某个地方有一个错误（可能是文件访问问题）......

所以，我打开了 Webview 开发人员工具 - 并且可以像往常一样查看元素等...但是当我到达 iframe（使用 iframe src Builder 提供的 html）时，我无法查看该 iframe ，无法调试其中的任何内容。通常在 Google 开发工具中，我可以很好地进入嵌套的 iframe。我没有收到错误或其他指示。 WebView 中的显示显然有显着的 UI，但我发现没有办法调试它....

感谢任何帮助。

private getWebViewContent(webview: vscode.Webview): string {
    const initialHTML = `<!DOCTYPE html>
    <html lang="en">
    <head>
        <title>LBF EMail Builder</title>
        <style>
            html { width: 100%; height: 100%; min-height: 100%; display: flex; }
            body { flex: 1; display: flex; }
            iframe { flex: 1; border: none; background: white; }
        </style>
    </head>
    <body>
        <iframe id="lbfemailbuilder" src="http://localhost:3000"></iframe>
    </body>
    `;
    return initialHTML;
  }

【问题讨论】：

标签： iframe visual-studio-code webview

【解决方案1】：

您必须要求开发团队重新打开此问题：

https://github.com/microsoft/vscode/issues/105370#issuecomment-717157594

【讨论】：