Horizon DevTools extension.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
examples/chat-app
src
.babelrc
.eslintignore
.eslintrc
.gitignore
LICENSE.md
README.md
package.json
webpack.config.base.js
webpack.config.development.js
webpack.config.production.js

README.md

Remote debugging for Horizon with Redux DevTools extension and remotedev.

Demo

Installation

1. Get the extension

1.1 For Chrome
1.2 For Firefox
1.3 For Electron
1.4 For other browsers, for React Native, hybrid, desktop and server side apps
  • Use remotedev.io or if you have the extension select Remote DevTools from the context menu. Just specify remote parameter, and optionally hostname and port. See the API for details.

2. Install the library

NPM
npm install --save horizon-remotedev
CDN
<script src="https://unpkg.com/horizon-remotedev/dist/horizon-remotedev.js"></script>

Usage

// import hzRemotedev from 'horizon-remotedev';
// or import hzRemotedev from 'horizon-remotedev/lib/dev'
// in case you want to use it in production or don't have process.env.NODE_ENV === 'development'

//Setup Horizon connection
const horizon = Horizon();

// ...

// Specify the horizon instance to monitor 
hzRemotedev(horizon("react_messages"))

See chat example.

API

remotedev(store, [config])

  • arguments
    • store object - horizon instance. Example: horizon("react_messages").
    • config object (optional as the parameters bellow)
      • name string - the instance name to be showed on the monitor page. Default value is table title.
      • remote boolean - set it to true to have remote monitoring via the local or remotedev.io server.
      • hostname string - use to specify host for remotedev-server. If port is specified, default value is localhost.
      • port number - use to specify host's port for remotedev-server.

Also see the extension API and my presentation at React Europe.

Exclude / include DevTools in production builds

By default use

import remotedev from 'horizon-remotedev';

It will work only when process.env.NODE_ENV === 'development', otherwise the code will be stripped.

In case you want to use it in production or cannot set process.env.NODE_ENV, use

import remotedev from 'horizon-remotedev/lib/dev';

So, the code will not be stripped from production bundle and you can use the extension even in production. It wouldn't affect the performance for end-users who don't have the extension installed.

LICENSE

MIT

Created By

If you like this, follow @mdiordiev on twitter.