Debugging in React Native with Flipper
What is Flipper?
Flipper is a platform for debugging iOS, Android, and React Native apps. It is an open-source debugging tool developed by Facebook. Flipper is easily extensible, so it has a wide range of plugins that we can use for debugging. Flipper can be used for tasks such as detecting memory leaks, previewing the content of Shared Preferences, or inspecting loaded images, Hermes debugger, and Metro bundler integration.
How to Set up Flipper in your React Native App:-
Download Flipper for your OS here https://fbflipper.com/.
For Android, start the Flipper Desktop application, and begin your project using yarn android. Your application will appear in Flipper.
For iOS, run pod install once in the iOS directory of your project. After that, run yarn iOS and start Flipper. Your application will show up in Flipper.
Debugging in React Native:-
Chrome Dev Tools:
The easy way to debug any app is Chrome Dev Tools. But we need to add console.log() in every line to check the state of the application. To use Chrome Dev Tools we simply need to turn on the debug mode and inspect the app. The main limitation of chrome dev tools is they do not support network debugging.
RN Debugger:
RN Debugger is a debugging tool built using Electron Framework. It is a combination of Chrome Dev Tools, Redux Dev Tools, and React Developer Tools embedded together in one place. In RN Debugger we can inspect the layouts, props, redux state, add breakpoints, inspect metro logs, network requests. But it’s difficult to install different plugins, debug multiple devices in the emulator, and it cannot run without turning the debug mode on. It has a network log but with limitations.
Flipper:
Using Flipper we can make network calls such as fetch, Axios, super agent, etc. There is no need to turn on the debug mode for debugging our app. Easy to install plugins, debug images, debug multiple devices on emulators, build our own plugins.
Crash Reports Plugin:
Crash Report Plugin is used to show notifications whenever an app crashes. An app can be crashed due to various reasons such as stack trace, metadata not found, etc. We can get the crash logs whenever our application gets crashed due to unexpected exceptions.
Logs Plugin:
Logs Plugin shows logs that are used in the application. The search bar can be used to search logs and filter for certain types. From the table header in the log, we can see information like timestamp, PID, TID, or Message.
Images Plugin:
Images Plugin is used to debug or inspect images type, where they are coming from, caches size, clear caches, etc. Currently, this plugin supports Fresco as a backend. To debug the image in the flipper you need to add the following line to the dependencies section of your build.gradle file.
“implementation com.facebook.fresco:fresco:2.6.0”
Layout Plugin:
Layout Plugin gives us the hierarchical view of all views and their properties. It supports Litho and component kit to show components in a hierarchical view. It also allows you to edit layouts attributes, background colors, props, and state. This plugin provides you to see various styles and attributes used in your application.
Network Plugin:
The network plugin handles all your incoming/outgoing network requests. You can easily access all requests and their responses. We can filter the table for domain, method, or status by clicking on the corresponding value in the table. You can check every network requests that are made by you and get a detailed description of it.
LeakCanary Plugin:
LeakCanary Plugin supports LeakCanary an open-source library to detect memory leaks. A memory leak is a programming error that causes an application to keep a reference to an object that is no longer needed. This plugin is only available for Android. It displays the hierarchy of objects starting from the garbage collector to where the memory is leaked. It is used to show the leaks in the application.
Navigation Plugin:
Navigation Plugin is used to speed up the development cycle and allows users to navigate the application. We can easily integrate this plugin into our existing navigation framework. Using this plugin we can bookmark navigation links, log navigation events, or export the navigation events for reporting.
Database Plugin:
Database Plugin is used to give read-write access to the database of the application. We can browse the table’s data, execute queries, see the table structure, see logs of past executed queries. This plugin is also available for android only.
Hermes Debugger Plugin:
Hermes is an open-source JavaScript optimized engine used to improve the performance of the application. Enabling Hermes in the application will result in improved start-up time, less memory usage, and smaller app size. To use Hermes in our Android application we need to add a below-given line in android/app/build.gradle
project. ext.react = [
enableHermes: false, // clean and rebuild if changing
]
React Dev Tools plugin:
React Dev tools Plugin is used to debug React Native app. It has two parts one is a Component and the other is a Profiler. In component part, we can see which props, style, hooks, etc used in the application. The Profiler is used to record timing information of the component.
How to install third-party plugins:
We can install the third-party plugin by clicking on the Plugin manager on the left side menu of the Flipper Debugger.
It will show the pop-up window on the screen with two tab Plugin status and Install plugins.
Click on the Install plugins tab and install the plugin which you need to use in your application.
Example:react-navigation
After installing reload Flipper and you can able to see third-party plugins logs.
Conclusion:-
Flipper is a very efficient debugging tool using which you can debug network requests, Logs, React dev tools, Crash reports, Images, etc. You can add different third-party plugins and use them according to your application requirement.
If you liked this series of posts don’t hesitate to comment and share.
I hope it will be useful for you, Happy Coding!
Hope these tips helped you out and you learned something new today, if you enjoyed reading this article be sure to throw me a couple of claps 🖐.
Let me know what you think and share “do you prefer Flipper or anything else for debugging” write us in the comments.
