如何在VS Code中顺序启动多个SvelteKit调试配置？

方案1：利用服务端启动完成触发Chrome调试（推荐） #

修改你的.vscode/launch.json，给服务端调试配置添加serverReadyAction，让VS Code自动识别服务器启动完成的信号，再启动Chrome调试会话：

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node-terminal",
      "name": "Run Script: dev",
      "request": "launch",
      "command": "npm run devv",
      "cwd": "${workspaceFolder}",
      "serverReadyAction": {
        "pattern": "Local:.+(http://localhost:5173)",
        "uriFormat": "%s",
        "action": "debugWithChrome"
      }
    },
    {
      "name": "Launch Chrome",
      "request": "launch",
      "type": "chrome",
      "url": "http://localhost:5173",
      "port": 9222, // Chrome调试端口默认9222，避免和服务端口5173冲突
      "smartStep": true,
      "skipFiles": [
        "<node_internals>/**",
        "node_modules/**",
        "/**/*.js",
        "/**/*.css",
        "/*\\.js"
      ],
      "userDataDir": "${workspaceFolder}/.vscode/chrome"
    }
  ],
  "compounds": [
    {
      "name": "SvelteKit Full Debug",
      "configurations": ["Run Script: dev"]
    }
  ]
}

当终端输出包含http://localhost:5173的启动日志时，VS Code会自动触发Chrome调试，完全实现顺序启动。

方案2：Compound配置强制顺序执行 #

如果方案1的日志匹配不生效，可通过Compound配置的依赖关系强制顺序启动：

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node-terminal",
      "name": "Run Script: dev",
      "request": "launch",
      "command": "npm run devv",
      "cwd": "${workspaceFolder}",
      "persistDebugSession": true
    },
    {
      "name": "Launch Chrome",
      "request": "launch",
      "type": "chrome",
      "url": "http://localhost:5173",
      "port": 9222,
      "smartStep": true,
      "skipFiles": [
        "<node_internals>/**",
        "node_modules/**",
        "/**/*.js",
        "/**/*.css",
        "/*\\.js"
      ],
      "userDataDir": "${workspaceFolder}/.vscode/chrome",
      "dependsOn": "Run Script: dev"
    }
  ],
  "compounds": [
    {
      "name": "SvelteKit Full Debug",
      "configurations": ["Run Script: dev", "Launch Chrome"],
      "parallel": false // 关闭并行，强制按配置顺序执行
    }
  ]
}

额外优化：等待服务端口就绪 #

如果服务器启动较慢，可添加预启动任务确保端口就绪后再启动Chrome：
在.vscode/tasks.json中添加：

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Wait for Server",
      "type": "shell",
      "command": "while ! nc -z localhost 5173; do sleep 1; done",
      "windows": {
        "command": "powershell -Command \"while (-not (Test-NetConnection localhost -Port 5173 -InformationLevel Quiet)) { Start-Sleep 1 }\""
      },
      "isBackground": true,
      "problemMatcher": {
        "owner": "custom",
        "pattern": { "regexp": "." },
        "background": {
          "activeOnStart": true,
          "beginsPattern": ".",
          "endsPattern": "Connection succeeded"
        }
      }
    }
  ]
}

然后在Chrome调试配置中添加"preLaunchTask": "Wait for Server"即可。

内容的提问来源于stack exchange，提问作者Jesse Coble