React-native: Slow animations when debugging with Developer Tools

[jshthornton]

When not using the Chrome Developer Tools the animations are smooth on the device. When debugging you can see every frame of the animation jittering past.

Version 0.18.1

[facebook-github-bot]

Hey jshthornton, thanks for reporting this issue!

React Native, as you've probably heard, is getting really popular and truth is we're getting a bit overwhelmed by the activity surrounding it. There are just too many issues for us to manage properly.

• If you don't know how to do something or something is not working as you expect but not sure it's a bug, please ask on StackOverflow with the tag react-native or for more real time interactions, ask on Discord in the #react-native channel.
• If this is a feature request or a bug that you would like to be fixed, please report it on Product Pains. It has a ranking feature that lets us focus on the most important issues the community is experiencing.
• We welcome clear issues and PRs that are ready for in-depth discussion. Please provide screenshots where appropriate and always mention the version of React Native you're using. Thank you for your contributions!

[brentvatne]

Hi there! When testing animations and performance you should ensure that you are not using chrome debugger or devtools. The reason it is slow is because you are running the app JavaScript on a completely different machine and there is a lot of overhead to passing messages back and forth :P

[jshthornton]

@brentvatne Is there another solution for gaining access to console logs without using devtools? Because I am not doing performance testing or animation testing. But using animations for changing screens provided by react-native-router means getting anywhere in the app is painfully slow.

[brentvatne]

@jshthornton - sure, you can access them through normal way of accessing iOS or Android device logs. I documented some of those in this gist: https://gist.github.com/brentvatne/7210bfbc9ad209fb49dd

[brentvatne]

@jshthornton - if that is helpful for you can you create a pull request to add it to the docs somewhere? :)

[jshthornton]

@brentvatne It works. I would suggest add adb logcat -s "ReactNativeJS" to the docs to let people know how to filter the mass of logs.

[eremzeit]

I have this issue also, but it's not just mildly slow. It's slow to the point of hanging. A Navigator transition takes as long as 30 seconds to finish. This means that debugging on chrome is essentially unusable because the Navigator handles transitions for my entire app.

[Luzgan]

Is this the only solution? Seeing logs in terminal is a bit crappy when you have redux and redux logger. I find logger quite useful, but only when logs are closed initially - in console obviously I dont have way to do it. Is there any other solution?

(for anybody who reach that issue I've made stackoverflow question, maybe later there will be response - http://stackoverflow.com/questions/38867536/slow-animations-when-debugger-running)

[breadadams]

I'm having this issue too. However if the "in-view" tab in browser is the debugger, it's fine (even if the current app is the simulator).

Also having the debugger by itself, with no other tabs, fixes it.

[brianneisler]

Seeing the same as @breadadams. As @brentvatne pointed out the JS is running on different machine (I'm guessing that means it's running within Chrome?) If that's the case, this stackoverflow post would explain the slowness http://stackoverflow.com/questions/6032429/chrome-timeouts-interval-suspended-in-background-tabs

Strange I haven't noticed it until recently though. Has something changed in the way the JS is executed in remote debugging mode?

[brianneisler]

Looks like the above issue is already being tracked here https://github.com/facebook/react-native/issues/10559

[ghost]

So I have been having similar issues related with a game that I have been developing. Chrome Developer Tools basically useless, which really is unfortunate since they are actually helpful.

What I have been doing is using console.warn to get output in my simulator, or using adb logcat from the command line to see console.log statements. While both work, I like modern convenience and the fact that JS is an interpreted language and I can play around with it in a debug environment.

Any how, figured let's update to 0.36 start code over and see if there was something I was doing that broke things.

What I found, by chance for me, was that if you have even one extra Chrome window/tab open besides the Chrome Developer Tools window the debugger basically does not work, WTF.

With just the Developer Tools open debugger actually works, again WTF. There is still a performance hit, but at least for me it is usable.

Hope this helps others.

[KalebPortillo]

I found that when keeping the chrome tab active and visible, the speed is normal. When the chrome tab is not active or hidden by an application running in the foreground it slows down.
The chrome tab has to be completely hidden, if an application is transparent its still normal speed.

[breadadams]

Nice to see there's a warning for this now 😸

[salincakli]

the use of
https://github.com/jhen0409/react-native-debugger
saves headaches B)

[oakis]

I had the same problem just now, but when I activated "JS Dev Mode" I hardly lose any frames.

[cooperka]

I encountered this on Ubuntu with relatively high memory usage. Closing my IDE to free up RAM completely resolved the problem. It's possible Chrome was optimizing performance by slowing down JS threads. (React Native v0.43)