React-native: App slow when debugger tab not visible/focused in Google Chrome

Created on 26 Oct 2016 · 33Comments · Source: facebook/react-native

Description

When debugging is enabled and chrome debugging tab is not focused/visible app is really slow, but when a tab is focused/visible everything works fine. Also when debugging is disabled everything works fine.
It's probably something related how Google Chrome handles background tabs

Additional Information

React Native version: 0.35.0
Platform: iOS
Operating System: MacOS Sierra 10.12.1
Google Chrome: 54.0.2840.71 (64-bit)

Locked

Source

gorangajic

👍50

Most helpful comment

Another simple solution is to detach the RN debugging tab from your other chrome tabs, and then also detach the chrome dev tools window by click the tripple dots and the two squares drawn over each other (this took me a while to figure out). You can then allow the RN debugger tab to loose focus and still see the chrome dev tools debugger.

panzer-planet on 1 Nov 2016

🎉5

All 33 comments

Seeing the same in both 0.33 and 0.35 in both iOS simulator and Android (device)

Chrome 54.0.2840.71

benjick on 26 Oct 2016

I can confirm this

sibelius on 26 Oct 2016

It will pass some time until that is fixed in the Chrome. So, for now we can use standalone react-native-debugger

gorangajic on 26 Oct 2016

❤4

@gorangajic What is the related issue in the Chromium repo?

rturk on 26 Oct 2016

Haven't search chromium repo for issues, if someone can find an issue or create a new one there it will be great.

gorangajic on 26 Oct 2016

That's what's causing it! I assumed it just naturally degraded over time... I hadn't clicked that it was because the debug tab isn't active. That at least allows me to speed things up, thanks!

chrisbianca on 26 Oct 2016

👍2

Yep. This occurs when Chrome is not the top Window. Can also be related with MacOs App Nap

rturk on 26 Oct 2016

That started for me as well few days ago... Extremely annoying.

compojoom on 28 Oct 2016

👍1

+1 - Using Standalone Debugger saved my Day.

K-Leon on 28 Oct 2016

panzer-planet on 1 Nov 2016

🎉5

I'd like to toss in my experience with this. Yesterday my app was running fast on the simulator, but this morning when I fired it up animations were slow to the point of being unusable (e.g. the green "loading from localhost:8081..." message that slides up takes several seconds), as described by #10633.

I tried disabling remote debugging, and also tried to use the separate react native debugger program, but the problem persists.

I tried a fresh app with react-native init and it had the same issue. Any suggestions? Any thing I can do to provide some debugging info that would be helpful?

Edit:

Well, I didn't know about Command-T in the simulator, but that fixed it. No idea how that was turned on.

dotnwat on 5 Nov 2016

For me if I have any other Chrome window/tab open other than the devtools debugger would not work. Can confirm that debugger does work if only devtools open, also can confirm that react-native-debugger worked with chrome open and and at least a couple tabs.

micahrye on 6 Nov 2016

Chrome debugger in it's own window fixes. But annoying problem

adriansdev on 6 Nov 2016

Until you minimize

st0ffern on 6 Nov 2016

@noahdesu as the issue suggests -- you want to keep the Chrome debugger tab in the foreground. Your Javascript executes on the Chrome browser when in debug mode, and if it's not focused or in the foreground, Chrome applies optimizations to background tabs that will slow down the execution that your application is running.

ajwhite on 7 Nov 2016

@ajwhite that is just a workaround.
I see only one fix to this problem, that is to get a standalone debugger.
Why not integrate react-native-debugger ?

st0ffern on 7 Nov 2016

Why not integrate react-native-debugger ?

That's what I have been doing, has worked great!

ajwhite on 7 Nov 2016

Try to minimize the tab..

st0ffern on 7 Nov 2016

@ajwhite thanks for the info. I probably should have deleted my comment, but I added an edit to it stating that for me the slowness was slow animations turned on in the simulator. i'm a newbie, but I hadn't seen that mentioned.

dotnwat on 7 Nov 2016

@noahdesu we had a similar problem specifically with animations. I believe a lot of the values calculated in processing animations happens on the UI side, which means the Javascript execution in a background tab is delayed drastically; thus causing staggered animations.

ajwhite on 7 Nov 2016

my 2 cents.

just maximize the chrome debugging window to full screen on mac

. that should mitigate the issue. react-native considerably slows down if you are generating console.log messages and those messages are not sent to console. I suspect webworker receiving console.log messages PAUSES when tab/window not visible in the latest version of chrome/macOS sierra combo.
Also if you leave console.log in PRODUCTION, it will slow down your app.

clozr on 19 Nov 2016

👍1

+1, React Native version: 0.37.0

TyrealGray on 28 Nov 2016

I fixed the problem by doing:

Stop Remote JS Debugging and Disable Hot reloading
Close Chrome window where the debugging is running
Open a new Chrome window (not just new tab)
Start Remote JS Debugging and Enable Hot reloading

I don't know what causes the problem, but in my case it appears when my mac resumes from sleep, with the simulator running.

perrosnk on 28 Nov 2016

This is still happening, but I'm pretty certain it's related to Chrome's new throttling mechanism. Background tabs are severely throttled (completely throwing off animations, timers, etc.). I'm not sure if there's a way to prioritize a tab, but that's the only solution I can think of short of the Chrome team rolling back this change.

jacob-israel-turner on 15 Mar 2017

'Remote debugger is in a background tab which may cause apps to perform slowly. Fix this by foregrounding the tab _(or opening it in a separate window)_'

_opening in separate window_ doesn't help either. Even new windows need to be visible/focused same as when it was a tab.

/MacOS

cjmling on 19 Mar 2017

Same issue. RN 43

basequatro on 6 Jun 2017

As someone mentioned above, pressing Command T fixed my slow animations. What is that supposed to be toggling on/off anyway?

jedrichards on 20 Jul 2017

Slow animations.

On Thu, Jul 20, 2017, 10:55 Jed Richards notifications@github.com wrote:

As someone mentioned above, pressing Command T fixed my slow animations.
What is that supposed to be toggling off anyway?

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/facebook/react-native/issues/10559#issuecomment-316765000,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AIS5_H_HfSirQ1JchQjIhiIJs6ZN1BWFks5sP4aPgaJpZM4KhEgj
.

jacob-israel-turner on 20 Jul 2017

😄1

Hi there! This issue is being closed because it has been inactive for a while. Maybe the issue has been fixed in a recent release, or perhaps it is not affecting a lot of people. Either way, we're automatically closing issues after a period of inactivity. Please do not take it personally!

If you think this issue should definitely remain open, please let us know. The following information is helpful when it comes to determining if the issue should be re-opened:

Does the issue still reproduce on the latest release candidate? Post a comment with the version you tested.
If so, is there any information missing from the bug report? Post a comment with all the information required by the issue template.
Is there a pull request that addresses this issue? Post a comment with the PR number so we can follow up.

If you would like to work on a patch to fix the issue, contributions are very welcome! Read through the contribution guide, and feel free to hop into #react-native if you need help planning your contribution.