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

Answer from 72GM on Stack Overflow
Top answer
1 of 6
71

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

2 of 6
48

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 "pathMapping section!):

    {
      "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

  1. Run ng test --browsers ChromeDebug

  2. Wait 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 concurrency
    
  3. Set the breakpoint in one of your .spec.ts files.

  4. In Visual Studio Code choose Unit tests debug configuration and hit F5 ("Start Debugging" button).

  5. Press Shift+Ctrl+F5 or 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 Tests configuration - Unverified breakpoint
  • microsoft/vscode-recipes - Chrome Debugging with Angular CLI
🌐
Testing-angular
testing-angular.com › debugging-tests
Debugging tests – Testing Angular
February 17, 2021 - For example, to include only tests called counter.component.spec.ts, we call ng test with the --include option. ... The bundling is now fast and the feedback is almost instant when we change implementation or test code. Keep in mind to remove the test focus before committing your code. There are several tools that prevent fdescribe and fit from being committed. ... The Jasmine test runner is just another web page made with HTML, CSS and JavaScript. This means you can debug it in the browser using the developer tools.
🌐
Angular
angular.dev › cli › test
ng test • Angular
Enables debugging mode for tests, allowing the use of the Node Inspector.
🌐
Angular
v17.angular.io › guide › test-debugging
Debugging tests
Angular is a platform for building mobile and desktop web applications. Join the community of millions of developers who build compelling user interfaces with Angular.
🌐
DEV Community
dev.to › alisaduncan › how-to-level-up-your-angular-unit-testing-game-13-7a1
How To Level Up Your Angular Unit Testing Game (1/3) - DEV Community
January 21, 2019 - Using the command ng test automatically starts running your test in Chrome in watch mode. That means you can make changes in your code and it will automatically re-run tests for you.
🌐
Medium
medium.com › nextfaze › debug-angular-10-karma-tests-in-vscode-9685b0565e8
Debug Angular 12 Karma Tests in VSCode | by Zak Barbuto | NextFaze | Medium
October 4, 2021 - We use "type": "pwa-chrome" instead of just "chrome" in the latest VSCode so we don’t need the Debugger for Chrome extension. However, if you have that extension installed, feel free to substitute "pwa-chrome" for "chrome" — the rest of the config can remain the same. "restart": true ensures that the task keeps running even when our tests exit — useful if you are testing files one at a time, for example. Run your Angular tests however you like — either via ng test in the terminal and then run the “Attach to Karma” configuration or just run the the “Run test file” launch configuration with a spec test file open in the editor (note that the Attach to Karma” task still needs to be running in the background when running “Run test file”).
🌐
Angular
angular.dev › guide › testing › debugging
Debugging tests • Angular
For example, you can use the built-in Node.js debugger in VS Code or the Chrome DevTools for Node.js. The same way you start a debugging session with in Node, you can use ng test with the --debug flag with Vitest and browser mode.
🌐
YouTube
youtube.com › watch
💥 How To Debug Angular Tests - A Step-by-Step Example of How To Troubleshoot a Failing Test - YouTube
This video is part of the Angular Advanced Library Laboratory: Build Your Own Library Course - https://angular-university.io/course/angular-advanced-course?...
Published   May 23, 2017
Find elsewhere
🌐
Angular
v17.angular.io › cli › test
ng test
Angular is a platform for building mobile and desktop web applications. Join the community of millions of developers who build compelling user interfaces with Angular.
🌐
GitHub
github.com › angular › angular-cli › issues › 27117
How to debug jest tests? · Issue #27117 · angular/angular-cli
February 16, 2024 - I've currently invented a workaround. Unfortunately, without a proper ng test --build command, I had to revert to ng test || exit 0. This will build and run the tests once before debugging can start.
Author   nicojs
🌐
Andrewhalil
andrewhalil.com › 2021 › 05 › 18 › debugging-angular-unit-tests-with-the-karma-test-runner
How to Debug Angular Unit Tests with the Karma Test Runner – andrewhalil.com
May 18, 2021 - ng test · When the tests start running you will see the Karma test runner launch in the Chrome browser window. There is also a Debug button shown in the top right corner. Once you have clicked on this you will be taken to the next screen, your tests will be in debug mode.
🌐
GitHub
github.com › angular › angular-cli › issues › 13154
ng test: Debug with VS Code (Unverified Breakpoint) · Issue #13154 · angular/angular-cli
December 8, 2018 - > yarn ng --version · Angular CLI: 7.1.2 Node: 11.3.0 Yarn: 1.12.3 OS: darwin x64 (Mojave 10.14.1) Angular: 7.1.2 · > npx @angular/cli@7.1.2 new explorer · Launch VS Code and configure tests for debugging (Refer: https://github.com/Microsoft/vscode-recipes/tree/master/Angular-CLI#configure-launchjson-file) { "name": "ng test", "type": "chrome", "request": "launch", "url": "http://localhost:9876/debug.html", "webRoot": "${workspaceFolder}" }, yarn test and Start debugging from VS Code (opens a separate chrome window) Breakpoints are not hit (Unverified breakpoint) No logs ·
🌐
GitHub
github.com › angular › angular-cli › issues › 17488
VSCode: Debug breakpoints not working for ng test · Issue #17488 · angular/angular-cli
April 16, 2020 - Open applications folder in Visual Studio Code and add breakpoints to any test case inside projects/admin-console/src/app/app.component.spec.ts · Start debugging (This should launch a new chrome window)
Author   prabh-62
🌐
Studiolacosanostra
studiolacosanostra.github.io › 2019 › 05 › 16 › How-to-debug-Angular-tests-in-VSCode
How to debug Angular tests in VSCode
April 14, 2024 - And when you need to check what is happening in a given test, all you have to do is insert a breakpoint on a given line or add debugger, press F5 and you have everything you need.
🌐
Spark Code Hub
sparkcodehub.com › angular › testing › debug-unit-tests
Debugging Unit Tests in Angular: Techniques and Best Practices
Master debugging unit tests in Angular with this comprehensive guide Learn practical techniques to identify and resolve test failures from DOM issues to asynchronous behavior using Karma Jasmine and tools like VS Code
🌐
DEV Community
dev.to › angular › setup-jest-for-angular-with-debugging-in-visual-studio-code-2d96
Setup Jest for Angular with Debugging in Visual Studio Code - DEV Community
July 18, 2023 - This article aims to describe a really fast step-by-step way to setup Jest testing for Angular projects including debugging capabilities of Visual Studio Code.
🌐
Ossez
angular.ossez.com › guide › test-debugging
Debugging tests - Angular
Angular is a platform for building mobile and desktop web applications. Join the community of millions of developers who build compelling user interfaces with Angular.
🌐
Visual Studio Marketplace
marketplace.visualstudio.com › items
Jest ng-test Runner - Visual Studio Marketplace
Extension for Visual Studio Code - Enables you to run and debug induvidual test files and tests using Angular CLI
🌐
GitHub
github.com › Microsoft › vscode-recipes › tree › master › Angular-CLI
vscode-recipes/Angular-CLI at master · microsoft/vscode-recipes
February 27, 2019 - Please note: Running npm run test ... in package.json. ... After the test run, go to the Debug view, select the 'ng test' configuration, then press F5 or click the green button....
Author   microsoft