Awesome

remotedev-rn-debugger

Demo

Injecting remotedev-app monitor into official Remote debugger of React Native. (formerly remote-redux-devtools-on-debugger)

We can use it with:

NOTE We will stop publish the old name remote-redux-devtools-on-debugger on next major version v0.9.

Installation

$ npm install --save-dev remotedev-rn-debugger

Usage

Add command to your project's package.json:

"scripts": {
  "postinstall": "remotedev-debugger [options]"
}

It will be run after npm install. (You can run npm run postinstall first)
The ./node_modules/react-native/local-cli/server/util/debugger.html will be replaced.

Options (--option)

Name	Description
hostname	The remotedev-server hostname. (default: `localhost` if `port` is set)
port	The remotedev-server port. (default: `8000` if `runserver` or `hostname` is set)
runserver	Start the remotedev-server with `hostname`, `port` option on local. (default: `false`)
secure	Use https protocol for `hostname`. If you're use `runserver` or `injectserver` option, you can provide `key`, `cert`, `passphrase` options for `remotedev-server`. (default: `false`)
injectserver	Inject remotedev-server with `hostname`, `port` option to `node_modules/react-native/local-cli/server/server.js`, then you can start ReactNative local server and RemoteDev local server with one command (`$ npm start`). (default: `false`)
injectdebugger	Inject remotedev-app with `hostname`, `port` option to `node_modules/react-native/local-cli/server/util/debugger.html`. (default: `true`)
macos	Use react-native-macos module name instead of react-native. (default: `false`)
revert	Revert all injection. (default: `false`)
wsengine	The web socket engine used in remotedev-server: `ws` or `uws`. If not set, remotedev-server default value is used. (default: `undefined`)

If you not set hostname or port or runserver or injectserver, it will apply default options.

Example - Use custom options in React Native project

You can ignore this guide if you used default options.

Install dev dependencies

$ npm install --save-dev remote-redux-devtools
$ npm install --save-dev remotedev-rn-debugger

Add command

Add command to your project's package.json:

"scripts": {
  "postinstall": "remotedev-debugger --hostname localhost --port 5678 --injectserver"
}

It will be run after npm install. (You can run npm run postinstall first)
If you debug on real device, you should use LAN IP as a hostname.

Edit configureStore.js

import { Platform } from 'react-native';
import { createStore, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk';
import devTools from 'remote-redux-devtools';
import reducer from '../reducers';

export default function configureStore(initialState) {
  const enhancer = compose(
    applyMiddleware(thunk),
    devTools({
      name: Platform.OS,
      hostname: 'localhost',
      port: 5678
    })
  );
  return createStore(reducer, initialState, enhancer);
}

You can reference this example.

License

MIT