如何在 Visual Studio 代码中调试 Karma 测试？

Question

我想在 VS Code 中调试 Karma 测试，但我不知道如何做。有什么办法可以做到这一点，还是我必须使用另一个 IDE (WebStorm)？

Answer 1

尝试

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

您可以通过将调试器附加到 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 实例，开发工具会监听 9333 端口，如下所示：

browsers: [
  'ChromeDebugging'
],

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

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

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

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

使用 Angular CLI 1.7.4：通过以下步骤，我能够使用 Visual Studio 代码：

调试 hello world Angular 应用程序

生成一个新的 HelloWorld 项目：

ng new HelloWorld
在Visual Studio代码中打开项目

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并设置断点：
Select "Karma Tests" 在调试菜单中：
按F5开始调试。 VSCode 应该在断点处停止：

Answer 5

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

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

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

Answer 6

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

Answer 7

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

以前我们不需要调试那些 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的flag。不知何故，对于其他队友来说，他们不需要这个标志。但对我来说，没有它我无法正确启动 Chrome 实例，如下所示。

下面是成功启动的Chrome实例，flag为--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}/*"
      }
    },

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

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

Answer 8

测试必须运行使用源映射才能工作（默认情况下为真）

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命令行界面：10.1.2 节点：12.18.3

Answer 9

triade 的配置 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'],
      }
    }
  });
};

如何在 Visual Studio 代码中调试 Karma 测试？

How to debug Karma tests in Visual Studio Code?

visual-studio

karma-runner

visual-studio-code

VS 代码

咕噜

业力