You can also manually add Flipper to a React Native Android app, a React Native iOS app, a native Android app, or a native iOS app.
Out of the box, Flipper comes with more than what you would expect from a standard debugger. It puts everything you want to know about the state of your project in one place.
You can debug just as easily in Flipper as you can in Chrome by clicking the Hermes Debugger menu. You can use
console.log — like I did below — if you want to. It works well in a pinch.
If you develop in React Native, you likely know you have to debug issues in multiple places, including natively. Sometimes the app crashes and the React Native logs don’t help much.
Flipper provides access to the native logs under the Device section of the left menu. It helps to know what you are looking for when you view the logs, so you can use the filter field at the top to narrow down the results.
When I started developing in React Native, I missed being able to use React DevTools. It’s easy to overlook errors in your component props in your code, and this tool will tell you exactly what is happening. It is also helpful for finding undocumented props in third-party components.
This tool helped me track down why a splash screen was stuck. A network call failed and prevented the app from going to the dashboard screen.
If you debug through Chrome, you can’t see the app’s network calls without adding some code to the project. All you can see is the internet network calls for the fonts and images. And, to be able to debug app network calls through Chrome, I had to add this code to the
global.XMLHttpRequest = global.originalXMLHttpRequest || global.XMLHttpRequest;
With Flipper, I don’t have to worry about that anymore:
Redux is great until you have a typo somewhere and can’t spot it in your code. Sometimes
console.log works for debugging Redux, but it’s not easy. You usually have to log in multiple places to figure out what is going on.
That’s when you start wondering why you need Redux. But having a Redux debugger that logs all of the actions and shows you state before and after updates can keep you from chasing your data around the app with
This screen will help you determine what is going on in shared preferences, i.e., if your app is logging users out every time it closes.
This inspector lets you see what is happening in your native layouts. It also supports some third-party React Native components like Litho and ComponentKit.
Flipper allows you to control other things with the buttons on the left sidebar and underneath the device selector. With it, you can:
This is the feature that separates Flipper from other debugging tools: Flipper is extensible. You can get to the plugin menu by clicking on the second tab down on the left, the one with the squares.
If you click on the install menu, it will take a while for the available plugins to show up. It doesn’t have a loading indicator, so just be patient and they will eventually show. From there, you can install plugins with a click of a button or select the local plugin path from the form on the bottom.
Here are some of the plugins currently available.
You can also create your own plugins and contribute them to the community.
console.log does the job just fine. React Native is a different animal and breakpoints are nice there, so let’s look at how to use them.
The first thing you need to know is that you have to be using Hermes in your React Native project to use breakpoints, and you won’t figure this out by yourself until you wade through half a dozen issue threads.
But, for the most part, it’s easy to enable Hermes in your project. It will make your React Native app run faster, especially on Android. I did run into one issue with a package I was using, but updating to the latest version fixed the problem. Most of the other issues I ran into involving Hermes were caused by issues with third-party packages.
With Hermes enabled, select the Hermes Debugger (RN) section, which will load an instance of Chrome developer tools. Select the Sources tab, where you will find the files in your project in the left sidebar under Pages. They should be under the
Then, select the file you are working on and click left of the line number you want the breakpoint on, and run your app to that point.
In this example, I was trying to figure out why I was getting a
401 from an endpoint. I found out right away that I wasn’t using
await when getting the token from shared preferences. I knew the token was correct because I could go to the Shared Preferences Viewer in Flipper and check it:
There is no reason not to use Flipper if you are developing apps in React Native. All you need to do is download Flipper, install it, then run it. I, too, thought
console.log was enough, but now I wish I had Flipper available for all of my projects that don’t use React Native.
Originally published on LogRocket: Debugging React Native Apps with Flipper