How to debug unit tests with Karma / Jasmine in Visual Studio Code?

Question

I would like to be able to debug unit tests in Visual Studio Code, but so far it has been a mixed package.

My setup:

launch.json

{ "version": "0.2.0", "configurations": [         {             "name": "Debug tests",             "type": "chrome",             "request": "attach",             "port": 9222,             "sourceMaps": true,             "webRoot": "${workspaceRoot}"         } ] } 

karma.config.js

 customLaunchers: { Chrome_with_debugging: { base: 'Chrome', flags: ['--remote-debugging-port=9222'] } } 

This seems to work incorrectly if I run the VS Code debugger, which seems to attach (the bottom panel turns orange). If I make a change, Karma will hit the debugger too, but it always stops in zone.js (this is an Angular project by the way), without any intervention:

If I click Continue, it will actually hit my breakpoint

and I can check some variables, but not all of them,

For example, I do not see the actual value passed to the Jasmine expect method.

So, a) Why zone.js debugger always stop inside zone.js - the checked code from the Redux reducer and is called outside of any Angular context and b) What am I missing about the fact that you cannot check local variables (which is showstopper now)?

Answer 1

In karma.conf.js, I updated the added debug option in your version.

 customLaunchers: { Chrome_with_debugging: { base: 'Chrome', flags: ['--remote-debugging-port=9222'], debug: true }} 

launch.json Add below snippet as launch configuration,

 { "name": "Debug tests", "type": "chrome", "request": "attach", "port": 9222, "sourceMaps": true, "webRoot": "${workspaceRoot}" } 

Then the tests were run using the command below,

ng test --browsers Chrome_with_debugging

Use the Visual Studio Code Debugging Debugging Tests option to connect to UT. With this, I can debug unit tests using breakpoints in "Visual Studio Code + Debugger for Chrome Extension".

Hello

Basanth