Chrome DevTools Debugger freezing once it hits breakpoint

Question

I have recently started working on a ReactJS webapp codebase that is bit out-dated and currently being tasked to modernize by upgrading to latest versions of dependencies and NodeJS 14 to LTS.

The problem I encounter is that sometimes, the Chrome Devtools debugger would freeze once it has hit the breakpoint, sometimes I will be able to see the stack trace calculated but cannot interact with the debugger anymore as it becomes unresponsive (even if I use keyboard shortcut F8 to try and resume)

One of my suspicion is that somehow it sees 2 folders in the Page > top > localhost:3000 I tried putting the 1st folder (C:/Dev/IntelliJ/xxx/src) into ignore list since those src files are misleading, ie. if you put breakpoints to those files, the debugger never hits them since the debugger is only looking at the 2nd folder (static/js)

However, I even if I put this in the ignore list, the debugger is still encountering freezing and would require me to close the tab itself as its unresponsive.

My chrome versions is up-to-date Version 127.0.6533.89 (Official Build) (64-bit)

Any help please?

Answer 1

I am developing a React app and using Chrome's debugger. When I click in the source code area, the debugger freezes. It seems like there is a timeout. After a while, the debugger works fine. Until the next freeze after a page reload. I cannot confirm that updating to the current version of Google Chrome (127.0.6533.100) will fix the problem.