如何在Visual Studio Code中配置启动服务器并调试Protractor测试

我之前也碰到过一模一样的问题——单独启动Protractor调试确实不会自动拉起Angular服务器，导致测试因为找不到目标页面直接失败。下面是两种可行的方案，都能完美保留VS Code的断点调试功能：

方案一：使用VS Code复合调试配置（推荐） #

这种方式能让VS Code自动先启动开发服务器，等服务器就绪后再启动Protractor调试，步骤清晰且稳定：

1. 创建/更新.vscode/tasks.json，添加启动Angular服务器的任务：

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Start Angular E2E Server",
      "type": "npm",
      "script": "start", // 对应package.json里的"start": "ng serve"，如果你的e2e用特定端口/配置，可改成"ng serve --configuration e2e"
      "isBackground": true,
      "problemMatcher": {
        "owner": "typescript",
        "fileLocation": "absolute",
        "pattern": "$tsc",
        "background": {
          "activeOnStart": true,
          "beginsPattern": ".*Angular Live Development Server is listening on.*",
          "endsPattern": ".*Compiled successfully.*"
        }
      }
    }
  ]
}

2. 更新.vscode/launch.json，添加复合配置和调试项：

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Protractor Tests",
      "program": "${workspaceRoot}/node_modules/protractor/bin/protractor",
      "args": ["${workspaceRoot}/protractor.conf.js"],
      "skipFiles": ["<node_internals>/**"],
      "outFiles": ["${workspaceFolder}/dist/**/*.js"]
    }
  ],
  "compounds": [
    {
      "name": "Start Server + Debug E2E",
      "configurations": ["Start Angular E2E Server", "Launch Protractor Tests"],
      "stopAll": true
    }
  ]
}

现在你只需要在VS Code调试面板选择Start Server + Debug E2E，就能自动完成「启动服务器→等待编译完成→启动Protractor调试」的全流程，断点也能正常触发。

方案二：在调试配置中先执行启动命令（带延迟控制） #

如果不想用复合配置，也可以直接在Protractor的调试配置里集成服务器启动逻辑，不过需要处理服务器启动的延迟问题：

1. 安装wait-on工具（用来等待服务器端口就绪，避免提前跑测试）：

npm install wait-on --save-dev

2. 修改.vscode/launch.json，更新调试配置：

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch E2E with Server",
      "program": "${workspaceRoot}/node_modules/protractor/bin/protractor",
      "args": ["${workspaceRoot}/protractor.conf.js"],
      "skipFiles": ["<node_internals>/**"],
      "preLaunchTask": "Start Angular E2E Server",
      "runtimeArgs": [
        "--require", "${workspaceRoot}/node_modules/wait-on",
        "${workspaceRoot}/node_modules/wait-on/bin/wait-on http://localhost:4200"
      ]
    }
  ]
}

这里的preLaunchTask会先执行我们之前在tasks.json里定义的启动服务器任务，wait-on会等待服务器的4200端口就绪后，再启动Protractor测试，彻底避免因为服务器还没启动完成就跑测试导致的失败。

另外要注意，如果你用的是Angular CLI的e2e专用配置（比如protractor.conf.js里指定了不同的baseUrl），要确保服务器启动的端口和baseUrl完全一致。

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