Debugging Karma Tests with angular-cli - Breakpoints are omitted

Hi,

1) I created a new angular-cli projekt using "ng new karmaTest".

2) Under Run/Debug-Configurations I created a new Karma configuration:

Note I did not add a compilation task to be run before launch, because as I understand it, angular-cli will comile typescript files into memory when I run this debug configuration.

Here is the karma.conf.js (that was automatically created using "ng new". I made minor changes like adding 'sourceMap' true because of the advice in an another forum post, but it did not help.):

3) I added breakpoints in the "app.component.spec.ts" and "app.component.ts".

4) I started the karma configuration using the Debug button.

5) In the browser I can see, the 3 karma tests passed. However my breakpoints are not invoked. Any idea as to why?

 I am using the newest release candidate Webstorm 2017.2 (but the problem was the same in 2017.12).
(In 2017.2 the new webpack package resolution is supported.) 

12 comments
Comment actions Permalink

If let me add something I would appreciate any information concerning running one karma test. I experience the same problem as @De Schubert Richard described, but also whenever I try to start a single tests all test are run again and all breakpoints are ignored. As I see the breakpoint ignore is angular-cli dependent, but what about running a single test? Thanks in advance for a response.

0
Comment actions Permalink

Can someone at Jetbrains please comment about when WebStorm will support this feature?  We are customers as well, and we need it.  Thanks.

 

0
Comment actions Permalink

Debugging karma tests works fine for me; if you have problems using this feature, please provide a project that shows it up

0
Comment actions Permalink

@Elena Thank you for replying, though where in this page was anyone only asking about debugging Karma tests?  If there is a way of debugging ng test runs using Angular CLI to run Karma specs using WebStorm where it stops on a breakpoint (since this page was always specifically about that use case), please give us the link to the WebStorm documentation page where it shows the procedure for getting that working, or type the procedure in here for us to try.  Thank you.

 

0
Comment actions Permalink

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:

"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.spec.json",
"sourceMap": true,
"karmaConfig": "src/karma.conf.js",
0
Comment actions Permalink

Its not working after upgrade to angular 6 and angular cli 6.1.2

0
Comment actions Permalink

Please make sure to enable sourcemaps - see above

0
Comment actions Permalink

Even with sourcemaps enabled, this doies not work with PHPStorm 2019.1 and Angular 7

0
Comment actions Permalink

works for me even if sourcemaps are not enabled explicitly (PhpStorm passes --source-map option when debugging karma in Angular apps to overcome the problem). Can you recreate the issue in a new project?

0
Comment actions Permalink

Hi Elena,

thanks for taking time to look at this.

I retested it and it works now. It seemed to be a hiccup whith an already running Karma instance. I guess the Problem was somehow related with the following workflow in an Angular 7 Project:

  1. Run Karma Configuration (not debug!)
  2. Right Klick on a (failing) test case -> Chose "Debug '<testname>'"

I'll watch out if this happens again and if can provide a reproducable example. Unfortunately I cannot do this with the Project where this happened, because of IP restrictions.

1
Comment actions Permalink

I see, thanks for update:)

Please keep me posted

0

Please sign in to leave a comment.