Remote Redux DevTools monitor on React Native Debugger UI
Inject remote-redux-devtools monitor to React Native debugger. The monitor is used remotedev-app.
Installation
With logMonitor
$ npm install -g remote-redux-devtools-on-debugger
With sliderMonitor
$ npm install -g remote-redux-devtools-on-debugger-slider
Usage
With logMonitor
$ remotedev-debugger-replace --hostname localhost --port 5678
With sliderMonitor
$ remotedev-debugger-replace-with-slider --hostname localhost --port 5678
The ./node_modules/react-native/local-cli/server/util/debugger.html
will be replaced.
The hostname
, port
is optional, when you open debugger-ui
, will connect to your remotedev server point with options (Of course, you can also set in the UI), if you not set hostname
, it will apply default options.
Use custom options in React Native project
You can ignore this guide if you used default options.
Install dev dependencies
# remote-redux-devtools module & remotedev CLI tool $ npm install --save-dev remote-redux-devtools
Add to scripts field (package.json)
With logMonitor
"debugger-replace": "remotedev-debugger-replace --hostname localhost --port 5678","remotedev": "npm run debugger-replace && remotedev --hostname localhost --port 5678",
With sliderMonitor
"debugger-replace-with-slider": "remotedev-debugger-replace-with-slider --hostname localhost --port 5678","remotedev": "npm run debugger-replace-with-slider && remotedev --hostname localhost --port 5678",
If you debug on real device, you should use LAN IP instead of localhost
.
Edit configureStore.js
;;;; { const finalCreateStore = createStore; return ;}
Run
$ npm run remotedev# on another terminal tab $ react-native start
You can reference this example.