Debug

How to debug a React Native app and a look at a working combination of tools and techniques. Remote Debugger, DevTools and error boundaries.

As we have seen throughout this course, debugging a React Native app is quite similar to debugging a React app.

TypeScript does help to catch a lot of errors quite early with a strictly typed system and variable declarations catching type mismatches, and in that way, is a boon. Declaring types in API requests and responses can make our apps very responsive to change, and help them warn us of possible errors early in the development cycle.

To debug any app, first, we need to check where the issue is. This will help us identify what part of the app we need to debug:

  • UI / UX error: styles, layouts, globals

  • Logical error: thunks, reducers

  • Performance: long lists, images, tabs, long-running JS code, slow/laggy component rendering.

How to debug#

Before we move ahead to looking at ways to debug an app, I recommend the following, for any application:

  • Read the error messages! They are helpful and will make sense (even if not at first look).

  • Know your code. It is very important to know the flow of the code. The Project Structure lesson is dedicated to this for the boilerplate code.

DevTools overlay#

DevTools is an in-app overlay provided by React Native that helps with some rapid-access debug options. To open up the developer menu in the app:

and it will open a pop-up menu like this:

Reload#

This is a simple reload of the entire app. It can also be done by pressing r + r on the simulator (i.e. r twice in Android simulator) or ⌘ + r in iOS.

Debug with Chrome#

This is the most used option and provides a lot of debugging capabilities. Selecting this opens a tab in Chrome in connected mode. From there we can open Chrome's default developer menu to debug.

To open the developer toolbar, select the tab that opened in Chrome and then press the following keys:

We'll now look at some of the tabs available in Chrome's developer tools.

Console#

Anything that we log in the app's JavaScript code can be seen in the Console tab, as in the metro bundler terminal. With the UI on top of it, this interface tends to be more interactive and easy to use, especially when dealing with objects and Redux loggers.

Sources#

We can find the source code that we are running in the Sources tab. It supports most commonly-known debugging features like adding breakpoints, stepping over code, stepping through code, watching variables, getting their values, etc.

Start a new discussion. All notification go to the author.