A Thorough Guide to Install React Native Debugger to an Expo App

[Updated on March 20, 2019]

React Native Debugger is the holy grail of debugging React Native applications as it combines Chrome Devtools, React Devtools, and Redux Devtools all in one window.

Here I present the steps to install React Native Debugger to an Expo App.

Image for post
Image for post

[Quick Guide]

  • Download React Native Debugger from the release page.
  • Click open the Debugger, ⌘+t to open new window and set port to 19001.
  • npm start expo app, open Developer menu, enable “Debug JS Remotely.”
  • Setup “__REDUX_DEVTOOLS_EXTENSION__” as shown here.

Most likely,, it should be working!

If you have any issues or want to know some more tips and tricks, read the following in-depth guide.

  1. Install React Native Debugger

To install React Native Debugger, you can download it from the release page.

For MacOS, you can use Homebrew to install:

$ brew update && brew cask install react-native-debugger

2. Start React Native Debugger

To start React Native Debugger, manually click open the app.

For MacOS, you can use a CLI script like this.

$ open ‘rndebugger://set-debugger-loc?host=localhost&port=19001’

The port is set to 19001 as Expo’s metro bundler uses that port. However, when you manually click open the app, the port will be set to 8081 as that is the default setting in React Native Debugger.

To set to another port, press ⌘+t to open a new window where you can reset the port to Expo’s metro bundler’s port (default 19001).

Image for post
Image for post

3. Start Expo app and Debug JS Remotely

$ npm start

Open your app, open the Developer menu, then enable “Debug JS Remotely”. Now the chrome developer tools should be connected.

In case, to open the developer menu, “shake” with Expo client, “⌘+d” with iOS simulator, “⌘+m” with Android emulator.

For convenience in MacOS, you can wrap step 2 and 3 to one script like this.

Image for post
Image for post

4. Setting up React Devtools

If you use Expo client (real device via Wi-Fi), the Docs state that an additional step may be necessary.

Image for post
Image for post

Find the setupDevtools.js file at node_modules/react-native/Libraries/Core/Devtools/setupDevtools.js.

Now, the property “host” passed to the function “connectToDevTools” needs to be changed to your local IP address as below.

(Check out your local IP address here)

(You need your “local” IP address, not the “public” IP. The one you get by googling what is my ip? is the public IP)

Image for post
Image for post

React devtools should now be running!

5. Setting up Redux Devtools

Since window.__REDUX_DEVTOOLS_EXTENSION__ is already provided, you can include redux devtools with the usual dance.

Image for post
Image for post

or if you use other middlewares,

Image for post
Image for post

This will do the trick!

In the previous versions of React Native Debugger, redux devtools were not included out of the box. In such cases,

$ npm i redux-devtools-extension

Then,

Image for post
Image for post

Again, if everything has gone alright, you should see something like this.

Image for post
Image for post

P.S To log network requests, right click on the React Devtools or Redux Devtools section and click Enable Network Inspect!

Image for post
Image for post

Hoped you liked it! Connect with me on GitHub!

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store