CODEWITHSUNDEEP
angulartypescriptgoogle-chromedebugginggoogle-chrome-devtools
Kurtis Jungersen
Kurtis Jungersen

Reputation: 2554

Angular TS SourceMaps Not Working In Chrome Debugger

Without any change in configuration, I can no longer debug Angular TS files in Chrome, either by setting manual breakpoints in Dev Tools or by debugger; statements. Facts of the situation:

What's strange, however, is that when I open the app in Safari, the debugger; breakpoints are hit, and I can set manual breakpoints in TS files just fine. So that leads me to believe that this is a Chrome issue and not an Angular configuration issue.

enter image description here Specs => Chrome: Version 75.0.3770.142 (up-to-date as of this post), Angular: 6.1.2 (Project requirement, so this can't be updated)

Upvotes: 2

Views: 7221

Answers (1)

Kurtis Jungersen
Kurtis Jungersen

Reputation: 2554

After writing this all up, I realized the issue was caused by having another Angular project directory loaded into Dev Tools. The automatic mapping was looking at the src directory of this other project rather than the current project I was working on.

  • The CSS was mapping because the other project uses .scss instead of .css, so no match was found there
  • TS debugging working in Safari because the other project had not been added to Safari Dev Tools

If anyone knows of a way to avoid this problem moving forward, please let me know! I work on multiple projects simultaneously very frequently, so it would be nice to not have to remove each project when switching to a new one.

Upvotes: 3

Related Questions