How to debug Karma tests in Visual Studio Code?

I want to debug Karma tests in VS Code but I did not find out how. Is there any way to do that or will I have to use another IDE (WebStorm)?

You can debug Karma by attaching the debugger to a Chrome instance. You'd want to set your launch.json config to something like this:

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

But you also need to adjust your karma.conf.js config, so that it launches Chrome instance with dev tools listening to 9333 port, like so:

browsers: [
  'ChromeDebugging'
],

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

With such setup you can just run your karma server (with captured browser), and then start debugging in visual studio.

If you'd like to find more details I made a tutorial on debugging Karma with Visual Studio Code.

Using Angular CLI 1.7.4: With the following steps I was able to debug a hello world Angular application with Visual Studio Code:

1. Generate a fresh HelloWorld project:

   ng new HelloWorld

2. Open the project in Visual Studio Code

   code HelloWorld

3. Create a new Debug configuration:

   

4. A .vscode/launch.json file is generated and opened. Replace its content by the following:

{
    // 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. Open karma.conf.js and perform the following change:

   

6. Open a terminal and start karma tests:

   ng test

7. Open app.component.spec.ts and set a break point:

   

8. Select "Karma Tests" in the debug menu:

   

9. Press F5 to start debugging. VSCode should stop at the breakpoint:

   

Here's a simpler configuration (in launch.json):

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

Important:

• Change webRoot to the folder where Karma is serving your tests from.
• This assumes that Karma is running on port 9876. If it's not, change the url accordingly.

This configuration is simpler for a number of reasons:

• You don't need to remember to hit the Debug button in Karma's UI, or refresh the page after attaching the debugger.
• You don't need to add a custom launcher to your Karma configuration. You just need to make sure you have singleRun: false. You could even set browsers: [], since VS Code will launch its own browser (in headless mode, so you won't see it).
• I run in headless mode because you don't need to see the browser anymore, since you can do the debugging in VS code.
• Note that you still need to start up Karma before launching the debugger. You could improve this configuration by adding a preLaunchTask that starts Karma automatically. You'll need to configure it as a background task.

For anyone who got here looking for angular debugging karma tests - see the vscode-recipe from microsoft.