How to debug Karma tests in Visual Studio Code?

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.

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.

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

Generate a fresh HelloWorld project:

ng new HelloWorld
Open the project in Visual Studio Code

code HelloWorld
Create a new Debug configuration:
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}/*"
            }
        }
    ]
}