Debug Typescript protractor tests with VSCode

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?

I think protractor overrides the source-map-support that ts-node installs. Not sure what the solution is yet. — CletusW, Jan 04 '17 at 22:17

score 2 · Answer 1 · answered Jan 04 '17 at 22:35

2

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.

answered Jan 04 '17 at 22:35

CletusW

3,890
1
27
42

Zbyl · Answer 2 · 2021-03-12T10:51:00.870

0

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

edited Mar 12 '21 at 10:51

answered Feb 10 '21 at 09:54

Zbyl

2,130
1
17
26

1

FYI that vscode throws a warning "rseolveSourceMapLocations" not allowed when you try to add this. – Tyler Nielsen Mar 10 '21 at 15:44
1

@TylerNielsen I have clarified that it works only for `pwa-node` type. `node` type doesn't support it, that is why you get the warning. – Zbyl Mar 12 '21 at 10:51

score 0 · Answer 3 · answered Mar 10 '21 at 16:40

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.

Debug Typescript protractor tests with VSCode

3 Answers3