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?

0
4 comments

Please share a screenshot of your JavaScript Debug run configuration

0

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?

0

>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?

 

0

Try refreshing the browser page - will it be hit?

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.

1

Please sign in to leave a comment.