VS Code [angular] karma test debug breakpoints only work once or twice without restarting VS code

Question

I have been using VS code to debug my Angular jasmine karma tests for a while but I have always had a problem whereby after debugging a test several times the breakpoints stop working. I have to restart VS code to make them work again and it seems to be getting worse i.e. stops working after a single debug!

FYI, debugging works fine until it stops. After the breakpoints stop working they are still shown as attached (i.e. coloured in red) and the tests run correctly.

I have Karma Test Explorer (for Angular, Jasmine and Mocha) installed:

https://marketplace.visualstudio.com/items?itemName=lucono.karma-test-explorer

I have 'Test Explorer: Use Native Testing' enabled (but the issue happens without native testing too).

I do not use the launch.json to attach.

n.b. I often get a notification/error saying a test operation is still in progress/active when it gets into this state and restarting is the only way I know how to reset this!

My karma file is configure as like this:

module.exports = function (config) {
  config.set({
    basePath: "",
    frameworks: ["jasmine", "@angular-devkit/build-angular"],
    plugins: [
      require("karma-coverage"),
      require("karma-jasmine"),
      require("karma-chrome-launcher"),
      require("karma-jasmine-html-reporter"),
      require("karma-coverage-istanbul-reporter"),
      require("@angular-devkit/build-angular/plugins/karma"),
      require("karma-spec-reporter"),
      require("karma-junit-reporter"),
    ],
    client: {
      clearContext: false, // leave Jasmine Spec Runner output visible in browser
    },
    coverageIstanbulReporter: {
      dir: require("path").join(__dirname, "./coverage"),
      reports: ["html", "lcovonly", "text-summary", "cobertura"],
      fixWebpackSourcePaths: true,
    },
    // reporters: config.angularCli && config.angularCli.codeCoverage ? ['dots', 'coverage-istanbul'] : ['dots', 'kjhtml'],
    reporters:
      config.angularCli && config.angularCli.codeCoverage
        ? ["dots", "coverage-istanbul", "junit"]
        : ["dots", "kjhtml", "junit"],
    specReporter: {
      maxLogLines: 5, // limit number of lines logged per test
      suppressErrorSummary: true, // do not print error summary
      suppressFailed: false, // do not print information about failed tests
      suppressPassed: false, // do not print information about passed tests
      suppressSkipped: true, // do not print information about skipped tests
      showSpecTiming: false, // print the time elapsed for each spec
    },
    mime: {
      "text/x-typescript": ["ts", "tsx"],
    },
    port: 9876,
    colors: true,
    logLevel: config.LOG_ERROR,
    autoWatch: true,
    singleRun: false,
    files: [
      {
        pattern: "src/assets/**/*.png",
        watched: true,
        included: true,
        served: true,
        nocache: false,
      },
    ],
    proxies: {
      "/assets/": "/base/src/assets/images/fixtures",
    },
    restartOnFileChange: true,
    browsers: ["ChromeHeadlessNoSandbox"],
    customLaunchers: {
      ChromeHeadlessNoSandbox: {
        base: "ChromeHeadless",
        flags: [
          "--no-sandbox",
          "--user-data-dir=/tmp/chrome-test-profile",
          "--disable-web-security",
          "--remote-debugging-address=0.0.0.0",
          "--remote-debugging-port=9222",
        ],
        debug: true,
      },
    },
  });
};

Any help here would be greatly appreciated.

Answer 1

Check if other VS Code extensions are interfering. Disable them and test if the problem remains. If that doesn't work, uninstall and reinstall the Karma Test Explorer extension if it's a configuration issue.