Redux DevTools Extension FAQ
Table of Contents
- How to get it work
- How to disable/enable it in production
- How to persist debug sessions across page reloads
- How to open DevTools programmatically
- How to keep DevTools window focused all the time in a chrome panel
- How to enable/disable errors notifying
- How to get it work with WebWorkers, React Native, hybrid, desktop and server side apps
- Keyboard shortcuts
How to get it work
- Check the extension with Counter or TodoMVC demo.
- Reload the extension on the extensions page (
- If something goes wrong, open an issue or tweet me: @mdiordiev.
How to disable it in production
Usually you don't have to. See the article for details on how to include it in production.
How to persist debug sessions across page reloads
Just click the
Persist button or add
?debug_session=<session_name> to the url.
How to open DevTools programmatically
Make sure to have it conditionally. Auto opening windows is a bad DX. See the API for details.
How to keep DevTools window focused all the time in a chrome panel
To enable chrome panels feature in Chrome, type in
chrome://flags/#enable-panels in the url bar and click on "enable" under "enable panels". Make sure to click on "relaunch now " at the bottom of the page, to take effect. After that click
Open in a panel from our context menu.
How to enable/disable errors notifying
Redux DevTools on the extensions page (
chrome://extensions/) and click the
Options link to customize everything. The errors notifying is disabled by default. If enabled, it works only when the store enhancer is called (in order not to show notifications for any sites you visit). In case you want notifications for a non-redux app, init it explicitly by calling
window.__REDUX_DEVTOOLS_EXTENSION__.notifyErrors() (probably you'll check if
window.__REDUX_DEVTOOLS_EXTENSION__ exists before calling it).
How to get it work with WebWorkers, React Native, hybrid, desktop and server side apps
It is not possible to inject extension's script there and to communicate directly. To solve this, use Remote Redux DevTools. After including it inside the app, click
Remote button for remote monitoring.
To set/change the keyboard shortcuts, click "Keyboard shortcuts" button on the bottom of the extensions page (
chrome://extensions/). By default only
E is available, which will open the extension popup (only when the Redux store is available in the current page).