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.
But what about React Native? If it's a native application that doesn't run in a browser... how do we debug it?
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).
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
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 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 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?
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
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
password is supplied in the
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
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
password manually to check their values, as well as a combination expression.
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:
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!