redux-devtools-cli

Redux DevTools Command Line Interface

Bridge for remote debugging via Redux DevTools extension, Remote Redux DevTools or RemoteDev.

Usage

Install the package globally

with npm:

npm install -g redux-devtools-cli

or with yarn:

yarn global add redux-devtools-cli

and start as:

redux-devtools --hostname=localhost --port=8000

Note the package is called redux-devtools-cli not redux-devtools (the latter is a React component).

Or add in your project

with npm:

npm install --save-dev redux-devtools-cli

or with yarn:

yarn add --dev redux-devtools-cli

and add to package.json:

"scripts": {
  "redux-devtools": "redux-devtools --hostname=localhost --port=8000"
}

So, you can start redux-devtools server by running npm run redux-devtools.

Import in your server.js script you use for starting a development server:

var reduxDevTools = require('redux-devtools-cli');
reduxDevTools({ hostname: 'localhost', port: 8000 });

So, you can start redux-devtools server together with your dev server.

Open Redux DevTools

You can add --open argument (or set it as electron) to open Redux DevTools as a standalone application:

redux-devtools --open

Set it as browser to open as a web app in the default browser instead:

redux-devtools --open=browser

To specify the browser:

redux-devtools --open=firefox

Connection settings

Set hostname and port to the values you want. hostname by default is localhost and port is 8000.

To use WSS, set protocol argument to https and provide key, cert and passphrase arguments.

Available options

Console argument	description	default value
--hostname	hostname	localhost
--port	port	8000
--protocol	protocol	http
--key	the key file for running an https server (--protocol must be set to 'https')	-
--cert	the cert file for running an https server (--protocol must be set to 'https')	-
--passphrase	the key passphrase for running an https server (--protocol must be set to 'https')	-
--dbOptions	database configuration, can be whether an object or a path (string) to json configuration file (by default it uses our ./defaultDbOptions.json file. Set migrate key to true to use our migrations file. More details bellow.	-
--logLevel	the socket server log level - 0=none, 1=error, 2=warn, 3=info	3
--wsEngine	the socket server web socket engine - ws or uws (sc-uws)	ws
--open	open Redux DevTools as a standalone application or as web app. See Open Redux DevTools for details.	false

Inject to React Native local server

Add in your React Native app's package.json:

"scripts": {
  "redux-devtools": "redux-devtools --hostname=localhost --port=8000 --injectserver=reactnative"
}

The injectserver value can be reactnative or macos (react-native-macos), it used reactnative by default.

Then, we can start React Native server and Redux DevTools server with one command (npm start).

Revert the injection

Add in your React Native app's package.json:

"scripts": {
  "redux-devtools-revert": "redux-devtools --revert=reactnative"
}

Or just run $(npm bin)/redux-devtools --revert.

Connect from Android device or emulator

Note that if you're using injectserver argument explained above, this step is not necessary.

If you're running an Android 5.0+ device connected via USB or an Android emulator, use adb command line tool to setup port forwarding from the device to your computer:

adb reverse tcp:8000 tcp:8000

If you're still use Android 4.0, you should use 10.0.2.2 (Genymotion: 10.0.3.2) instead of localhost in remote-redux-devtools or remotedev.

Save reports and logs

You can store reports via redux-remotedev and get them replicated with Redux DevTools extension or Remote Redux DevTools. You can get action history right in the extension just by clicking the link from a report. Open http://localhost:8000/graphiql (assuming you're using localhost as host and 8000) to explore in GraphQL. Reports are posted to http://localhost:8000/. See examples in tests.

Redux DevTools server is database agnostic using knex schema. By default everything is stored in the memory using sqlite database. See defaultDbOptions.json for example of sqlite. You can replace "connection": { "filename": ":memory:" }, with your file name (instead of :memory:) to persist teh database. Here's an example for PostgreSQL:

{
  "client": "pg",
  "connection": { "user": "myuser", "password": "mypassword", "database": "mydb" },
  "debug": false,
  "migrate": true
}

Advanced

• Writing your integration for a native application

License

MIT