如何在 Visual Studio Code 中启动多个 HTML 文件？答案

【问题标题】：How Launch Multiple HTML files in Visual Studio Code?如何在 Visual Studio Code 中启动多个 HTML 文件？
【发布时间】：2021-02-12 13:17:21
【问题描述】：

我正在尝试在同一文件夹中启动 HTML 多个文件，并在 Visual Studio Code 的 Chrome 中打开它们（不是每个文件的新窗口）。我尝试了这个解决方案：Multiple Launch Files in Visual Studio Code，但我想，我错过了一些东西。

在开始新的调试会话之前，我总是会收到关闭当前调试会话的消息。

这是我的文件夹的 launch.json 文件：

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [

        {
            "name": "Chrome1",
            "request": "launch",
            "type": "pwa-chrome",
            "webRoot": "${workspaceFolder}",
            "file":"${file}"
        },
        {
            "name": "Chrome2",
            "request": "launch",
            "type": "pwa-chrome",
            "webRoot": "${workspaceFolder}",
            "file": "${file}"
        },
        {
            "name": "Chrome3",
            "request": "launch",
            "type": "pwa-chrome",
            "webRoot": "${workspaceFolder}",
            "file": "${file}"
        }
    ],
        "compounds": [
            {
              "name": "Chrome1/Chrome2/Chrome3",
              "configurations": ["Launch Chrome","Launch Chrome","Launch Chrome"],
              "preLaunchTask": "${defaultBuildTask}"
            }
        ]
}

谢谢！

【问题讨论】：

您是否使用实时服务器来启动文件？
是的。我熟悉实时服务器。但我有兴趣调试多个文件。
没有名为Launch Chrome的启动配置，所有3个配置都使用同一个文件
即使我将配置更改为： "compounds": [ { "name": "Chrome1/Chrome2/Chrome3", "configurations": ["Chrome1","Chrome2","Chrome3" ], "preLaunchTask": "${defaultBuildTask}" } ];没有好事发生。
另外，如果我错了，请纠正我，但 ${file} 不表示当前文件。因此，如果我更改当前/活动文件，那么 ${file} 的值也应该如此？

标签： html visual-studio-code

【解决方案1】：

它确实使用 3 个选项卡打开 chrome 以进行 3 个调试。

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [

        {
            "type": "chrome",
            "request": "launch",
            "name": "Chrome1",
            "file": "${workspaceFolder}/a.html"
        }, {
            "type": "chrome",
            "request": "launch",
            "name": "Chrome2",
            "file": "${workspaceFolder}/b.html"
        }, {
            "type": "chrome",
            "request": "launch",
            "name": "Chrome3",
            "file": "${workspaceFolder}/c.html"
        }
    ],
    "compounds": [{
        "name": "Chrome123",
        "configurations": ["Chrome1", "Chrome2", "Chrome3"],
    }]
}

【讨论】：

谢谢！到目前为止，该解决方案有效。但唯一的问题是，当我分别启动 Chrome1、Chrome2 和 Chrome3 时，输出与预期的一样，但是当我使用 Chrome123 进行调试时，只执行了第一个文件（在浏览器中启动），其余的都是“about:blank”。