Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Can I view/modify the Redux store using Chrome Dev Tools

React Dev Tools is great for working with Redux, I can simply go in and modify props / state to see the affect on the relevant Container.

However if the required Container isn't mounted I need to directly modify the Redux store to make it appear. Is this possible with Chrome Dev Tools, I am able to find the Redux store, it is the top level <Provider /> component, I can even see the getState method, but is there anyway to modify the underlying state?

React dev tools Provider

like image 959
Andy Polhill Avatar asked Feb 20 '17 09:02

Andy Polhill


People also ask

How do I see Redux in Chrome?

From the navigation bar within the Chrome developer tools, you can find the Redux DevTools by selecting the new Redux panel, made available by the Redux DevTools Chrome extension (figure 3.5).

How do I get Redux tab in Chrome dev tools?

Hit Ctrl+Shift+I, or F12. You will then open up the Developer Tools. You will see a Redux tab at the end of Developer Tools.


1 Answers

Yes, you can. There is a great Redux DevTools Extension for Chrome/Firefox/Electron which adds a new Redux tab to devtools:

enter image description here

You can import and export current store, go back in history, change whatever you want and much more.

like image 116
Marek Dorda Avatar answered Oct 09 '22 08:10

Marek Dorda