Let's debug our application:

1. If you want to debug your React application, open your application with Google Chrome (http://localhost:3000/todo), open your Google Dev Tools (Right click > Inspect), select the React tab, and you will see your React components:

2. You can select the component you want to debug, and one of the coolest things is that you can see the props of your component in the right side:

3. If you want to debug Redux in your application and see which actions are being dispatched, you need to select the Redux tab in your Chrome Dev Tools:

4. We are dispatching two actions in our Todo application: FETCH_TODO_REQUEST and FETCH_TODO_SUCCESS. The @@INIT action is being dispatched by default in Redux, and this happens in any application.
5. If you select the FETCH_TODO_REQUEST action, you will see that on the Diff tab it says, "(states are equal)". That means there were no changes within that action, but you have four tabs: Action, State, Diff, and Test.

6. If you select the Action tab, you can see that specific action:

7. If you select FETCH_TODO_SUCCESS, you will see the data for the todo reducer: