面向iframe的VSCode调试器

Question

我正在开发CEP面板（旨在通过Chromium嵌入式框架在Adobe Creative Cloud应用程序中运行的网络应用程序-在我的情况下是Photoshop）。调试是在Chrome开发工具中完成的，并连接到localhost:8088 –该端口在manifest.xml配置文件中定义。

在开发过程中，我的构建系统（Gulp，Rollup，Bublé）在端口8080上运行了一个单独的本地服务器，该服务器为面板的内容提供服务。实际上，面板在Photoshop中的入口点是index-wrapper.html，其中包含一个<iframe>，它从index.html加载localhost:8080。

这似乎有些令人费解，但是它允许在localhost:8080上使用Vue.js开发工具，并在localhost:8088上附加一个面板/ Photoshop专用的调试会话，并访问脚本和处理主机应用程序的库（例如CSInterface.js）。我没有完全使用following setup，但此图像可能有助于描述它：

总结：

• 8080用于调试面板的Web / Vue.js端
• 8088用于调试面板/ Photoshop交互

当我在DevTools中调试 8088 时，由于它们位于<iframe>中，因此无法访问感兴趣的面板脚本/库：我必须选择正确的上下文（如this topic中所示）：

csi在选择“ Top”时未定义，而在以“ localhost”为目标时则未定义-可以。

如何告诉VSCode检查iframe？我当前的.vscode/launch.json如下：

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "CEP Debugger",
            "type": "chrome",
            "request": "attach",
            "port": 8088,
            "webRoot": "${workspaceRoot}/build/com.example.myProduct/index.html",
            "sourceMapPathOverrides": {
              "../../../*": "${workspaceRoot}/*"
            }
        }
    ]
}

是否有一种方法可以指示VSCode以iframe为目标-与我通过下拉菜单手动完成的操作相同，但是是以编程方式完成的？

谢谢。

PS：将VSCode指向8080并不是解决方案，因为我需要调试8088及其与主机应用程序的连接。