React app slows to a crawl with chrome developer tools open. Works fine in incognito

Question

When developing my react app the app becomes unusably slow with the devtools open in chrome. Works fast and fine with them closed or in incognito mode. I have tried disabling all extensions and had the same problem. This seems to have started happening recently when I updated chrome (now on Version 80.0.3987.132).

I am not really sure where to start debugging this issue but it has become very frustrating to develop on my app.

Any advice or help debugging would be appreciated.

Salacious

I have this version Version 80.0.3987.87 and my react apps works really well. Did you try another browser? What browser did you try? Before concluding that chrome was the issue did you try chrome on another computer? – Abolition

Have you tried any performance/memory profiling? – Chiasmus

Does your devtools console print anything? – Jarl

nothing printing in the dev console. My coworker is on the same version using the app with no problems. I tried it in Firefox with no issues. Something really strange is that when I use the chrome devtools performance tab to start a recording all lagging stops, then starts up again after ending the recording. Maybe that is a sign as to what is going wrong? – Salacious

Dear @tgreen, comparing your system to other colleagues is not very valuable, because maybe all of you have same issue on your webpack watch option but your system has some critical issue on its RAM and CPU architecture, which they conflict with each other. so please edit your question and leave your entire Webpack configuration. I have some experience in Development area optimization. – Bannasch

I did a full uninstall of chrome and wiped settings which seems to have fixed the problem for now. – Salacious

Do you have 'redux-devtools' as extension or installed inside the project? – Telethon

I have redux devtools as an extension in chrome, not in the project – Salacious

Answer 1

TL;DR: Go to the Sources tab and delete all breakpoints for the site.

I had a similar problem. My site was very slow to load, but only in specific circumstances:

1. Dev-tools were open.
2. Tab was in a normal window. (not incognito mode)
3. Profiling was not enabled.

If (and only if) all three of those conditions were met, the site would load unbearably slowly (15+ seconds; normally ~3s), plus have performance issues for certain operations on the site (like changing which subpanel was open). It was very strange.

Like you, I tried disabling all of my extensions, yet the problem persisted.

Attempt 1: I tried clearing all of the site's cookies and local-storage, using the info/lock dropdown at the left of the address-bar. Suprisingly, that seems to have fixed it! (edit: this was not the root problem; see below for that)

So the problem must be that my site was storing too much data in local storage or something, such that dev-tools was choking on it (but only in specific cases, for some reason). This also matches with the issue resolving in incognito mode: incognito mode uses a "clear slate" for site cookies/local-storage.

Anyway, it's an odd one, but the cookies/local-storage clearing seems to have worked for my case. (If the issue comes up again, and the solution above doesn't fix it, I'll try to remember to mention it.)

Update: Oddly, having the profiler on still speeds things up even after the fix (ie. those three conditions being met still slows down page loading and actions, just much less than before the fix). So apparently the fix merely "reduces the intensity" of the problem rather than fully fixing it; like, by resetting local-storage, it lessens the size of that data, which somehow is a variable affecting the core problem (not yet identified).

Attempt 2: I believe I have found the root problem and solution: I removed all breakpoints for the site, and the slowdown was solved completely. So the problem seems to be that I had lots of unneeded breakpoints set at various places in my website code (some enabled, some disabled). Some of these must have been placed in/near "hotspots" that were getting called frequently. By having the dev-tools open, the Javascript engine must have had to start performing some processing related to the breakpoints, slowing things down.

My guess is that the problem would also be fixed by disabling the "JavaScript source maps" settings (as that's the only thing I can think would cause so much slowdown), but I haven't confirmed this.

Sycee

This answer is underestimated!!! I I've been experiencing the same exact issue for month now without a clue what the problem is. Thank you! – Inedible

I've been developing in incognito for days now because of this, was driving me nuts! I had a conditional breakpoint which I think caused the issue. – Apostolate

If you have lots of small promises (or small async functions) then the overhead of the async stack traces can become crushing. Try disabling async stack traces as described in developer.chrome.com/blog/new-in-devtools-60/#async-stacks – Inspire

My application was performing very poorly and for the life of me I couldn't find the culprit, I assumed it was somehow the architecture so I just spent ~2 months rebuilding the entire app internals from scratch in a totally different manner, only to the problem suddenly reappear as I'm tracking down another issue. IT WAS THE BREAKPOINTS THE WHOLE TIME – Thereon

I had no breakpoints, but @Inspire comment was spot on fix! Instant performance back with dev tools open (Chrome 99). – Glomerulonephritis

@malcom you should post your comment as an answer to this question. for those who don't have breakpoints, this could be the fix. it was for mine. – Interlock

Answer 2

This has most probably something to do with this commit, titled "Stop sending profile data when recording is off".

They already know there is an issue with the Developer Tools slowing down and they tried to prevent it by preventing profiling data to be sent via the bridge to the frontend, when not recording.

As reported, it seems the issue is not happening anymore, on the latest version. However, the cause is still unknown.

Try uninstalling the Developer Tools extension, clearing browser cache and then installing it again.

Chungchungking

Answer 3

You should probably try using a version other than the one you're using, Version 80.0.3987.132. The app you are trying to develop might not be suitable to the version you are using. Delete the extension you are using, clear and remove every trace of browser cache and then re-download the extension, like what Daniele Molinari said. It might help. If it doesn't let me know. I'll try a different approach.

Rouble

I mentioned it above but I haven't seen any issues since doing a full wipe of chrome on my laptop and reinstalling. I will try this if the issue comes up again. – Salacious

Answer 4

I encountered this issue while using the Dark Reader extension. I managed to resolve it by disabling the extension for my application. If Venryx's answer doesn't work, you might want to try disabling similar extensions and test again.

Moisesmoishe