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
– CletusW, Commented Jan 4, 2017 at 22:17

CletusW · Accepted Answer · 2017-01-04 22:35:31Z

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 4, 2017 at 22:35

CletusW

4,0101 gold badge30 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Tyler Nielsen · Accepted Answer · 2021-03-10 16:40:57Z

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.

Zbyl · Accepted Answer · 2021-03-12 10:51:00Z

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, 2021 at 10:51

answered Feb 10, 2021 at 9:54

Zbyl

2,3201 gold badge23 silver badges27 bronze badges

2 Comments

Tyler Nielsen Over a year ago

FYI that vscode throws a warning "rseolveSourceMapLocations" not allowed when you try to add this.

Zbyl Over a year ago

@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.

Collectives™ on Stack Overflow

Debug Typescript protractor tests with VSCode

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related