- 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
.
2. Use with Redux
Just update your configureStore:
export default function configureStore(initialState) {
const store = createStore(reducer, initialState, compose(
applyMiddleware(...middleware)
));
return store;
}
becomes
export default function configureStore(initialState) {
const store = createStore(reducer, initialState, compose(
applyMiddleware(...middleware),
window.devToolsExtension ? window.devToolsExtension() : f => f
));
return store;
}
or if you don't have other store enhancers and middlewares:
export default function configureStore(initialState) {
const store = createStore(reducer, initialState,
window.devToolsExtension && window.devToolsExtension()
);
return store;
}
or for universal (isomorphic) apps
typeof window === 'object' && typeof window.devToolsExtension !== 'undefined' ? window.devToolsExtension() : f => f
You can use it 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 }
Include Remote Redux DevTools
, and on the extension's context choose 'Open Remote DevTools' or press Alt+Shift+arrow up for remote monitoring.
- FAQ
- API
- Apply as a Redux store enhancer
- Create Redux store right in the extension
- Communicate with the extension directly
- Getting Started with Redux DevTools Extension
- Live React: Hot Reloading with Time Travel at React Europe 2015
Open these urls to test the extension:
Also you may run them from ./examples
folder (on port 4001 and 4002 by default).
- Built with our browser-redux 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.