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
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.
By default, with Flipper you can:
- Inspect network calls no matter if you are using fetch, axios, superagent, etc.
- Inspect Layout and its props.
- Inspect shared preferences.
- Inspect Metro logs.
- Have multiple devices or emulators running your application. Flipper will create a “tab” for each of them.
- Install plugins (more on this later).
- Reload your app.
- Inspect images.
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
What can’t I do with Flipper?
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.
Some plugins I’ve used are:
- React-native-performance: Enables a new section where we can measure the app’s performance.
- Redux-debugger: Helps with inspecting the Redux state.
- Redux-inspector: Another redux state inspector.
- Async-storage: Helps inspect any async-storage related calls (set, save, delete, etc).
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.
React Native Debugger
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.
What can I do with RND?:
- Inspect the layout and its props.
- Inspect your app’s redux state (I’ve only used Redux so I don’t know if it works with other solutions).
- Inspect your code and add breakpoints.
- Inspect Metro logs.
- Debug different projects as long as you use different ports.
- Inspect network requests (with some limitations).
What can’t I do with RND?
- Install plugins.
- Debug or inspect multiple devices or emulators at the same time.
- Run without Debug mode turned on.
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.
Reactotron
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.
What can I do with Reacotron?
- Inspect network calls.
- Inspect your Redux State.
- Inspect changes in Async Storage.
- Inspect Redux-Thunk actions (works with Sagas too).
- Play with your Storybook files.
- Check pixel-perfect designs using Image Overlay.
- Print custom messages and logs using a similar approach like `console.log`.
- Copy the state, logs, actions into the clipboard.
All of this works without running with debug mode turned on, which is a huge plus.
What can’t I do with Reacotron?
- Install plugins.
- Debug or inspect code with breakpoints.
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.
Recommendations
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.
Here at FullStack Labs, we use the tools listed above (among many others) to develop solutions our customers love. If you would like to join our amazing team, please visit our Careers page.
