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

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,以便它使用dev工具监听9333端口启动Chrome实例,如下所示:

browsers: [
  'ChromeDebugging'
],

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

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

如果您想了解更多详细信息,我制作了一个使用Visual Studio Code调试Karma的教程.

Answer 2

使用Angular CLI 1.7.4:通过以下步骤,我能够使用Visual Studio代码调试hello world Angular应用程序:

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

   ng new HelloWorld

2. 在Visual Studio代码中打开项目

   code HelloWorld

3. 创建一个新的Debug配置:

   

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 Tests":

   

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。您可以通过添加preLaunchTask自动启动 Karma来改进此配置。您需要将其配置为后台任务。

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

角度 CLI：10.1.2 节点：12.18.3