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
Videos
Refer to this thread for more information:
https://github.com/karma-runner/karma-mocha/issues/47
karma.conf.js:
client: {
captureConsole: true,
mocha: {
bail: true
}
}
This question is totally wrong because Angular DO NOT call http request in unit test. You cannot print the truly response from request. The unit test "fake" the response of the request then put into place. If you come into same question as I do, please read documentation on Angular unit test again.
https://angular.io/guide/http#testing-http-requests