If you do not know what Redux DevTools is, see Dan's React Europe talk!
- Simple implementation (only 1 line of code without importing anything!).
- Having DevTools even in production without any drawbacks.
- Keeping the DevTools up to date (Chrome extension is updated automatically).
- Having Redux DevTools in a page without window (Chrome extensions’ background page).
- Using DevTools remotely for Chrome Mobile.
- 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
.
-
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 fromfreezer-redux-devtools/freezer-redux-middleware
.
Open these urls to test the extension:
Also you may run them from ./examples
folder (on port 4001 and 4002 by default).
Right click on the page and open it from the context menu.
Just add ?debug_session=<session_name>
to the url.
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.
- 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.
- Chrome extension.
- Firefox extension.
- Safari extension (simplified).