React Redux Dev Tools

React Developer Tools

Installation

If you're on Chrome, download the Chrome Extension.

Usage

Here is the Github page for React Developer Tools where you can find in-depth documentation of every feature. The basics are (on Chrome):

1. Open up the regular Chrome developer tools by right-clicking on the page and clicking "Inspect".
2. On the tabs at the top of the Chrome dev tools (the ones that say "Elements" and "Console"), click on the "React" tab.
3. Here, you can select different components on your app and see their state and props at any given point in time.

Redux DevTools

Installation

If you're on Chrome, the easiest way to install it is to use the Chrome Extension.

Usage

Here is the Github page for the Redux DevTools, and here is the Chrome extension Github page. The basics are:

1. In our /src/index.jsx file, add or uncomment the line:

 const store = createStore(
   reducer,
+  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__(),
 );

2. Open up your app locally on localhost:3000.
3. As above, open up the regular Chrome developer tools.
4. Click on the "Redux" tab.
5. Here, you can monitor every action that gets dispatched, and see the state at every point in history.