Debugging React Native Expo using react-native-debugger

By w s / August 19, 2017

React-native-debugger is the best debugger to work with react native. It has support for redux, log console and react debugger in one nifty tool.

Default debugger for react-native is normally opening in browser. However, this does not give much information aside from console log output.

It is very difficult then to debug the state of the component and also redux state.

Chrome extension for redux debugger and react debugger is also disconnected when we are running browser based debugger.

This is where react-native-debugger really shines since it gives all these three debugger directly with very little setup.


Create react native app

Create react native app is a community effort to simplify creating and working with react native.

When I started working with create-react-native-app however, react-native-debugger stopped working. However, browser based react-native debugger is running fine.

It turns out that create-react-native-app sets up react native application using expo.

With expo, we can run react native directly in devices through expo app and also through simulator (android or ios simulator).

However, the debugger server is no longer running on the same part as standalone react-native app which resulted in react-native-debugger to stop working

Let’s go through simple steps to enable debugging create-react-native-app with react-native-debugger.


Create an app with create-react-native-app

We can install create-react-native-app cli globally, we can do so using:

npm install -g create-react-native-app

Once we have the cli installed, initialise a new project by doing:

create-react-native-app <project name>

Now that we have a project, we can easily run the app in ios or android simulator using:

yarn run ios


yarn run android


Installing react-native-debugger

If you noticed, when running the simulators, you would be defaulted to browser debugger.

To help debugging in react-native-debugger with expo, let’s install react-native-debugger.

React native debugger is hosted in github. Head down to to learn more about the tool.

Installation of the app is quite straightforward:

1. On Mac with homebrew cask

If you have homebrew cask, you can easily install react-native-debugger by:
brew update && brew cask install react-native-debugger

2. On Windows, Linux or Mac without homebrew

You can find the compiled binaries of react-native-debugger at



Linking react native with expo and react-native-debugger

To link react native running expo with react-native-debugger, we would need an additional package in our react-native project called react native debugger open.

To install, simply run the following on the root of your project:

yarn add --dev react-native-debugger-open

Next is to update the port where react-native-debugger is listening.

This can be achieved by adding a script into your react-native projects’ package.json.

Simply add the following:

"scripts": {
  "postinstall": "rndebugger-open --expo"

After adding the scripts, run it by issuing:

yarn run postinstall

If everything smooth, you would see a text saying:

Replace `open debugger-ui with Chrome` to `open React Native Debugger`.


And we’re done! Open your react-native-debugger (desktop application) that was installed in the earlier steps and run your application.

You should be getting the debug screen in react-native debugger. Have fun!

react native debugger with expo