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 - One way to prevent this confusion is to create a snapshot of the object. You convert the object to a JSON string:
Discussions

VSCode: Debug breakpoints not working for ng test
🐞 Bug report Command (mark with an x) new build serve test e2e generate add update lint xi18n run config help version doc Is this a regression? Not sure Description Breakpoints are not hit when deb... More on github.com
🌐 github.com
3
April 16, 2020
How to debug jest tests?
Command test Description How does one debug jest tests? Debugging a normal jest test run is documented here: https://jestjs.io/docs/troubleshooting#debugging-in-vs-code. It describes using jest wit... More on github.com
🌐 github.com
6
February 16, 2024
Cannot debug tests in Karma for projects generated with version CLI 6.1 or 6.2 - no source maps?
It seems there are no source maps included when in debug mode? I've tested this with the freshly generated projects and didn't include any other NPM modules. So I'm talking about the default state of a project generated with Angular CLI. It seems that adding the sourceMap property with the value of true, to the "test" architect node in angular.json... More on github.com
🌐 github.com
5
September 15, 2018
VSCode Debugging with Angular
You can just place break point straight in browser devtools (remember to enable sourcemap). You don't need to console.log More on reddit.com
🌐 r/Angular2
18
13
November 8, 2024
🌐
Angular
angular.dev › cli › test
ng test • Angular
Value TypearrayAllowed Valuescobertura, html, json, json-summary, lcov, lcovonly, text, text-summary ... Enables debugging mode for tests, allowing the use of the Node Inspector.
🌐
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 - Angular does not come with a launch.json for VSCode out of the box. What’s worse, if you do some Googling for “debugging karma tests in…
🌐
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 - You can add the following to your package.json: "scripts": { // ... "test": "ng test --coverage", "test:watch": "ng test --watch", // ... } As debugging via console-logs can be tedious, especially when your unit tests are running in headless ...
🌐
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) ... After setting "trace": "verbose" in launch.json, this is what I saw in /var/folders/d_/3l10r4h12g10trnbxjkcl__h0000gn/T/vscode-chrome-debug.txt
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 - Add the configuration to the file .vscode/launch.json · { "type": "chrome", "request": "launch", "name": "Debug karma tests", "url": "http://localhost:9876/debug.html", "webRoot": "${workspaceFolder}", "runtimeArgs": [ "--headless" ], "sourceMaps": true, "sourceMapPathOverrides": { "webpack:/*": "${webRoot}/*", "/./*": "${webRoot}/*", "/src/*": "${webRoot}/*", "/*": "*", "/./~/*": "${webRoot}/node_modules/*" }, "port": 9223 } Now all you have to do is run ng test in the background.
Find elsewhere
🌐
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.
🌐
Spark Code Hub
sparkcodehub.com › angular › testing › debug-unit-tests
Debugging Unit Tests in Angular: Techniques and Best Practices
Test Files: Confirm that · .spec.ts files exist and are included in the · specPattern (default: src//.spec.ts). To debug tests interactively, run Karma in a browser with debugging enabled: ng test --browsers=Chrome · This opens Chrome, where you can use the browser’s developer tools (F12) ...
🌐
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
🌐
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
🌐
GitHub
github.com › angular › angular-cli › issues › 27117
How to debug jest tests? · Issue #27117 · angular/angular-cli
February 16, 2024 - 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. The necessary sourceMapPathOverrides are hideous as well 🙈 · launch.json ·
Author   nicojs
🌐
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.
🌐
JetBrains
intellij-support.jetbrains.com › hc › en-us › community › posts › 115000445064-Debugging-Karma-Tests-with-angular-cli-Breakpoints-are-omitted
Debugging Karma Tests with angular-cli - Breakpoints are omitted – IDEs Support (IntelliJ Platform) | JetBrains
July 13, 2017 - There are no special procedures - debugging karma tests in angular-cli projects works out of the box: you can click the gutter icon next to the test in the editor and choose Debug<test name>: Just make sure to enable sourcemaps for test target in your angular.json - they are disabled by default:
🌐
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.
🌐
GitHub
github.com › angular › angular-cli › issues › 12282
Cannot debug tests in Karma for projects generated with version CLI 6.1 or 6.2 - no source maps? · Issue #12282 · angular/angular-cli
September 15, 2018 - It seems there are no source maps included when in debug mode? I've tested this with the freshly generated projects and didn't include any other NPM modules. So I'm talking about the default state of a project generated with Angular CLI. It seems that adding the sourceMap property with the value of true, to the "test" architect node in angular.json, resolves this issue to some extent.
Author   AmadejBukorovic
🌐
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 - We wrote some rudimentary unit tests that confirmed files appeared in the expected location of the file tree, but relied heavily on console.log statements to debug application issues. When it came time to make sure we had a fully functional application, we had little choice but to run the following set of commands: npm run build ng new demo-schematic --skipInstall=true # open VS code to see if the output code passes the eyeball test npm install ng serve
🌐
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 - 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. Running tests in watch mode is great when actively writing code, but sometimes you want to run the test just once.
🌐
Reddit
reddit.com › r/angular2 › vscode debugging with angular
r/Angular2 on Reddit: VSCode Debugging with Angular
November 8, 2024 -

Hello! I am a developer whose team is moving to Angular for the rewrite of our web application. I am going through training, and wanted to test some basic debugging through VSCode. I have been having some issues: If I set a breakpoint in VSCode, the browser starts just spinning, and becomes unresponsive, requiring me to kill the browser.

A new coworker of mine, who has worked with Angular in the past, says that there is no way to step through Angular in VSCode, something that I believe to be false through reading other online developer's experiences. I was also told that I should "just use console.log instead of browser debugging capabilities." (Somewhat irrelevant, but a head-scratcher)

But, right now I am having this block with debugging Angular with VSCode. I'm using just a template app from ng New and putting a breakpoint in app.component.ts where title gets set.

I am in development mode, and I'm using msedge.

Is there anything I'm missing, or is it really impossible to debug an Angular app through VSCode? I can sometimes get breakpoints to work temporarily through the javascript debugging terminal.