Chrome debugger hangs after hitting breakpoint

[zrsio4]

Which @angular/* package(s) are the source of the bug?

Don't known / other

Is this a regression?

Yes

Description

Updated my project from 17 (browser builder, zones) to 18 (application builder, zones) Now the Chrome and Edge debugger becomes unresponsive after hitting a breakpoint. Memory usage jumps when opening the debugger and once it is frozen, oscillates almost 1.5GB with max of around 5GB every 5s or so. The older 17 project does not have such huge spike and it does not hang.

I'm not sure how to try to figure out what the issue is as the debugger itself is unusable.

Maybe relevant? Angular 18 project main.js 25,443kb main.js.map 40,934kb

Angular 17 project main.js 23,136kb main.js.map 23,260kb vendor.js 15,920kb vendor.js.map 25,428kb

I tried removing the source maps to see if that helps, but no luck. Any suggestions for exploration?

Please provide a link to a minimal reproduction of the bug

No response

Please provide the exception or error you saw

No response

Please provide the environment you discovered this bug in (run ng version)

Angular CLI: 18.2.1
Node: 20.16.0
Package Manager: npm 10.8.1
OS: win32 x64

Angular: 18.2.0
... animations, cdk, common, compiler, compiler-cli, core, forms
... localize, material, platform-browser
... platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1802.1
@angular-devkit/build-angular   18.2.1
@angular-devkit/core            18.2.1
@angular-devkit/schematics      18.2.1
@angular/cli                    18.2.1
@angular/flex-layout            15.0.0-beta.42
@schematics/angular             18.2.1
ng-packagr                      18.2.1
rxjs                            7.8.1
typescript                      5.5.4
zone.js                         0.14.10

Anything else?

No response

[JoostK]

This would be a Chrome issue. 25MB is quite a bit to chew through and there's probably something in the bundle that introduces pathological behavior, but this is ultimately a browser issue.

[zrsio4]

Turning optimization on brings the main.js file size down to 11,920kb. That does seem to prevent debugger hang. I didn't think going from 23Mb to 25Mb would take Chrome/Edge over the edge (I'm sure there's a browser joke in there somewhere)

[JoostK]

You could also try without sourcemaps, either by disabling them in the CLI config or in DevTools' settings menu.

It's not necessarily the 2MB, but supposedly the structure has changed in ways that DevTools doesn't like.

[zrsio4]

@JoostK I did try loading the page after removing the source maps, before turning optimization on, and that didn't help

[alxhub]

Hello, we reviewed this issue and determined that it doesn't fall into the bug report or feature request category. This issue tracker is not suitable for support requests, please repost your issue on StackOverflow using tag angular, or consider asking in the Angular Community Discord.

If you are wondering why we don't resolve support issues via the issue tracker, please check out this explanation.

[wartab]

fwiw the Chrome debugger has been acting up not just in Angular in the most recent version, regularly crashing and generally being extremely slow.

[JoostK]

Might be https://issues.chromium.org/issues/356533383