Here’s How You Debug On React Native

What-up, G-Punks.

On my last blog I was looking at ways to Unit Test the <TextInput />component on React Native.

Continuing this jovial frolic — and IT IS A JOVIAL FROLIC IT IS DEFINITELY NOT A SPIRIT-CRUSHING TORNADO OF DREAM DEATH — down React Native lane is a desire to debug at least half efficiently.

So yes, you’ve guessed it: today I’m trying to debug a React Native app. Go me. 🎉

Now, like with anything Javascript there’s seemingly a thousand ways to do it and yet… not one single way to effing do it. Not one that works. For me, anyway. Though we should probably factor-in my (too-scared-to-take-an-IQ-test) intelligence to this.

Anyway, here’s where we want to get to with our debugging:

1. I want to see React elements and their state and props
2. I want to see console.log()’s so i know what’s *inside* said props/state/objects/anything-i-want-to-log-out
3. I want to see my Redux actions firing off (so i know what’s happening and when)
4. I want to see my (Redux) app’s state changing as I use the app

Basic Setup… (skip if you have an app running already)

So first , if you haven’t spun-up a React Native app, hit-up Create React Native App on Github. You’ll need either Xcode or Android Studio to get a simulator/emulator alive and working. You’re also going to need Google Chrome (browser) & VS Code as your IDE/code editor.

Assuming that’s all good, (any difficulties, there are thousands of tutorials for getting setup on Xcode, Android Studio; Chrome you should know & VS Code is just the editor i’m using right now. Maybe Atom might work with add-ons/extensions but for this tutorial i’m solely using VSC)…

…you should now be at a point where you can run yarn run ios / yarn run android and it should get you a terminal that looks similar to this and a device similar to this:-

my terminal after running yarn run ios

an android emulator after running yarn run android

We also want to set-up Redux on this app. I recommend the official docs for that. I’d start from the store and work your way through setting up a very basic action > reducer > store flow.

This blog is *not* about Redux, so i’m just going to leave it there.

Suffice to say it takes a minute to get your head around it, but once you do: the idea of building a React-based app without Redux seems a bit nutty.

Finally — get yourself familiar with redux sagas. I only use them very lightly in this project. But if you’re pulling in data or juggling anything asynchronously, it makes sense for you to learn them.

NOTE: A decent boilerplate for a React Native app that includes sagas is available here.

Right *ENOUGH* with your s**t, Aid, Get Onto The Code!

So — I have a store, some actions that reflect different stages of my app’s state (initialise, loading, loaded, fail) and one saga that’s really only there for the sake of having a saga (I’m sure at some stage I’ll use it for something user-authentication related).

1. Our first point above was “I want to see React elements and their state and props”.

For React Elements — i’m using React Dev Tools.

and then inside my app’s root, I can run a simple react-devtools and BOOM. It opens. Now… look at my app.js:

You can see my top-level component/page is called LandingPage.

react-devtools fires-up and I can search for it. This is great. It’s just like React Devtools on the web.

react dev tools working straight off the bat

I can view its state and props. Awesome-Sauce.

2. I want to see console.log's so i know what’s *inside* said props/state/objects/anything-i-want-to-log-out.

Okay, for this I’m using React Native’s native (ios) debugger.

If you’re also using Xcode (simulator) you can press cmd + D and you should get a menu like this:-

xcode simulator after having pressed cmd + d

Select Debug Remote JS

This should open Chrome.

When in Chrome, right-click and inspect.

Or you can press cmd alt and i. Or f12 (on Windows, i think?).

Whatever, as long as you have Chrome open as a tab called React Native Debugger.

your Chrome tab after running cmd+d and selecting Debug Remote JS and right-click ‘inspect’ing…

This is going to give you a console to log out to. Now, if I add a console.log(this.props) to my LandingPage (or any rendered page) I get:

console.log in my landing-page’s render method ^

Chrome > “React Native Debugger” > with my console.log(‘this.props: ’, this.props)

Okay — so let’s take stock — cuz we’re half way there, bruhhhh

1. to view props / state / elements = react-devtools
2. for console.logs = native debugger / chrome / console.
3. redux actions…

So, Redux Actions.

I’ve used Redux a bit on the web and I know Chrome Dev Tools has a pretty good plugin for it. It looks like this:

redux dev tools

You can see the actions on the left.
You see the state(-tree) on the right.
Surely this has to just activate on Chrome as part of the React Native Debugger, riiiight? I mean, as it’s also Chrome based, riii…WRONG.

Well, this is frustrating.

Okay — so apparently there’s something called remote-redux-devtools?

I’ve grabbed it from here. From now on, i’ll call it RRD.

Remember that: RRD = remote-redux-devtools

To set it up I’ve had to hack my way through three different tutorials but i’ve got. it. working.

First up, go to your app.js and where you’ve configured your store, you’ll need to re-jig it so your middleware(/sagas) is passed into RRD.

Mine looks like this:

store.js with our new RRD goodness

That’s a lot of code. But the key things here are:

• we’ve added in composeWithDevTools and we’ve declared composeEnhancers
• composeEnhancers takes composeWithDevTools (which just says monitor whats on port 8000 in realtime, you pillock.)
• Then instead of just passing in our sagas/middleware as the third argument to createStore(reducers, defaultState, middleware) we pass *in* composeEnhancers. So whatever composeEnhancers() does, whatever it returns, is now the middleware argument for creating your store. And the sagas, storeand actionsare therefore wrapped up and decorated to be reportable by RRD.
• Put Simply: The store is now the result of all your reducers, all your sagas, redux’s own middleware *and* the dev tools setup. It’s all linked now.

add redux devTools to VS Code (via extensions)

• Next (and this is important) start using VS Code. If you’re not using it already, I can’t help you. VS Code has an extension you can add by going:
  taskbar menu > View > Extensions > Redux DevTools.
• Once this is added, click restart/rerun/run.
• To open it, press cmd + shift + p.
• type redux dev tools (obvs) and select it.
• Once it’s open, mine looks like this:

• Go to Settings and select “use local (custom) server” & type in 8000 because thats the port you gave it earlier.
• then click connect.
• refresh the simulator and BOO-YA! You should have a redux dev tools panel that looks not dissimilar to this:

4. I want to see my (Redux) app’s state changing as I use the app

And this bit is easy. It’s wrapped up in Redux DevTools already. You can see in my screenshot above that, so long as you have Redux setup properly, you can view the app’s state changing.

Redux state changing :)

So to recap:

1. cmd + D on simulator for Debug JS Remotely (for console logs)
2. install React Dev Tools (for elements/component state/props)
3. redux devtools (for app state and actions monitoring)

__Aid(); is a Father, Partner to a Long Suffering Girlfriend and Javascript Developer — & host of the new A Robot Took My Job podcast. Check it out!