Question

您好我想在vs代码中调试karma测试，但我找不到方法。有没有办法做到这一点，或者我必须使用另一个IDE（WebStorm）？

Answer 1

您可以通过将调试器附加到Chrome实例来调试Karma。您需要将launch.json配置设置为以下内容：

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "attach",
            "name": "Attach Karma Chrome",
            "address": "localhost",
            "port": 9333,
            "pathMapping": {
                "/": "${workspaceRoot}/",
                "/base/": "${workspaceRoot}/"
            }
        }
    ]
}

但您还需要调整karma.conf.js config，以便启动Chrome实例并使用dev工具监听9333端口，如下所示：

browsers: [
  'ChromeDebugging'
],

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

通过这样的设置，您可以运行您的业力服务器（使用捕获的浏览器），然后在visual studio中开始调试。

如果您想了解更多详情，请在debugging Karma with Visual Studio Code上制作教程。

Answer 2

使用Angular CLI 1.7.4：通过以下步骤，我可以使用Visual Studio Code调试hello world Angular应用程序：

生成一个新的HelloWorld项目：

ng new HelloWorld
在Visual Studio Code中打开项目

code HelloWorld
创建新的调试配置：
一个.vscode/launch.json文件已生成并打开。将其内容替换为以下内容：

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Karma Tests",
            "sourceMaps": true,
            "webRoot": "${workspaceRoot}",
            "url": "http://localhost:9876/debug.html",
            // "runtimeArgs": [
            //     "--headless"
            // ],
            "pathMapping": {
                "/": "${workspaceRoot}",
                "/base/": "${workspaceRoot}/"
            },
            "sourceMapPathOverrides": {
                "webpack:///./*": "${webRoot}/*",
                "webpack:///src/*": "${webRoot}/*",
                "webpack:///*": "*",
                "webpack:///./~/*": "${webRoot}/node_modules/*",
                "meteor://app/*": "${webRoot}/*"
            }
        }
    ]
}

打开karma.conf.js并执行以下更改：
打开终端并开始业力测试：

ng test
打开app.component.spec.ts并设置一个断点：
在调试菜单中选择“业力测试”：
按F5开始调试。 VSCode应该在断点处停止：

Answer 3

这是一个更简单的配置（在launch.json中）：

{
    "type": "chrome",
    "request": "launch",
    "name": "Test",
    "sourceMaps": true,
    "webRoot": "${workspaceRoot}/Test",
    "url": "http://localhost:9876/debug.html",
    "runtimeArgs": [
        "--headless"
    ]
}

重要：

将webRoot更改为Karma为您提供测试的文件夹。

这假设Karma正在端口9876上运行。如果不是，请相应地更改url。

由于多种原因，此配置更简单：

您无需记住在Karma的UI中点击Debug按钮，或在附加调试器后刷新页面。

您无需在自己的Karma配置中添加自定义启动器。您只需要确保拥有singleRun: false。您甚至可以设置browsers: []，因为VS Code将启动自己的浏览器（在无头模式下，因此您将看不到它。）

我在无头模式下运行，因为您不再需要浏览器了，因为您可以在VS代码中进行调试。

请注意，在启动调试器之前，您仍需要启动Karma。您可以通过添加自动启动Karma的preLaunchTask来改进此配置。您需要将其配置为background task。

Answer 4

我在 Windows上使用angular/cli: "^8.3.25"和"karma": "1.3.0"，Chrome 79，VSCode 1.43.2和 VSCode 扩展名Debugger for Chrome 4.12.6 10 。

以前，我们不需要调试那些业力单元测试。在karma.config.js中使用以下设置。运行ng test --watch=true很好。

    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['ChromeHeadless'],
    browserNoActivityTimeout: 30000,
    singleRun: true

最近，我们需要在 VSCode 中调试单元测试。为此，请将karma.config.js中的设置从上方更改为下方。

    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: [
      'ChromeDebug'
    ],
    browserNoActivityTimeout: 30000,
    singleRun: true,
    customLaunchers: {
      ChromeDebug: {
        base: 'Chrome',
        flags: [
          '--no-sandbox',
          '--remote-debugging-port=9333'
        ]
      }
    }

注意，此处为--no-sandbox的标志。对于其他队友来说，他们不需要此标志。但是对我来说，没有它，我将无法正常启动Chrome实例，如下所示。

以下是成功启动的Chrome实例，带有--no-sandbox标志：

要在 VSCode 中调试单元测试，请将以下设置添加到 VSCode 的launch.json。

    {
      "type": "chrome",
      "request": "attach",
      "name": "Debug Unit Tests",
      "address": "localhost",
      "port": 9333,
      "webRoot": "${workspaceFolder}/src",
      "sourceMaps": true,
      "sourceMapPathOverrides": {
        "*": "${webRoot}/*"
      }
    },

注意，您可能需要更改上述设置中指定的文件夹的值以匹配您的设置。

现在，在运行ng test --watch=true后启动Chrome。然后从 VSCode 中，在 Debug 面板中选择Debug Unit Tests选项，按 F5 附加到单元测试的运行会话。返回启动的Chrome实例，点击 F5 刷新并重新运行测试，现在应该可以命中断点了。

Answer 5

测试必须与源映射一起运行才能正常工作（默认情况下为真）

ng test --source-map true

在配置下添加.vscode / launch.json：

 {
      "type": "chrome",
      "request": "launch",
      "name": "Karma Attach",
      "url": "http://localhost:9876/debug.html",
      "webRoot": "${workspaceFolder}",
      "pathMapping": {
        "/_karma_webpack_/": "${workspaceRoot}/"
      }
    }

Angular CLI：10.1.2 节点：12.18.3

Answer 6

尝试

{
    "name": "jasmine",
    "type": "node",
    "request": "launch",
    "program": "${workspaceRoot}/node_modules/jasmine/bin/jasmine.js",
    "stopOnEntry": false,
    "args": [
        "JASMINE_CONFIG_PATH=${workspaceRoot}/spec/support/jasmine.json"
    ],
    "cwd": "${workspaceRoot}",
    "runtimeArgs": [
        "--nolazy"
    ],
    "env": {
        "NODE_ENV": "development"
    }
}

Answer 7

对于到这里寻找角度调试业力测试的任何人，请参阅Microsoft的vscode-recipe。

Answer 8

我遵循@Awsed的出色解释[谢谢！]，并通过一些值得注意的警告使事情得以解决：

VSCode中似乎存在一个错误，该错误无法跟踪spec文件中的断点行。即使经过正确的设置，我也没有碰到断点，因为VSCode似乎对断点所在的行感到困惑，尤其是当您更改任何代码时。我对此无能为力（即使在两次重新启动并多次重新启动VSCode之后）。我只能通过转到一段时间未更改的测试文件来发现此问题，并且能够成功命中断点。因此，然后我将断点移动到了我遇到问题的文件页面上的不同位置，并能够找到一个（最终）到达断点的位置。

此外，我不建议无头运行Chrome，因为“停止”按钮不会终止该进程，并且您无法在任务管理器中找到它，因为它没有头-您必须使用命令将其终止（例如https://superuser.com/questions/1288388/how-can-i-kill-all-headless-chrome-instances-from-the-command-line-on-windows）；如果您不这样做，将无法再次运行它。

如何在visual studio代码中调试karma测试？

8 个答案: