Update for Angular version 9
The source files have been moved but you can still debug this way if you do the following steps
- In devtools, select the sources tab
- Press CTRL + P
- Type in the name of the file you want to debug

Valid for versions below 9
The other answers are completely valid answers but having been using Angular for around 18 months now I tend to do it in the browser - chrome tools!
Run ng test then f12 and find the spec file via the webpack context. Add a breakpoint(s) and refresh and it will hit said breakpoints. As per screenshot
Update for Angular version 9
The source files have been moved but you can still debug this way if you do the following steps
- In devtools, select the sources tab
- Press CTRL + P
- Type in the name of the file you want to debug

Valid for versions below 9
The other answers are completely valid answers but having been using Angular for around 18 months now I tend to do it in the browser - chrome tools!
Run ng test then f12 and find the spec file via the webpack context. Add a breakpoint(s) and refresh and it will hit said breakpoints. As per screenshot
This is what worked for me with:
- Angular 9.0.6 + Visual Studio Code 1.43.2
- Angular 8.2.13 + Visual Studio Code 1.39.2
- Angular 7, Angular CLI 1.0.* and Chrome on Windows 7.
Change configuration files
In your project root directory open karma.conf.js. Right after singleRun: false add , followed by this section:
customLaunchers: {
ChromeDebug: {
base: 'Chrome',
flags: [ '--remote-debugging-port=9333' ]
}
}
Add configuration to .vscode/launch.json.
For versions 8.* - 9.* (note
"pathMappingsection!):{ "type": "chrome", "request": "attach", "name": "Unit tests", "address": "localhost", "port": 9333, "sourceMaps": true, "webRoot": "${workspaceFolder}", "pathMapping": { "/_karma_webpack_": "${workspaceFolder}" } },For version 7.*:
{ "type": "chrome", "request": "attach", "name": "Unit tests", "address": "localhost", "port": 9333, "sourceMaps": true, "webRoot": "${workspaceFolder}" },
Start debugging
Run
ng test --browsers ChromeDebugWait for Chrome browser to start. You will see something like this in command line:
01 06 2017 16:07:29.276:INFO [launcher]: Launching browser ChromeDebug with unlimited concurrencySet the breakpoint in one of your
.spec.tsfiles.In Visual Studio Code choose
Unit testsdebug configuration and hit F5 ("Start Debugging" button).Press
Shift+Ctrl+F5or refresh the Chrome window to rerun the tests and hit the breakpoint.
For convenience
You can also modify your package.json and add a new script:
"test-debug": "ng test --browsers ChromeDebug",
Then next time you want to start ng test with debugging just run:
npm run test-debug
References:
- Debugging Jasmine Unit tests running with Karma runner in VS Code
- Debugging Karma tests with VSCode
- Angular CLI 8.1.3
Debug Unit Testsconfiguration - Unverified breakpoint - microsoft/vscode-recipes - Chrome Debugging with Angular CLI
I was looking for something similar, and found this: https://github.com/usrz/javascript-karma-verbose-reporter. Generates this kind of output:
$ karma start --reporters=verbose
Suites and tests results:
- the app.router.config module :
* contains a router property : ok
* configures the router title : ok
* should have a login route : ok
- the organization module :
* contains a state property : ok
* should have a streams route after configuration : ok
* when activated, should set state based on organization in route : ok
- the streams module :
* points to state : ok
* loads organization streams upon activation : ok
* loads organization streams via API : ok
Browser results:
- PhantomJS 1.9.8 (Mac OS X 0.0.0): 9 tests
- 9 ok
To make this a default option, you can add this to your karma config, e.g.:
reporters: ['verbose', 'junit']
Following from @Carles Barrobés's answer. The original question was talking about angular applications. So I thought I would list the steps to get this to work with ng test
Install verbose reporter:
npm install --save-dev karma-verbose-reporter
Update your karma.conf.js file to include the following:
module.exports = function (config) {
config.set({
plugins: [
require('karma-verbose-reporter')
],
reporters: ['verbose']
});
};
Note, I have only included settings relevant to reporting, of course, leave your other settings in the config file as is.
Now you can run ng test to get verbose output
» npm install ng-test-utils