Awesome
remotedev-rn-debugger
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.