I faced a similar problem, the following worked for me.
Goto extensions settings for redux Devtools in chrome extensions and check Allow Access to file URLs settings.
Extensions > Redux Devtools > Allow Access to file URLs
Answer from Prajwal Singh on Stack OverflowVideos
» npm install @redux-devtools/extension
» npm install redux-devtools-extension
I faced a similar problem, the following worked for me.
Goto extensions settings for redux Devtools in chrome extensions and check Allow Access to file URLs settings.
Extensions > Redux Devtools > Allow Access to file URLs
I had the same issue where the option REDUX did not appear in the top menu Chrome browser.
- In "Manage Extensions", I made sure Redux DevTools was active and updated.
- I reloaded the page.
- Right click >> Redux DevTools >> Open in a panel(enable in browser settings)
- Right click >> Inspect
Now, verify "Redux" appears in the top menu next to Elements, Console, ... , Lighthouse, etc.
Redux DevTools extension should be working in chrome-devtools.
import {Provider} from 'react-redux'
import {createStore, applyMiddleware, compose} from 'redux'
import reducers from './reducers';
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(reducers, composeEnhancers(applyMiddleware()))
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
);
It only works when it detects a store on the application you are running. It makes sense since there is nothing to be shown.
Start an application with Redux correctly wired up and it will appear colored and will have very useful information.
EDIT:
I think I found it. Check the code correction. The compose method must be raplace if a __REDUX_DEVTOOLS_EXTENSION_COMPOSE__ exists.
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose
let store;
store = createStore(
rootReducer,
initialState,
composeEnhancers(
applyMiddleware(...middleware)
);
No if statements
You can use Remote Redux Devtools in this case.
Add this to your store creation (yarn add --dev remote-redux-devtools):
import devToolsEnhancer from "remote-redux-devtools";
const store = createStore(
popupReducer,
devToolsEnhancer({
hostname: "localhost",
port: 8000,
realtime: true
})
);
You will also need a remotedev server, I went with a local one:
yarn add --dev remotedev-server
cd /node_modules/.bin/
remotedev --port=8000
Now you can connect and monitor your store using the chrome extension, click the Remote button, go to settings and click "Use custom (local) server" there and you should see your store in realtime.
It's 2024 and, assuming you're following the latest recommended redux setup with Typescript, the configuration is going to be a little different now. I am using Extension.js and I was able to get the following steps working for getting Redux Devtools to show the state within my React/Redux Chrome extension modifying webpages:
- Install redux devtools cli and remote server
npm i -D @redux-devtools/cli @redux-devtools/remote
- Add an npm script to run a remote devtools server in your
package.json
"scripts": {
...
"start-redux-devtools": "redux-devtools --hostname=localhost --port=8001 --open",
...
}
- Modify your
store.tsfile to inject a devToolsEnhancer that can synchronize store updates with the devTools remote server:
import { devToolsEnhancer } from "@redux-devtools/remote";
export const store = configureStore({
reducer: {
mySlice: mySliceReducer,
...
},
enhancers: (getDefaultEnhancers) => getDefaultEnhancers().concat(devToolsEnhancer({ realtime: true, hostname: "localhost", port: 8001 }))});
- Run the main development server in a terminal:
npm run dev // Since I'm using Extension.js, they have already provided a convenient dev server in their react+typescript template
- Run the redux-devtools remote server in another terminal:
npm run start-redux-devtools
This will open up a window with redux devtools in it. Click the "Settings" tab at the top, select "use local (custom) server", adjust the port to 8001, and click "Connect":
You should see the @@INIT action back in the "Actions" tab. Perform some actions to update the redux state and those should show as well.
Note: I tried directly using the Redux Devtools extension from the Chrome web store within the browser developer tools, but it didn't allow me to connect to the redux store within the Chrome extension. It seems only the standalone window launched by the npm script works.
However, if you are using VSCode, there is a VSCode extension "Redux Devtools" that will embed the Redux Devtools UI right in your IDE so you don't have to deal with 3 windows. After downloading the extension, just change the settings to point to your local server and then remove the --open flag in the npm script so it doesn't launch its own standalone window.
