This is a standalone app for debugging React Native apps, it's the same with official Remote Debugger, but we make it as a desktop app, and include React Developer Tools / Redux DevTools.

The prebuilt binaries can be found on the releases page.

For macOS, you can use Homebrew Cask to install:

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

You must make sure all http://localhost:8081/debugger-ui pages are closed, then open the app to wait state, and reload JS with your simulator / device.

Also, you can use react-native-debugger-open, it will replace open debugger-ui with Chrome to open React Native Debugger from react-native packager.

• React Native >= 0.21.0
• React Native for macOS (formerly react-native-desktop) >= 0.8.7

The Debugger part is reference from react-native debugger-ui.

The React Developer Tools part from react-devtools/shells/electron, it will open a WebSocket server (port: 8097) to waiting React Native connection.

If you're debugging with a real device, you need to edit node_modules/react-native/Libraries/Core/Devtools/setupDevtools.js.

It can be working directly on React Native ^0.30, for old versions, you need to add the following code:

if (__DEV__) {
  require('react-native/Libraries/Devtools/setupDevtools')();
}

And run adb reverse tcp:8097 tcp:8097 on your terminal. (For emulator, RN ^0.31 isn't need adb reverse)

We used remotedev-app as a Redux DevTools UI, but it not need remotedev-server. That was great because it included multiple monitors and there are many powerful features.

The debugger worker will inject __REDUX_DEVTOOLS_EXTENSION__ enhancer, __REDUX_DEVTOOLS_EXTENSION_COMPOSE__ to global, we provide the same name as redux-devtools-extension, you can add it to store:

import { createStore, applyMiddleware } from 'redux';

const store = createStore(reducer, initialState, 
  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__({/* options */})
);

If you setup your store with middleware and enhancers, just use __REDUX_DEVTOOLS_EXTENSION_COMPOSE__ instead of redux compose:

import { createStore, applyMiddleware, compose } from 'redux';

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(reducer, preloadedState, composeEnhancers(
  applyMiddleware(...middleware)
));

With options:

import { createStore, applyMiddleware, compose } from 'redux';

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?
  window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({/* options */}) :
  compose;
const store = createStore(reducer, preloadedState, composeEnhancers(
  applyMiddleware(...middleware)
));

NOTE Old reduxNativeDevTools and reduxNativeDevToolsCompose can still be used.

To make things easier, there's a npm package to install:

$ npm install --save redux-devtools-extension

and to use like that:

import { createStore, applyMiddleware } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';

const store = createStore(reducer, composeWithDevTools(
  applyMiddleware(...middleware),
  // other store enhancers if any
));

or if needed to apply options:

import { createStore, applyMiddleware } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';

const composeEnhancers = composeWithDevTools({
  // Specify here name, actionsBlacklist, actionsCreators and other options
});
const store = createStore(reducer, composeEnhancers(
  applyMiddleware(...middleware),
  // other store enhancers if any
));

There’re just few lines of code.

You need to switch worker thread for console, open Console tab on Chrome DevTools, tap top context and change to RNDebuggerWorker.js context:

# Just clone it
$ git clone https://github.com/jhen0409/react-native-debugger
$ cd react-native-debugger && npm install
$ npm run fetch-rdt # Fetch react-devtools source

# Run on development
$ npm run dev:webpack
$ npm run dev:electron

# Run on production
$ npm run build
$ npm start

# Run test
$ npm run lint
$ npm test

# Pack
$ npm run pack-macos
$ npm run pack-linux
$ npm run pack-windows
$ npm run pack # all

If you want to build binaries yourself, please remove electron/update.js (and electon/main.js usage), osx-sign in scripts/package-macos.sh.

• Great work of React DevTools
• Great work of Redux DevTools / Remote Redux DevTools and all third-party monitors.

MIT