React Native Flipper: Best tool for debugging your application!?

By MindInventory

What is Flipper?

Flipper is a highly extensible mobile app debugger used to debug iOS, Android and React Native applications. It lets you inspect, control, and visualize your application from its desktop application.

It contains a long list of must-have debugging tools like log viewer, interactive layout inspector, and network inspector. It can be used as it is provided or you can extend it using the plugin API. It helps you debug apps running in an emulator/simulator or connected physical development devices.

Flipper enables RN developers to look deep inside their apps. Features like inspecting the native layout, monitoring the redux state, and testing deep linking will definitely boost development speed.

How it can be used?

To use Flipper, you need to add the mobile SDK to your app. If you are using React Native 0.62 or higher, this is largely done automatically for you.

For Android, start the Flipper Desktop application, and begin your project using yarn android. Your application will appear in Flipper.

1. Bump the FLIPPER_VERSION variable in android/gradle.properties, for example: FLIPPER_VERSION=0.136.0.
2. Run ./gradlew clean in the android directory.

For iOS, You just need to do the following changes in your project to use Flipper. After that, 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.

1. Call use_flipper with a specific version in ios/Podfile, for example: use_flipper!({ 'Flipper' => '0.136.0' }).
2. Run pod install --repo-update in the ios directory.

For React Native < 0.62, You can set it up manually for Android and iOS

Once you have installed Flipper, click on the Setup Doctor button on the left bottom to ensure that all the dependencies are installed. If you are missing anything, Flipper will tell you how to fix the issue.

How does It work?

By tenor.com

It detects react-native plugins by currently running metro instances like Hermes Debugger(easy way to debug Hermes on Android), Logs(combines console.log, native log (ADB, IDB)), React DevTools, and Network log (very similar to what we have in Chrome).

You can use the default plugins described above to debug your application by enabling whichever is required, otherwise, you can also add or install plugins from the plugin manager on the left of your desktop app. You can learn about how to build and add a React Native Plugin by clicking here.

Install Plugins from Plugins Manager

What does it provide?

Beyond the React Native-specific Flipper plugins described above, with Flipper, you will also inherit the plugin eco-system that exists for native Android and iOS apps. This means that you will be able to use plugins that are aimed at native apps for your React Native app as well. Example plugins include:

• Device logs
• Device crash reporter
• Inspecting network requests
• Inspecting app local databases
• Inspecting device preferences
• Inspecting cached images
• Inspecting native layout elements
• Inspecting Redux state

You can update a component’s styles on the fly without any refresh by enabling the layout plugin and seeing the API calls with the Network plugin displayed below:

Layout inspector in Flipper

Network inspector in Flipper

To inspect your redux state you need to follow the following steps:

• On the flipper side, you need to install redux-debugger from the plugin manager.
• add react-native-flipper library by writing yarn add react-native-flipper in your terminal.
• and add the following code inside your redux store.

• After adding the following code you will be able to see the redux-debugger plugin in your flipper.

Advantages:

• Support React Devtools
• Support Logs with search by Regex and logs all values from the simulator open. Besides, it can log your Android/Emulator devices, not just your app.
• Especially, Flipper contains store packages. It means you can manually build your own plugin and publish it to the community.
• You can export all inspections (like your logs, crashes, requests) to your colleague via Flipper.
• Inspect network calls no matter if you are using fetch and Axios.
• Inspect Layout and its props, images, shared preferences, Metro logs, etc.
• Have multiple devices or emulators running your application. Flipper will create a “tab” for each of them.
• Install plugins.
• Reload your app.
• To explore more features, read here.

By tenor.com

Conclusion:

• I would recommend flipper because currently, it is the best tool for debugging your application. I am at my intermediate phase of learning react native and thought that console.log is enough but after using flipper I am able to debug react-native projects with minimal effort.