VSCode调试基于ts-node的Protractor-Cucumber Angular E2E测试断点失效

1. 调整 tsconfig.e2e.json 配置 #

把源映射改为内嵌模式，确保ts-node生成的内存代码携带完整映射信息：

{
    "compilerOptions": {
        "outDir": "../dist/out-tsc/e2e",
        "module": "commonjs",
        "sourceMap": false,
        "inlineSourceMap": true,
        "inlineSources": true,
        "target": "es6",
        "types": [
            "chai",
            "chai-as-promise",
            "node"
        ]
    }
}

inlineSources会把TypeScript源文件内容内嵌到源映射中，调试器不需要查找原文件路径即可匹配断点

2. 修改 protractor.conf.js 中的 ts-node 注册配置 #

强制ts-node启用源映射生成，覆盖可能的默认配置：

async onPrepare() {
    console.log("Register TypeScript compiler for tests");
    require('ts-node').register({
        project: require('path').join(__dirname, './tsconfig.e2e.json'),
        compilerOptions: {
            sourceMap: false,
            inlineSourceMap: true,
            inlineSources: true
        }
    });

    console.log("Setting waitForAngularEnabled to false");
    browser.waitForAngularEnabled(false);
}

3. 重写 launch.json 调试配置 #

不要通过npm脚本启动调试，避免npm fork子进程导致调试器无法关联映射：

{
    "name": "Debug E2E Tests",
    "type": "pwa-node",
    "request": "launch",
    "cwd": "${workspaceFolder}",
    "program": "${workspaceFolder}/node_modules/protractor/bin/protractor",
    "args": ["${workspaceFolder}/e2e/protractor.conf.js"],
    "sourceMaps": true,
    "resolveSourceMapLocations": [
        "${workspaceFolder}/e2e/**",
        "!**/node_modules/**"
    ],
    "outFiles": [
        "${workspaceFolder}/dist/out-tsc/e2e/**/*.js",
        "${workspaceFolder}/e2e/**/*.ts"
    ]
}

• 直接指定protractor的入口文件作为启动程序，调试器会直接attach到测试进程
• outFiles配置覆盖了内存编译产物和本地文件的匹配规则，帮助VSCode快速定位断点对应的编译后代码

4. 可选验证操作 #

如果上述配置完成后断点仍未绑定，可做如下检查：

• 确认ts-node版本为v9+，该版本修复了大量内存源映射匹配问题，兼容Node v14
• 不要在空行、注释、类型定义行上打断点，仅在可执行逻辑行上设置断点
• 临时关闭VSCode的断点优化功能，在设置中搜索debug.allowBreakpointsEverywhere并设为true

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