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 - This way you can access global objects and the DOM of the document where the tests run. ... Another helpful feature is Karma’s debug test runner. Click on the big “DEBUG” button on the top-right.
🌐
Angular
angular.dev › guide › testing › debugging
Debugging tests • Angular
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.
🌐
Angular
v17.angular.io › guide › test-debugging
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.
🌐
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”).
🌐
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
🌐
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 - You can set breakpoints and step into in the code the unit tests calls, not just in the unit test itself. So do you want to step through your Angular service code via a the unit test? No problem! Treat unit test debugging just like you would debugging your application normally.
🌐
YouTube
youtube.com › angular university
💥 How to Debug Angular Component Tests - YouTube
This video is part of the Angular Testing Course - https://angular-university.io/course/angular-testing-course In this video, we will show how we can use the...
Published   May 10, 2019
Views   4K
Find elsewhere
🌐
Visual Studio Marketplace
marketplace.visualstudio.com › items
Angular/Karma Test Explorer - Visual Studio Marketplace
Extension for Visual Studio Code - Run your Angular Tests in the Sidebar of Visual Studio 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.
🌐
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 - { let component: BooksComponent; let fixture: ComponentFixture { expect(books.length).toBeGreaterThan(0); }); }); Run unit tests for Angular with the following command: ng test When the tests start running you will see the Karma test runner launch in the Chrome browser window.
🌐
Medium
medium.com › @michaelericksen_12434 › debugging-and-testing-angular-schematics-in-vs-code-8e697b73ad8c
Debugging and Testing Angular Schematics in VS Code | by Michael Ericksen | Medium
January 10, 2019 - In this post, I will cover setting up VS Code to debug unit tests for Angular schematics; debugging schematics outside of the unit test context; and a thought experiment about how we might improve the development lifecycle I mentioned above.
🌐
yearofmoo
yearofmoo.com › 2013 › 09 › advanced-testing-and-debugging-in-angularjs.html
Advanced Testing and Debugging in AngularJS - yearofmoo.com
Full-Spectrum testing with AngularJS & Karma taught us how to test certain areas of your AngularJS application, but how do we test efficiently? How do we debug a problem down the root cause? How do we skip tests, set breakpoints, and professionally mock-out our test components so that we can ...
🌐
Spark Code Hub
sparkcodehub.com › angular › testing › debug-unit-tests
Debugging Unit Tests in Angular: Techniques and Best Practices
Before diving into debugging, let’s review key concepts: Karma: Runs tests in browsers or headless environments, reporting results via the terminal or browser interface. ... TestBed: Angular’s testing module that simulates an Angular module, allowing you to configure dependencies and create component instances.
🌐
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.
🌐
BrowserStack
browserstack.com › home › guide › how to debug angular app in chrome
How to debug Angular App in Chrome | BrowserStack
May 30, 2025 - Navigate to the “Angular” tab that appears in the DevTools panel. ... Use Component Explorer to view the app’s component structure. Inspect component inputs, outputs, and state. Use Profiler to analyze performance and understand change detection behavior. ... BrowserStack makes Chrome debugging on Desktop as well as Mobile devices quite effortless. Developers and testers get instant access to Chrome DevTools on their chosen Desktop or Mobile handset.
🌐
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
🌐
Chrome Developers
developer.chrome.com › blog › case study: better angular debugging with devtools
Case Study: Better Angular Debugging with DevTools | Blog | Chrome for Developers
August 31, 2022 - Using Angular as a test pilot, the Chrome DevTools and Angular teams collaborated to offer you a better debugging experience. Other frameworks can ship similar changes.
🌐
Angular
docs.angular.lat › guide › test-debugging
Debugging tests - Angular
Prueba nuestras lecciones tutoriales completamente en el navegador, diseñadas para que adquieras experiencia práctica con Angular.
🌐
YouTube
youtube.com › watch
Improved Jest debugging experience in Angular - YouTube
Jest is user-friendly, has a great command-line interface, and most importantly it's fast. Jest is fast because doesn't have to spin up a browser but instead...
Published   January 12, 2022