🐞Debugging React Native Apps
Let's look at different tools we can use to track our errors, to fix them, and also how to avoid them at run-time.
Last updated
Let's look at different tools we can use to track our errors, to fix them, and also how to avoid them at run-time.
Last updated
With an expo app running on a physical device, we can debug it too. We need to shake the device a little to bring up the developer menu. There, we can enable the remote debugger and other features.
In often cases, the errors are mostly straight forward, or are self explanatory. In case you do not understand the error message, a simple Google search will suffice, since you might not be the first person to encounter such an error.
Another way to debug your app is by adding logs using the console.log() method. It is very useful in understanding code flow, and how your app is working behind the scenes.
To open the developer menu on physical devices, just shake the device. On android and iOS simulators, we have different ways to bring this developer menu up.
iOS:
For iOS simulator devices, we can bring up the developer menu by pressing ⌘ + D
Android: For android emulator devices, we cab bring up the developer menu by pressing ⌘ + M
The key does not have to be an uppercase character, ⌘ + d and ⌘ + m work just fine as well.
With the developer menu up, we can then select the option to Debug Remote JS to debug our app on the browser. Make sure that the connection is a LAN or Local in the expo developer webpage, because these options are faster than the Tunnel option.
This will open up a webpage in our browser in which we can open the browser developer tools to view all the logs that are generated in our app. Definitely helpful in debugging our react native app!
Always disable remote JS debugging when you're done, since it tends to slow our app down!
From the previous section, we learnt how to bring up the devtools overlay on our native devices. From this overlay, we can do a lot of things:
Reload: We can reload our app
Android shortcut: RR typing the character r twice in the android emulator reloads it.
iOS shortcut: ⌘ + R reloads the iOS simulator.
Disable Live Reloading: Disable the automatic reloading whenever the app code is updated.
Enable Hot Reloading: Reload parts of the app without actually reload the whole app, i.e, only those components that have been updated in the code.
Show Performance Monitor: This shows the app performance on the top-right side of the emulator screen. This is a very useful devtool to help analyze our app performance. This is not the final app performance since there are many overheads and overlays in our development app, so it's just an indicator of our app performance.
Toggle Inspector: This devtool is used to debug UI components of our application. This works like the devtools that opens in our browser. A better way to debug the UI for our react native app is to use the React Native Debugger.
To debug the UI components of our react native app, we can use the react-native-debugger tool that is open-sourced and can be downloaded, which is a standalone app based on the official debugger of react native. This tool also includes React Inspector and Redux Devtools!
To install the react native debugger on a MacOS system, use the following command:
With the react native debugger installed, we can start it up, and use the ⌘ + T and enter the expo app development server port here. This is visible in the expo developer webpage that opens when we run the yarn start command to start up the expo server.