This is a standalone app for debugging React Native apps, it's based on official Remote Debugger, and include React Inspector / 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's can be:

• Replace open debugger-ui with Chrome to open React Native Debugger from react-native packager.
• Avoid you open deubgger-ui page, and forget to close it. :)

• 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.

For RemoteDev (Any flux architecture), you can use __REMOTEDEV__ instead of require('remotedev').

For MobX, you can use mobx-remotedev directly, and ensure remote option is false. (Example)

For Redux, the debugger worker will inject __REDUX_DEVTOOLS_EXTENSION__, __REDUX_DEVTOOLS_EXTENSION_COMPOSE__ to global, we provide the same name as redux-devtools-extension, you can add it to store: (Example)

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.

See API documention of redux-devtools-extension for more information.

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

We can do:

// const bak = global.XMLHttpRequest;
const xhr = global.originalXMLHttpRequest ?
  global.originalXMLHttpRequest :
  global.XMLHttpRequest;

global.XMLHttpRequest = xhr;

WARNING It will break NSExceptionDomains for iOS, because originalXMLHttpRequest is from debugger worker (it will replace native request), so we should be clear about the difference in debug mode.

If you want to inspect deeper network requests (Like request of Image), use tool like Stetho will be better.

# 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