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?
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
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
The layout inspector helps you to see the layout bounds and modify/tweak few available values like numbers, colors
Reactotron is yet another debugger that helps you with logging mst, observing changes, and sending actions
This can help you to lookup network requests made through the app. You can inspect query parameters, form data and response of the API
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
Flipper remembers the crash and provides necessary insights to debug about the crash