How to debug Karma tests in Visual Studio Code?

Question

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)?

Answer 1

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.