28

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.

8
  • 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? Commented Mar 7, 2020 at 1:19
  • Have you tried any performance/memory profiling?
    – Drew Reese
    Commented Mar 7, 2020 at 1:20
  • 1
    Does your devtools console print anything?
    – ethankore
    Commented Mar 7, 2020 at 1:46
  • 1
    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?
    – tgreen
    Commented Mar 7, 2020 at 1:57
  • 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.
    – AmerllicA
    Commented Mar 10, 2020 at 6:04

4 Answers 4

16

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.

6
  • 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! Commented Jan 19, 2021 at 15:37
  • 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. Commented Feb 10, 2021 at 16:55
  • 6
    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
    – malcolm
    Commented Jun 28, 2021 at 1:33
  • 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
    – timoxley
    Commented Dec 9, 2021 at 20:03
  • 2
    I had no breakpoints, but @malcolm comment was spot on fix! Instant performance back with dev tools open (Chrome 99).
    – Jafin
    Commented Mar 9, 2022 at 8:07
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.

0

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.

1
  • 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.
    – tgreen
    Commented Mar 17, 2020 at 20:57
0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.