Debugging Typescript/javascript in browser is slow to start up (2021.2, Chrome 93.0.4577.82)
I usually use the Chrome debugger to debug my TS/JS application, but this morning I decided to give IntelliJ's debugging a try. So instead of running my browser config, I debugged it. The login page for my app displayed in Chrome, in the generic user profile, but was unresponsive. I looked at the console in IJ, and it was v...e...r...y... s...l...o...w...l...y... showing the log messages I usually see at startup. Messages that usually say things like "Service foo loaded in 200ms" were instead saying "Service foo loaded in 14316ms". What the heck was going on?
I opened up the Chrome debugger for the browser, and it immediately started flashing like crazy - pausing at breakpoints and then resuming. At each pause, it would load a new TS file into the Source tab. It was as if it was hitting a breakpoint upon loading each new TS file, and then resuming.
That would certainly explain the slowdown!
So what's going on here? And, more importantly, what can I do to make it stop?
Please sign in to leave a comment.
Nope. But if I fill in the Remote URLs for the project structure, it is hit. That makes sense to me - we've got a complex set of modules, so I can imagine the editor having a hard time figuring out how to map everything on its own.
Please share a screenshot of your JavaScript Debug run configuration
OMG, I'm an idiot!
So, I unchecked that, and the app now loads nice and fast. Great!
But if I set a breakpoint in my TS code, execution doesn't stop at it. This isn't a breakpoint during page load, it's a breakpoint later on, while I'm using the app. It looks like I need to fill in the "optional" Remote URLs in order for this to work. Is that correct?
>So, I unchecked that, and the app now loads nice and fast. Great!
yes, this is what I suspected: this option enables a special Chrome feature that pauses execution on every newly loaded script. Once the loading is suspended, the IDE sets its breakpoints in the paused file and then resumes execution. With a large number of scripts, the start/stop overhead might be too much so the overall execution slows down. That's why the option is off by default
>But if I set a breakpoint in my TS code, execution doesn't stop at it. This isn't a breakpoint during page load, it's a breakpoint later on, while I'm using the app.
Try refreshing the browser page - will it be hit?