redux devtools does not show state in extension devtools tab

Question

I'm writing a chrome extension using react and redux. The extension has it's own tabs in the chrome devtools. If I try to debug the react code, a new chrome devtools opens, where I can view the console, sources , etc.

I have the following in the store creation:

const store = createStore(rootReducer, preloadedState, compose(
    applyMiddleware(...middleware),
    global.devToolsExtension ? global.devToolsExtension() : f => f
))

The problem is, redux devtools appears, but no store is detected. I've also tried the instructions from here, but still to no effect.

I'd also like to mention that both, global.devToolsExtension, as well as window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ are undefined.

Has anyone encountered this?

Geo Geo · Accepted Answer · 2017-12-06T19:35:41

I've managed to get the state to display using remote-redux-devtools. The trick was to right click Open Remote Devtools, and there, in the settings, mark to use local server.

In a separate tab, make sure you install remotedev-server, via npm or yarn. Example:

yarn add -D remotedev-server

and run the following:

var remotedev = require('remotedev-server');
remotedev({ hostname: 'localhost', port: 8000 });

Afte all this, the state should be visible in the redux devtools.

redux devtools does not show state in extension devtools tab

1 Answers