Unit Test debugging no longer possible via chrome devtools

[72gm]

🐞 bug report

Affected Package

The issue is likely caused by the Ivy compiler?

Is this a regression?

Yes, the previous version in which this bug was not present was 7 (probably 8 but I upgraded from 7 to 9)

Description

You used to be able to use the source files to debug unit tests as per this stackoverflow https://stackoverflow.com/questions/43916649/debug-tests-in-ng-test/

🔬 Minimal Reproduction

see https://stackoverflow.com/questions/43916649/debug-tests-in-ng-test/

🌍 Your Environment

Angular Version:

I have tried turning the ivy compiler off but doesn't seem to work. As you can see from the popularity of this stack overflow this was quite a popular way of debugging

[alan-agius4]

Hi. please try the below configuration.

      {
        "name": "ng test",
        "type": "chrome",
        "request": "launch",
        "url": "http://localhost:9876/debug.html",
        "webRoot": "${workspaceFolder}",
        "sourceMaps": true,
        "sourceMapPathOverrides": {
            "webpack:/*": "${webRoot}/*",
            "/./*": "${webRoot}/*",
            "/src/*": "${webRoot}/*",
            "./*": "${webRoot}/*",
            "_karma_webpack_/*": "${webRoot}/*",
            "/./~/*": "${workspaceFolder}/node_modules/*"
        }
      },

More context https://github.com/microsoft/vscode-recipes/tree/master/Angular-CLI and #17488 (comment)

If the problem persists, please provide a minimal repro is to create a new app via ng new repro-app and add the minimum possible code to show the problem. Then you can push this repository to github and link it here.

Thanks.

[72gm]

Hi, this might be a valid answer to a different question...

in the stack overflow ( https://stackoverflow.com/questions/43916649/debug-tests-in-ng-test/ ) the accepted answer shows how you can debug in devtools (this is not running debugging via the chrome debug extension, which i've never been able to get to work properly)

the source files are no longer available e.g.

which previously was

[alan-agius4]

@72gm, they are indeed in a different location (they are not under context>localhost) but that shouldn't matter when adding breaking points, because you shouldn't be needing to navigate down those paths.

But rather, you can open a file directly in dev-tools. In Windows use CTRL + P, type the file name and add a breakpoint and you should be good to go.

https://stackoverflow.com/questions/14608075/how-to-go-to-a-specific-file-in-chrome-developer-tools

[72gm]

@alan-agius4 you are indeed correct ... i did not know about ctrl P so I've learned something today!

And it works so I'll update the stack overflow! Cheers

[alan-agius4]

Glad it worked out 😊

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}