• Home  / 
  • Mobile
  •  /  Debugging React Native Expo using react-native-debugger

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

or

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 https://github.com/jhen0409/react-native-debugger 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 https://github.com/jhen0409/react-native-debugger/releases

 

 

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

  • Gena Verdel

    Open your react-native-debugger app
    What is the exact command for this?

    • Golda_Velez

      Yeah, it is very unclear. On MacOS you can click or run the downloaded application ‘React Native Debugger.app’

    • Wira Siwananda

      React native debugger is a standalone desktop app. It is runnable the same way as how you are running other desktop application.

  • Derptard

    This doesn’t work, it still opens react native debugger on the wrong port.

  • Tran Chris

    Hei thanks a lot, this help me a lot 😀
    Greattt!