使用 VSCode 调试 Typescript 量角器测试

Question

I have angular app with e2e tests in typescript and i want to run debug in VSCode. I went to read.me to see how to run debug and it was easy. But my problem is that breakpoint in typescript tests is not stopping. As I see i have sourcemap problem which are not generated.

tsconfig.json

{
  "compileOnSave": true,
  "compilerOptions": {
    "declaration": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "target": "es5",
    "typeRoots": [
      "../node_modules/@types"
    ]
  }
}

launch.json

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch",
            "type": "node",
            "request": "launch",
            "program": "${workspaceRoot}/node_modules/protractor/bin/protractor",
            "stopOnEntry": false,
            "sourceMaps": true,
            "cwd": "${workspaceRoot}",
            "args": [
                "${workspaceRoot}/protractor.conf.js"
            ]
        }
    ]
}

protractor.conf.js

// Protractor configuration file, see link for more information
// https://github.com/angular/protractor/blob/master/docs/referenceConf.js

/*global jasmine */
var SpecReporter = require('jasmine-spec-reporter');

exports.config = {
  allScriptsTimeout: 11000,
  specs: [
    './e2e/**/*.e2e-spec.ts'
  ],
  capabilities: {
    'browserName': 'chrome'
  },
  directConnect: true,
  baseUrl: 'http://localhost:4200/',
  framework: 'jasmine',
  jasmineNodeOpts: {
    showColors: true,
    defaultTimeoutInterval: 30000,
    print: function() {}
  },
  useAllAngular2AppRoots: true,
  beforeLaunch: function() {
    require('ts-node').register({
      project: 'e2e'
    });
  },
  onPrepare: function() {
    jasmine.getEnv().addReporter(new SpecReporter());
  }
};

As i understand ts-node is compiling ts to js and probably its not generation sourcemap or they are stored in somespecific location

What I am doing wrong?

Answer 1

Looks like Protractor is calling into source-map-support itself, which is overriding the call that ts-node makes.

Try enabling the skipSourceMapSupport option in your protractor.conf.js.

Answer 2

Adding the following to laumch.json worked in my case:

      "type": "pwa-node",
      ...
      "sourceMaps": true,
      "resolveSourceMapLocations": [
        "${workspaceFolder}/**",
        "!**/node_modules/**"
      ],

( skipSourceMapSuppor: true did not work.)

Edit: This works only for type pwa-node , not node . This targets the new debugger. See this answer for details: https://stackoverflow.com/a/63662561/407758

Answer 3

This is an old post, but hopefully this helps others who stumble on this. As you mentioned, with ts-node, there aren't any files being written to disk in workspace the same way they would if you compiled using tsc . The way to get breakpoints to hit is to register ts-node when you run protractor.

Try this (note the addition to the args property).

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch",
            "type": "node",
            "request": "launch",
            "program": "${workspaceRoot}/node_modules/protractor/bin/protractor",
            "args": [
                "${workspaceRoot}/protractor.conf.js",
                "--require", "ts-node/register"
            ]
            "stopOnEntry": false,
            "sourceMaps": true,
            "cwd": "${workspaceRoot}",
        }
    ]
}

In my launch.json, I've also included the following to ensure that I'm not going into code that doesn't belong to me (as mentioned in skipping uninteresting code in vscode's documentation).

"skipFiles": [
   "<node_internals>/**",
   "${workspaceRoot}/node_modules/**",
]

I seem to be having problems with this however. It breaks on my code and skips node_modules folder, but I still see it breaking on some node_internals files. I have yet to find out why, but at least I can step through code.