如何在 Visual Studio Code 中调试 Karma 测试？

Question

我想在 VS Code 中调试 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，以便它使用监听9333 端口的开发工具启动Chrome 实例，如下所示：

browsers: [
  'ChromeDebugging'
],

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

通过这样的设置，您只需运行 karma 服务器（使用捕获的浏览器），然后在 Visual Studio 中开始调试。

如果您想了解更多详细信息，我在debugging Karma with Visual Studio Code 上做了一个教程。

Answer 2

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

1. 生成一个新的 HelloWorld 项目：

   ng new HelloWorld

2. 在 Visual Studio Code 中打开项目

   code HelloWorld

3. 创建一个新的调试配置：

4. 生成并打开一个.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}/*"
            }
        }
    ]
}

5. 打开karma.conf.js并执行以下更改：

6. 打开终端并开始业力测试：

   ng test

7. 打开app.component.spec.ts并设置断点：

8. 在调试菜单中选择“Karma 测试”：

9. 按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 中点击“调试”按钮，或在附加调试器后刷新页面。
• 您无需将自定义启动器添加到您的 Karma 配置中。你只需要确保你有singleRun: false。你甚至可以设置browsers: []，因为 VS Code 会启动它自己的浏览器（在无头模式下，所以你不会看到它）。
• 我以无头模式运行，因为您不再需要查看浏览器，因为您可以在 VS 代码中进行调试。
• 请注意，在启动调试器之前，您仍然需要启动 Karma。您可以通过添加自动启动 Karma 的 preLaunchTask 来改进此配置。您需要将其配置为 background task。

Answer 4

对于任何来这里寻找角度调试业力测试的人 - 请参阅来自微软的 vscode-recipe。

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

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

以前我们不需要调试那些 karma 单元测试。在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 实例，如下所示。

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

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

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

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

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

Answer 7

我遵循 @Awsed 的出色解释 [谢谢！] 并且能够让事情正常进行，但有几个值得注意的警告：

VSCode 中似乎存在一个错误，无法跟踪规范文件中的断点行。即使在正确设置之后我也没有达到我的断点，因为 VSCode 似乎对断点所在的行感到困惑，特别是如果您更改任何代码。我找不到解决办法（即使在两次重新启动并多次重新启动 VSCode 之后）。我只能通过转到一个有一段时间没有更改的测试文件才能发现这一点，并且能够成功地击中断点。因此，我将断点移动到我遇到问题的文件页面中的不同位置，并且能够找到它（最终）会命中断点的位置。

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

Answer 8

三元组 VScode - Grunt - Karma 的配置：

VS 代码

launch.json

{
   "version":"0.2.0",
   "configurations":[
      {
         "type":"pwa-chrome",
         "request":"attach",
         "name":"Attach to Karma",
         "webRoot":"${workspaceRoot}",
         "address":"localhost",
         "port":9222,
         "timeout":180000, /* ! if required increase this value */
         "pathMapping":{
            "/":"${workspaceRoot}",
            "/base/":"${workspaceRoot}/"
         }
      },
      {
         "type":"pwa-node",
         "request":"launch",
         "name":"test.debug",
         "skipFiles":[
            "<node_internals>/**"
         ],
         "program":"${file}",
         "cwd":"${workspaceFolder}",
         "preLaunchTask":"test.debug"
      }
   ],
   "compounds":[
      {
         "name":"# App Angular Unit Tests Debugging",
         "configurations":[
            "test.debug",
            "Attach to Karma"
         ],
         "stopAll":true
      }
   ]
}

tasks.json

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "test.debug",
      "type": "shell",
      "command": "npx",
      "args": [
        "grunt",
        "unit_test_debug"
      ]
    }
  ]
}

咕噜声

/* .. */

    grunt.initConfig({
        karma: {
            options: {
                configFile: '{path_to_karma_config}/karma.config.js',
                files: [
                    /* ... */ 
                ]
            },

            debugging:{
              browsers:['ChromeDebugging'],
              singleRun: false
            }
        },

    });

    function registerTasks() {
        const tasks = [
          /* .. */          
          {
            unit_test_debug: ['karma:debugging']
          }];

          /* .. */
        }
    }

    registerTasks();

业力

module.exports = (config) => {

  config.set({
    /* .. */

    browsers: ['ChromeDebugging'],

    customLaunchers: {
      /* .. */
      ChromeDebugging: {
        base: 'ChromeHeadless', // 'Chrome'
        flags: ['--remote-debugging-address=0.0.0.0', '--remote-debugging-port=9222', '--disable-web-security'],
      }
    }
  });
};

Answer 9

试试

{
    "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"
    }
}