Debugging angular 4 Jasmin/Karma tests with Visual Studio Code

remember how to debug with visual studio code an angular cli generated jasmin test.

Change the config:

add to visual studio code launch.config

...

{

"type": "chrome",

"request": "attach",

"name": "Attach to karma test runner",

"sourceMaps": true,

"port": 9333,

"webRoot": "${workspaceRoot}",

"sourceMapPathOverrides": {

"webpack:///*": "${workspaceRoot}/*"

}

},

add to karma conf.js

...

singleRun: false,

browsers: ['ChromeDebugging'],

customLaunchers: {

ChromeDebugging: {

base: 'Chrome',

flags: ['--remote-debugging-port=9333']

}

},

Start the debugging session:

ng test

set some breakpoints in visual studio code

start "Attach to Karma Tests" in Visual Studio Code

refresh karma page in chrome

and now happy bugging...