React-Native: Debugging like a God

Brace yourself

Hey folks !

In the last article we talked about react-native performance optimization,

- I followed all points in the last article, but my app is still slow 😔 HELP !

Well, the last article showed you the most frequently faced mistakes in the development process, and ways how to prevent them.

So now let’s talk about debugging and performance measurement.

The first thing I think about when i start digging into react-native world — How can I see my Components hierarchy like the one in react-devtool in the web ?

I turned on Debug JS in Chrome, and opened the React tab — And I saw this:

There wasn’t any ability to debug react-native. I know we have built-in inspector ( Toggle Inspector ) with help that you can debug and see your components hierarchy, but I want more — I want to play with component states, props, see the entire picture of components.

- We are totally fine with Toggle Inspector, we can debug ui hierarchy without react-devtool.

You are totally fine with built-in inspector if you’re not working on a pretty big project. When your application starts to grow, and to get bigger, believe me — the built-in inspector will not help you. And why not to use devtool if we can ? 😃

- But you just said that there’s no way to use devtools with react-native

There wasn’t — but now there is. Let’s install it and start debugging the app (or you can install it globally if you want).

Then we need to integrate it in our project.

Add this line into your index.{platform}.js file

And add this line into your scripts section in your package.json file.

Now run you application, open simulator(or physical device) and run the following command:

npm run react-devtool

You’ll see the electron app opened in your computer.

Great ! Wasn’t it ?

Most of us definitely will use redux in react-native app. And I know just very small percent of us know that there’s a way to debug redux using redux-devtool in react-native.

- U kidding me

No — Seriously. Let’s setup redux devtool and use it right now.

For the first we need to install remote-redux-devtool

Well, and now let’s configure our redux store to use devtool.

Cool ! Now add this line into your scripts section in your package.json file

"redux-devtool": "remotedev"

And run it

Now open Chrome, Right click and open remote devtools

That’s it ! It’s awesome that you can control your app’s state remotely

- That’s fantastic ! Really

Agreed. We talked about react-devtool, but let’s imagine a situation when it’s not enough.

What if we need to see your Raw(native) view’s hierarchy — instead of inspecting our react components.

If you’re working on a native UI module or with third party libraries which are not working properly, or you can’t see your Component in your screen(But you believe that your component is in the top of all components, it must be visible) — Then I have one thing to say.

Now let’s start from an iOS project — Let’s see what’s going on under the hood in User interface.

It’s even easier than configuring react-devtool =)

First, open XCode and open your project’s iOS folder, and run build.

Now — when your app is up and running, press Debug View Hierarchy

Boooom ! XCode will open you app’s UI in 3D. Now you can examine the app, debug your Views, Layouts etc.

- But I don’t have a Mac, so i need similar thing for Android

Well, my friend, Android is mature and definitely will have a bunch of debugging tools.

But from my experience, I’ll recommend you to use UiAutomator

If you’re running on Android, then you’ll probably have android-sdk in your computer — So if your app is running, just open the terminal and run the following command

uiautomatorviewer

And this would launch the UI inspection tool. Below is how the tool looks like when no app is monitored.

Clicking on the devices icon from the left takes a dump of UI XML snapshot of the screen opened in the device. So you will be presented with an intermediate screen like this:

When this finishes you should be able to inspect your Views, layouts and entire UI using this tool

- This is awesome !!! Is there any other tool for inspecting UI ?

I’m sure there is — There are lots of tools doing the same, Choose which of them is good for you.

- Great, my app is slow on Android, but on iOS it’s great lol

If you’re familiar with Android development then you probably know that nested views suck and use a lot of memory.

If you’re getting this error `OutOfMemoryException` — then I have bad news for you.

Try not to use much nested Views, and layouts, I know it’s fine on iOS — since iOS is a totally different realm, ecosystems are very different.

Refactor your UI, if you can skip even 1 or 2 <View /> components in your every react-component, then you’ll feel optimization.

Now, to check the memory usage, open the shake menu, and press Show perf Monitor

Perf monitor shows a lot of information about your app’s current state.

Now, the first column(RAM) shows the memory usage of the current process.

The JSC shows the memory usage of the JavaScriptCore aka JavaScript thread, the number will change after every GC.

Under the Views column you see two numbers, the first(8) shows the views count right now visible on the screen and second number(13) shows the views count created and saved in the memory.

The UI column shows how smooth your app is running. You should do everything to keep 60FPS if you want to achieve a smooth UI, if you’ll drop even 1 FPS, believe me, the user will feel that.

The last column(JS) shows FPS of JavaScript thread, where the react lives.

When you see that your JS thread FPS are dropped — then keep in mind — Your JavaScript thread does much more work, and try to prevent it as much as possible. If you’re doing clustering, or any other heavy calculation — move them all to another thread.

— But, yes — sometimes this information is not enough, for example we don’t know which component is doing heavy work, or which thread suffers due to calculations.

I agree — For that we have another solution — Systrace.

Now — open the shake Menu, and press on Start Systrace.

Use the app normally, do what you want, and then again open the shake menu, and press Stop Systrace.

After that you’ll see this alert message.

Great — now open the following link in your chrome tab:

chrome://tracing

Now — let’s move the dump file to our desktop

mv /tmp/{your_dump_filename}.json ~/Desktop

And finally let’s open the dump file in chrome’s tracing tab. Press Load and choose dump file.

Now you can zoom and see what’s going on in your threads and components at the same time, and to see how many milliseconds are wasted in every function call.

— Whoa — that’s what I’m calling BIG DATA 😃

I’ll not cover the entire functionality of Systrace, it’s a very powerful tool and I hope it will make you to feel at home.

Another solution is to use react-addons-perf, which doesn’t have visualization, but you can check you components’ performance easily.

Conclusion

There are a lot of tools that are for the same purpose, and each of these have it’s pros and cons.

We spent a lot of time and energy to find the right tools and methods, and I hope this article will save your time and help you to debug like a God =).

That’s it, Bye !