- from Chrome Web Store
- or build it with
npm i & npm run build:extension
and load the extension's folder./build/extension
- or run it in dev mode with
npm i & npm start
and load the extension's folder./dev
.
- from AMO
- or build it with
npm i & npm run build:firefox
and load the extension's folder./build/firefox
.
- just specify
REDUX_DEVTOOLS
inelectron-devtools-installer
.
- apply
remote-redux-devtools
.
2. Use with Redux
If you have a basic store as described in the official redux-docs, simply replace:
let store = createStore(reducer);
with
let store = createStore(reducer, window.devToolsExtension && window.devToolsExtension());
- If you setup your store with middleware and enhancers, change this:
import { createStore, applyMiddleware, compose } from 'redux';
let store = createStore(reducer, initialState, compose(
applyMiddleware(...middleware)
));
to this:
let store = createStore(reducer, initialState, compose(
applyMiddleware(...middleware),
window.devToolsExtension ? window.devToolsExtension() : f => f
));
- Or with initialState but without middleware and enhancers arguments:
let store = createStore(reducer, initialState,
window.devToolsExtension && window.devToolsExtension()
);
Note: passing enhancer as last argument requires redux@>=3.1.0. For older versions apply it like here or here.
You can use this extension together with vanilla Redux DevTools as a fallback, but not both simultaneously:
window.devToolsExtension ? window.devToolsExtension() : DevTools.instrument()
Make sure not to render DevTools when using the extension or you'll probably want to render the monitor from vanilla DevTools as follows:
{ !window.devToolsExtension ? <DevTools /> : null }
typeof window === 'object' && typeof window.devToolsExtension !== 'undefined' ? window.devToolsExtension() : f => f
Include Remote Redux DevTools
, and from the extension's context menu choose 'Open Remote DevTools' or press Alt+Shift+arrow up for remote monitoring.
- FAQ
- API Reference
- Troubleshooting
- Change Log
- Feedback
##๐บ Videos
- Debugging flux applications in production at React Europe 2016
- Hot Reloading with Time Travel at React Europe 2015
- Getting Started with Redux DevTools Extension
Open these urls to test the extension:
Also you may run them from ./examples
folder (on port 4001 and 4002 by default).
- Built using Crossbuilder boilerplate.
- Includes Dan Abramov's redux-devtools.
- Inspired from Taylor Hakes' work.
- The logo icon made by Keith Yong .
- Examples from Redux.
If you like this, follow @mdiordiev on twitter.