Unable to hit breakpoints

[bronumski]

Ask the question
I have the test explorer configured. It correctly finds the tests and allows me to run them. Output is clearly displayed in the test explorer logs. However if I try and debug the tests the breakpoints are not hit and VSCode reports that there is a possible source mapping problem. It's a great tool but it would be better if I could configure this last part.

Additional context
tsconfig.spec.json

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/spec",
    "types": [
      "jasmine",
      "node"
    ]
  },
  "files": [
    "test.ts",
    "polyfills.ts"
  ],
  "include": [
    "**/*.spec.ts",
    "**/*.d.ts"
  ]
}

tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "module": "es2015",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "importHelpers": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2018",
      "dom"
    ]
  }
}

karma.conf.js

// Karma configuration file, see link for more information
// https://karma-runner.github.io/1.0/config/configuration-file.html

module.exports = function (config) {
  config.set({
    basePath: '',
    frameworks: ['jasmine', '@angular-devkit/build-angular'],
    plugins: [
      require('karma-jasmine'),
      require('karma-chrome-launcher'),
      require('karma-jasmine-html-reporter'),
      require('karma-coverage-istanbul-reporter'),
      require('@angular-devkit/build-angular/plugins/karma')
    ],
    client: {
      clearContext: false // leave Jasmine Spec Runner output visible in browser
    },
    coverageIstanbulReporter: {
      dir: require('path').join(__dirname, '../coverage'),
      reports: ['html', 'lcovonly', 'text-summary'],
      fixWebpackSourcePaths: true
    },
    reporters: ['progress', 'kjhtml'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['Chrome'],
    singleRun: false
  });
};

angular.json

        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "src/karma.conf.js",
            "styles": [
              "src/styles.scss"
            ],
            "scripts": [],
            "assets": [
              "src/site.webmanifest",
              "src/browserconfig.xml",
              "src/assets"
            ]
          }
        },

[jcharlytown]

Hi,

I just ran into the exact same issue. To me it seems that karma causes this, as it adds prefix _karma_webpack_ to the source path. Following workaround fixes this for me. I modified the transient debugging config shipped with the extension to mind the prefix: In ~/.vscode/extensions/raagh.angular-karma-test-explorer-1.2.4/out/core/test-explorer/debugger.js add additional setting

"pathMapping": {
    "/_karma_webpack_": "${workspaceFolder}"
},

and restart vscode. Breakpoints should work now.

This is obviously a hack, but maybe we can get a extension option for this?

[Raagh]

Hey @jcharlytown @bronumski , thank you very much for reporting this. I will try to look it up this weekend and fix it, I will also see how complicated is for me to expose a json for the debugger on the vscode extension ui. Btw @jcharlytown if you are working with the code and want to help by submitting a pullrequest I would be more than willing to review it :)

[bronumski]

@jcharlytown - thanks for the work around, I am going to give it a shot later.
@Raagh - thanks for taking the time to look in to it.

[bronumski]

Thanks @jcharlytown, I can confirm that your work around worked for me.

[moudrick]

Thanks for the file location!
I use vscode-portable, so location was like ./data/extensions/raagh.angular-karma-test-explorer-1.2.4/out/core/test-explorer/debugger.js for me

Basically, to get it working, I had to replace configuration there with my built up actually working one from .vscode/launch.json. It looked like this:

          yield vscode.debug.startDebugging(workspaceFolder, {
               name: "Debug tests",
               type: "chrome",
               request: "launch",
               sourceMaps: true,
               webRoot: "${workspaceRoot}/web-ui", // web -ui  is the workspace-relative path to my angular project root, where angular.json located
               trace: "verbose",
               breakOnLoad: true,
               sourceMapPathOverrides: {
                   "*": "${webRoot}/*"
               },
           });

This configuration built up according to the link at medium

[Raagh]

From today's build, you can add a new property to configuration called debuggerConfiguration: this will take a JSON object containing the entire configuration you would use for using VSCode Debugger for Chrome.

No validation is done to these properties, it is your responsibility to use a configuration that works.

Please check the documentation to find the default configuration https://github.com/Raagh/angular-karma_test-explorer/blob/master/DOCUMENTATION.md.

thank you guys for making me notice this issue and giving me some motivation to go back to this project, hope that everything works better now.