CODEWITHSUNDEEP
angulartypescriptprotractorvisual-studio-code
Vova Bilyachat
Vova Bilyachat

Reputation: 19484

Debug Typescript protractor tests with VSCode

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?

Upvotes: 5

Views: 2218

Answers (3)

Zbyl
Zbyl

Reputation: 2310

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

Upvotes: 0

Tyler Nielsen
Tyler Nielsen

Reputation: 615

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.

Upvotes: 0

CletusW
CletusW

Reputation: 3980

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.

Upvotes: 2

Related Questions