A Better Way To Debug React Native Redux Apps

So you've created a web application once or twice. Maybe you like to fill your application with a console.log breadcrumb trail when debugging.

Even better, you know how to use Chrome DevTools and can place breakpoint or debugger; statements and know how to step through your code and figure out what is what.

But what about React Native? If it's a native application that doesn't run in a browser... how do we debug it?

Remote JavaScript Debugging

This article assumes you already have some React Native project up and running in an emulator locally on your machine. To get to the debug tools, first we need to bring up the context menu within the emulator, ctrl + m (Android) or ⌘ + D (iOS)

We are most interested in Debug JS Remotely. After clicking, a debugger UI will automatically open in our browser. You can bring up the dev tools console by pressing ctrl + shift + j (PC) or cmd + option + j (Mac).

TIP: Enable Live Reload and Enable Hot Reloading are very handy!

Let's go back to our React Native project and add some code to debug:

const randomNumber = Math.random();
debugger;

After adding these lines, save your changes. If live reloading is enabled, this should automatically reload the application with and stop executing at the debugger; statement. If it doesn't, ensure your Sources panel is open with networking devtools. You may also need to manually Reload your application within the emulator context menu.

Here we can see that the constant randomNumber is equal to 0.1297839199744638. Already we can see the value of this remote debugger. Being able to stop time and step through our code, line by line, to determine the value of variables... is... priceless! Not only that, but we don't have to modify our code with a bunch of console.log messages.

OK, so this Sources debugger is great, but what if we want to inspect the layout of the page, like we usually can, with Chrome DevTools?

React Devtools & Redux Devtools

If you have the React Devtools or Redux Devtools extensions installed, you may notice that they don't work with this remote debugger like they do on a web app.

This is because the debugger UI we opened above is not the actual app we are debugging. It's just a white screen with some text. The extensions will attempt to connect to the white screen with some text, (not the remote native app), which is why it does not connect properly.

React Devtools

React Devtools lets you inspect the component heirarchy as well as learn about each component's accessible props and state. It can be very handy, but unfortunately, to use it with React Native, we must use the standalone app.

$ npm install -g react-devtools
$ react-devtools

At this point, we will see a standalone React Devtools window, which should connect to your React Native app automatically. If not, try reloading and redeploying your application.

We can inspect the component hierarchy by expanding components or we can enable the inspector within the emulator Toggle Inspect in the context menu ctrl + m. On the iOS emulator, tap Show Inspector in the context menu.

Redux Devtools

Redux Devtools are a great way to inspect what's happening in between actions, and how each action affects your data store.

Please note, there are two projects surrounding Redux Devtools. The former, Redux Devtools, is a way to dock redux debugging components directly into your application, which I believe makes our project more complicated than it needs to be.

The latter, Redux Devtools Extension, outsources to a pre-built debugging UI in a browser extension that you must install (Chrome or Firefox). The extension is nice because it keeps the debugging UI separate from your application code.

Moving forward with this article, let's assume you already have the extension installed. Here is a demo app that will be detected by the extension, if you want see for yourself:

You can see the actions on the left, as well as the diff comparison on the right. Not only that, but you can drill down into any part of the store state to find out what the value is or was at that point in time:

These Tools Are Great... What's The Prob, Bob?

Why can't you just spin up separate remote instances of the JavaScript debugger, React Devtools, and Redux Devtools? Well... you could do that, but that is a little more complicated than it needs to be. If only there was something that combined these great tools into one...

Introducing: React Native Debugger

Ahhh! The holy grail of debugging React Native applications: React Native Debugger. This standalone application is a remote debugger which combines all of the glory of Chrome DevTools, React Devtools, and Redux Devtools Extension all in one window.

Let's dive in!

As you can see, Redux Devtools is in the top left, React Devtools bottom left, and Chrome DevTools on the right. I've placed a breakpoint in my code just before firing off an authorization request to get a token with a username and password.

In Redux Devtools in the top left, you can see the action that kicked it off, AUTH_LOGIN_REQ, and I am inspecting the action where the username and password is supplied in the action.payload.

With React Devtools in the bottom left, we can inspect the native components along with their prop values and styles. You can see the value hello is the value of the TextInput element I am inspecting.

In my source code api.js we can see where the code is paused, on line 96. In the Scope panel below it, we can see the scope variables username and password and their values.

We can also write in to the console below any expression we want, perhaps a snippet of code, and perfect it before the next time we run our application... this will greatly speed up our development time.

You can bring up the console below by pressing Escape while focused in the Chrome DevTools panel. You can see I have entered the variables username and password manually to check their values, as well as a combination expression.

Network Requests

If you head to the Network and find your XHR requests are not being logged, you will notice that you are unable to see any. You must first enable them by right clicking in the React Devtools or Redux Devtools section and clicking Enable Network Inspect.

Now, if you fire off an authentication request, for example, you can see the network request in the Network panel, as well as the Redux actions in the Redux Devtools panel:

Final Thought

The tools we use allow us to multiply our productivity and make our lives easier. Can you imagine building a house without tools? How much longer would it take? The sooner you invest time into your toolset, the sooner you can be done debugging and completing your projects. These developer tools are invaluable and are a must for any professional developer.

Until next time, peace, and happy debugging!