Angular（ng 测试）调试 - VS Code 不在断点处停止

Question

我目前遇到问题。我开始为我的 Angular 应用程序编写测试并想调试它们。现在我用谷歌搜索了很多，我尝试了来自 microsoft (https://github.com/Microsoft/vscode-recipes/tree/master/Angular-CLI) 的食谱，我最接近让它工作的是这个 BlogPost

http://blog.mlewandowski.com/Debugging-Karma-tests-with-VSCode.html

现在至少我可以将调试器附加到 VS-Code。但是 VS Code 仍然不会在断点处停止，但测试会继续运行。 VS Code 中的断点也将保持未经验证（见图）

这就是我目前所拥有的（我只提供我已更改的部分，而不是发布太多代码）。

任何想法我做错了什么？除了调试工作得很好。我可以调试我的 node.js 应用程序并且调试 ng serve 也可以正常工作。

launch.json

{
    "type": "chrome",
    "request": "attach",
    "name": "MyApp - Tests",
    "address": "localhost",
    "port": 9222,
    "pathMapping": {
        "/": "${workspaceRoot}",
        "/base/": "${workspaceRoot}"
    }
}

karma.conf.js

browsers: [
    'ChromeDebugging'
],

customLaunchers: {
    ChromeDebugging: {
        base: 'Chrome',
        flags: ['--remote-debugging-port=9222']
    }
}

Answer 1

将'pathMapping'添加到launch.json，如下所示：

{
        "name": "ng test",
        "type": "chrome",
        "request": "launch",
        "url": "http://localhost:9876/debug.html",
        "webRoot": "${workspaceFolder}",
        "sourceMaps": true,
        "pathMapping": {
            "/_karma_webpack_": "${workspaceFolder}"
        },
        "sourceMapPathOverrides": {
            "webpack:/*": "${webRoot}/*",
            "/./*": "${webRoot}/*",
            "/src/*": "${webRoot}/*",
            "/*": "*",
            "/./~/*": "${webRoot}/node_modules/*"
        }
    }

Answer 2

您是否安装了“Debugger for Chrome”扩展程序。

查看本指南。 https://github.com/Microsoft/vscode-recipes/tree/master/Angular-CLI

更新： 这是我的launch.json 也许你可以试试。

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "ng serve",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:4200/#",
      "webRoot": "${workspaceFolder}"
    },
    {
      "name": "ng test",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:9876/debug.html",
      "webRoot": "${workspaceFolder}"
    },
    {
      "name": "ng e2e",
      "type": "node",
      "request": "launch",
      "program": "${workspaceFolder}/node_modules/protractor/bin/protractor",
      "protocol": "inspector",
      "args": ["${workspaceFolder}/e2e/protractor.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'],
      fixWebpackSourcePaths: true
    },
    reporters: ['progress', 'kjhtml'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['Chrome'],
    singleRun: false
  });
};

Answer 3

最近在 VSCode 和 Intellij 中遇到了这个问题，它与 Angular CLi 在后台使用的 Webpack 中的源映射生成有关。我通过在 angular.json 中设置 evalSourceMap: "false" 解决了这个问题，请在此处查看完整答案https://stackoverflow.com/a/54883663/706012。

Answer 4

试试这个配置，它附加到一个正在运行的ng test 进程，端口在你的 karma.conf 中定义。 如果您在 karma.conf 中定义了多个浏览器，则可能必须使用 ng test --browser=ChromeDebugging 开始 ng 测试

{
        "name": "ng test",
        "type": "chrome",
        "request": "attach",
        "address": "localhost",
        "port": 9222,
        "webRoot": "${workspaceFolder}",
        "sourceMaps": true,
        "sourceMapPathOverrides": {
            "/./*": "${webRoot}/*",
            "/src/*": "${webRoot}/*",
            "/*": "*",
            "/./~/*": "${webRoot}/node_modules/*"
        }
}