What is flipper?

It’s a tool from Facebook to debug mobile applications. Flipper is like vs code, where you can add plugins to improve, extend debugging capabilities

Note: This is a practical guide, so please keep flipper open on one side and explore through different options as you read

What can you do with flipper?

Start Devices

With flipper you can start both Android emulators and iOS simulators. In order to start the emulator or simulator you can use the Rocket icon 🚀 on the left bottom. It gives a list of available/created Emulators and Simulators.

ScreenShots and Videos

Did you know that you can get a screenshot of the device or record a video using flipper. Start the emulator of your choice and click the camera button to get a screenshot, similarly try the video recorder too.

React Dev Tools

Flipper comes with React Dev Tools which can be used to quickly search and debug your UI and see changes instantly as you apply them. With the settings you can hide unnecessary components based on filters.

Whenever you select a component it shows all the props it takes and the component rendered by hierarchy till the root and the source

There are shortcuts to open the source of the component, copy the contents of the component and with suspense you can even suspend the component

React Profiler

With Profiler you can find the bottlenecks of the app and debug where react spends more time.

• FlameGraph shows the component tree and highlights the components rendered for a commit
• The Ranked tab shows the list of components that takes lot of time to render
• Interactions tab helps you to log the time taken for rendering, mounting etc

You can export the profile and share it across with fellow devs

Layout Inspector

The layout inspector helps you to see the layout bounds and modify/tweak few available values like numbers, colors

Reactotron

Reactotron is yet another debugger that helps you with logging mst, observing changes, and sending actions

Network Inspector

This can help you to lookup network requests made through the app. You can inspect query parameters, form data and response of the API

Logs

Device Logs

Flipper streams device logs with respect to android or ios and there is an option to pause these logs if necessary or overloaded

React Native logs

Any console.log statements on React Native side can be seen here

Crash Reporter

Flipper remembers the crash and provides necessary insights to debug about the crash