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.

Answer 2

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: