One of a React Native developer’s regular tasks is debugging (e.g.: app state, network calls, and app performance). In this article, we'll see how each one of these tools would help us debug RN applications.
This is neither a tutorial about how to install and setup these tools nor a guide about how to debug your apps. This is just a comparison of three tools I’ve used for quite some time, how they compare to each other, and the advantages and disadvantages of each. In the end, however, you’ll have a better understanding of how to debug RN apps.
Flipper is made by Facebook, the company behind React and React Native. Recent Versions of RN (0.63.2+ at the time of this writing) come with Flipper pre-installed by default. The installation and setup process is simple and straightforward.
NOTE: Flipper connects without debugging mode meaning you can view your apps without that weight.
NOTE 2: Dev setup Health Checker is built-in by pressing the little medical kit icon on the top
As you could see in the previous section, Flipper covers a lot. You may think you won’t need something else to debug your application, but, unfortunately, Flipper is missing a feature that is commonly used when debugging applications: adding breakpoints. That’s right, Flipper ignores any debugger calls in your code, and I haven’t been able to find a plugin that includes this feature. At least for me, this is one issue that means I won’t move completely to Flipper and uninstall the other tools. One workaround is to add console.log calls everywhere, but this is a cumbersome and impractical solution.
Now, let’s talk about Flipper’s most important feature: installing plugins. You can easily install plugins in Flipper, which comes with a plugin manager. Unfortunately, they don’t always work out of the box — sometimes, they don’t even work at all, so you will need to spend some time figuring out how to make it work. And the list of available plugins is not a long one.
Most of them also require you to add and set up a companion package so that your app and Flipper can communicate back and forth.
The React Native Debugger is based on the official Remote Debugger but it includes a redux inspector that allows you to inspect your state changes easily. Installing it is as easy as running `brew cask install react-native-debugger` on MacOS.
As you can see, RND is a great candidate for your preferred debugging tool. Just keep in mind that it won’t work if you don’t turn on debug mode, which will slow down your application. Also, every time you close the debugger, you will need to turn on `inspect network requests` since the setting resets to its default value of disabled.
RND is pretty easy to install and configure, and it works out-of-the-box. You don’t need to spend a lot of time trying to get it to work like you would if you were installing Flipper by finding and setting up plugins.
This one is my favorite, perhaps because it was the first tool I used to debug RN apps. It’s been awesome since day one when I started with RN more than 3 years ago.
All of this works without running with debug mode turned on, which is a huge plus.
Installing and Setting up Reacotron takes more time than RND but less time than Flipper. It also works pretty well once setup is complete, and the documentation is fairly clear.
I personally have all three of them installed on my computer and just jump from one to another as needed. That being said, my favorite is Reactotron, and I don’t see myself replacing it for quite a long time.
With Reactotron you can inspect the network calls, redux state and dispatched actions, without turning on debug mode, which is great, since we all know debug mode slows down React Native applications.
If you want to copy something to the clipboard — like logs, a state, or an action payload to use later — Reactotron has a button just for that. With Reactotron you can also manually dispatch an action using the GUI to see how the app responds to it.
RND is also a great tool, but it only works if you turn on debug mode.
Flipper has a lot of potential, but I don’t think it is ready to be used yet. There’s some pain trying to get it to a “usable” state. And good luck with your setup/plugins not breaking with new Flipper updates. Not to mention that working `with console.logs` is painful. Logs are just printed line by line, and without line breaks or any options to easily format or copy and paste. I only use Flipper if I have to inspect the layout, but that rarely happens.
We’d love to learn more about your project.
Engagements start at $50,000.