There are multiple tools available to help you debug your app. This document will cover our preferred tools and how to use them.
Our debugging tool of choice for mostly everything is Flipper but we also use the following:
If you want to debug with breakpoints or open the inspector find out how to open the dev menu and what it does here.
Flipper is a platform for debugging iOS, Android and React Native apps. Visualize, inspect, and control your apps from a simple desktop interface. Use Flipper as is or extend it using the plugin API.
This article is also a great resource for learning how to debug with Flipper.
- Install Flipper:
$ brew update && brew install --cask flipper. - Now when you spawn an emulator/simulator it will automatically connect to it.
- Advanced Async Storage - Inspect and modify AsyncStorage values.
- Relay Dev Tools - Visualize Relay data store.
- Redux Debugger - Inspect Redux state.
- Performance Monitoring - Performance Monitoring (read this great article on how to use)
You can find more about how to install them on the next section.
Flipper has a number of community-built plugins that you can use to enhance your debugging experience. To install a Flipper plugin, follow these steps:
Open Flipper and click on the Plugin Manager button on the left toolbar.
In the Plugin Manager window, you'll see a list of all the available Flipper plugins. Search and find the plugin you want to install and click the Install button next to it.
Flipper will download and install the plugin for you. Once the installation is complete, you'll be prompted to restart Flipper to activate the plugin.
You may also need to enable the plugin, open the disabled tab, find the plugin you installed and while hovering over it you're going to see a + button, click it to enable the plugin.
After restarting Flipper, you should be able to see the plugin in the Plugins menu.
Some plugins may require additional configuration or setup steps. Please consult the documentation or contact #practice-mobile with any questions.
In order to debug using flipper on device for iOS you will need a tool called idb.
Instructions for installing are here: https://github.com/facebook/idb#idb-client
You will want both the idb-companion and the idb-client.
Once that is installed find the path to idb:
$ which idb
In flipper settings make sure the debug on device toggles are set for iOS and paste the path into the
IDB Binary location field:
Apply the settings and build and run the app on device and you should be able to debug using Flipper!
To enable breakpoints, you need to Start Remote JS Debugging from the In-App Developer menu
You can either use VSCode debugging, Chrome debugging or RN Debugger for this.
To set breakpoints from the Chrome Developer Tools, open the ‘Go to source’ menu (⌘P), search for the file you’d like to set a breakpoint in, and set the breakpoint by clicking the gutter bar at the desired line.
In some situations that require very specific conditions, it’s easier to break by inserting an instruction in your code.
For this you can use the debugger keyword, e.g.
if (someCondition && anotherCondition) {
debugger
}It’s possible to break on any thrown exception by selecting ‘Pause On Caught Exceptions’ from the ‘Sources’ tab.
Relay will log debugging info for each query it performs in the ‘Console’ tab:
However, like any other networking, the raw request/response information can be made available from the ‘Network’ tab by enabling the Network Inspector from the React Native Debugger app’s contextual menu:
If you need to debug the query, copy the query and variables into GraphiQL (sometimes it’s easier to copy these
values by clicking ‘view source’ next to the ‘Request Payload section):
You can use React Native debugger which is a standalone app to inspect views as well as the standard Chrome Dev Tools. It is highly recommended over the normal Chrome Dev Tools.
- Install RN debugger:
$ brew update && brew install --cask react-native-debugger. - There is no step 2. Now when you run
$ yarn startit will automatically use the standalone app.
