Skip to content

zalmoxisus/redux-devtools-extension

Repository files navigation

Redux DevTools Extension

Demo

If you do not know what Redux DevTools is, see Dan's React Europe talk!

Advantages

  1. Simple implementation (only 1 line of code without importing anything!).
  2. Having DevTools even in production without any drawbacks.
  3. Keeping the DevTools up to date (Chrome extension is updated automatically).
  4. Having Redux DevTools in a page without window (Chrome extensions’ background page).
  5. Using DevTools remotely for Chrome Mobile.

Implementation

1. Get the extension

2. Use with your favorite Flux implementation

  • Redux
    Just update your configureStore:

    const finalCreateStore = compose(
      applyMiddleware(thunk),
      ...
    )(createStore);

    becomes

    const finalCreateStore = compose(
      applyMiddleware(thunk),
      ...
      window.devToolsExtension ? window.devToolsExtension() : f => f
    )(createStore);
  • Freezer
    Just use supportChromeExtension from freezer-redux-devtools/freezer-redux-middleware.

Examples

Open these urls to test the extension:

Also you may run them from ./examples folder (on port 4001 and 4002 by default).

FAQ

How to open Redux DevTools in a new window

Right click on the page and open it from the context menu.

How to persist debug sessions across page reloads

Just add ?debug_session=<session_name> to the url.

How to include it in chrome apps and extensions

Unlike web apps, Chrome extension doesn't inject anything in other chrome extensions or apps, so you have to do it by yourself to allow debugging. Just add:

<script src="chrome-extension://lmhkpmbekcpmknklioeibfkpmmfibljd/js/inject.bundle.js"></script>

To include it in a chrome extension's content script follow the example.

Credits

Roadmap

  • Chrome extension.
  • Firefox extension.
  • Safari extension (simplified).

LICENSE

MIT