Médédé Raymond KPATCHAA

DigestsAbout

Debug a React Native application with ease

Debugging on React Native is not as ease as we think. Facebook officially provides documentation on debugging a RN application in Google Chrome taking advantages of Chrome Developer Tools.

To debug the JavaScript code in Chrome, you need to select "Debug JS Remotely" from the Developer Menu (⌘D or ⌘M depending if you are running iOS or Android simulator). This will open a new tab at http://localhost:8081/debugger-ui when your application launches.

This is good, but not enough. It is difficult to set up React Developer Tools Chrome extension for React Native. You need a custom extension to debug Redux...

You also have the choice to use standalone version of React Developer Tools to debug the component hierarchy. You can install it using npm.

$ npm install -g react-devtools

Launch it from the terminal

$ react-devtools

There is an all in one solution, called -you guessed it- React Native Debugger. It is a standalone application based on the official debugger of React Native which includes React inspector and Redux DevTools, offering a debugger for applications using Redux or not.

How to install React Native Debugger

The application is based on Electron :). Prebuilt binaries are available for Windows, Linux and macOS on the releases page of the project. For macOS, you can install it via Homebrew Cask.

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

Usage

1. Manually

Using React Native Debugger doesn't require custom configuration, as it listens by default on the React Native packager port (8081) by default. Follow these steps to start debugging :

  1. Make sure all http://localhost:<port>/debugger-ui pages are closed
  2. Launch React Native Debugger
  3. Launch your application and enable Debug JS Remotely

2. Automatically with react-native-debugger-open

There is a package which configures your application to automatically open React Native Debugger instead of Google Chrome when it launches. It replaces open debugger-ui with Chrome by open React Native Debugger from react-native packager

To install and configure the package, follow these steps :

  • Install the package :
$ npm i --save-dev react-native-debugger-open # or -g
  • Add this to your package.json
"scripts": {
    ... your current scripts configuration
    // add this line
    "postinstall": "rndebugger-open"
}

It will be run after npm install. (You can run npm run postinstall first) The ./node_modules/react-native/local-cli/server/middleware/getDevToolsMiddleware.js code will be replaced.

And voilà. Now, every time your application launches, it will open React Native Debugger. If the React Native Debugger app is already opened, it will attach automatically the debugging session. But It is recommended to first close the React Native Debugger windows, just to make sure you won't have unexpected behavior.

Going further

There is a lot to read about debugging React Native applications. I gave an introduction which covers simple cases. If you need advanced configuration in the debugging process, you could read more about with the following resources.