visual-studiokarma-runnervisual-studio-code

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


Solution

  • 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.