Skip to main content

Redux DevTools: Your Best Friend for Debugging (Part 2) - Advanced Debugging Techniques #120

📖 Introduction​

Following our introduction to the Redux DevTools, this article explores some of its more advanced features. We will learn how to use time travel debugging, action skipping, and other powerful techniques to debug our Redux applications more effectively.

📚 Prerequisites​

Before we begin, please ensure you have a solid grasp of the following concepts:

  • All concepts from Part 1 of this series.
  • A working Redux application with the Redux DevTools configured.

🎯 Article Outline: What You'll Master​

In this article, you will learn:

  • ✅ Time Travel Debugging: How to step back and forth through your application's state changes.
  • ✅ Action Skipping: How to temporarily disable an action to see how it affects the state.
  • ✅ Action Diffing: How to see the difference in state between two actions.
  • ✅ The Dispatcher: How to dispatch actions directly from the DevTools.

🧠 Section 1: The Core Concepts of Advanced Redux DevTools Features​

The Redux DevTools is more than just a state inspector. It's a powerful debugging tool that can help you to understand how your application's state is changing over time.

  • Time Travel Debugging: This is the most powerful feature of the Redux DevTools. It allows you to step back and forth through the actions that have been dispatched in your application, and see how the state changes with each action.
  • Action Skipping: You can temporarily disable an action to see how your application state would behave without it.
  • Action Diffing: The "Diff" tab in the DevTools shows the difference in state between two consecutive actions.
  • The Dispatcher: The dispatcher allows you to dispatch actions to your store without writing any code.

💻 Section 2: Deep Dive - Using the Advanced Features​

Let's explore how to use these advanced features in the context of our to-do list application.

2.1 - Time Travel Debugging​

  1. Open the Redux DevTools and dispatch a few actions in your application (e.g., add a few to-do items).
  2. In the action inspector, you will see a log of all the actions that have been dispatched.
  3. Click on any action in the log. The state inspector will update to show the state of your application after that action was dispatched.
  4. You can use the slider at the bottom of the DevTools to "scrub" back and forth through the actions.

2.2 - Action Skipping​

  1. In the action inspector, find an action that you want to skip.
  2. Click the "skip" button next to the action.
  3. The DevTools will recalculate the state as if that action was never dispatched.

2.3 - Action Diffing​

  1. In the action inspector, select an action.
  2. In the state inspector, click on the "Diff" tab.
  3. The DevTools will show you the difference between the state before and after the selected action was dispatched.

2.4 - The Dispatcher​

  1. In the top right of the DevTools, you will see a "Dispatcher" button.
  2. Click on it to open the dispatcher.
  3. You can now manually type in an action object and dispatch it to the store.

💡 Conclusion & Key Takeaways​

In this article, we've explored some of the advanced features of the Redux DevTools. We've learned how to use time travel debugging, action skipping, and the dispatcher to debug our Redux applications more effectively.

Let's summarize the key takeaways:

  • Time travel debugging is a powerful feature that allows you to step back and forth through your application's state changes.
  • Action skipping and diffing can help you to understand the impact of individual actions on the state.
  • The dispatcher allows you to dispatch actions directly from the DevTools.

Challenge Yourself: To solidify your understanding, try to use the time travel debugger to find a bug in a Redux application. For example, you could introduce a bug into the to-do list application and then use the DevTools to find it.

➡️ Next Steps​

This concludes our series on Redux. You now have a solid understanding of how to use Redux and Redux Toolkit to manage the state of your React applications, and how to use the Redux DevTools to debug them. In the next chapter, we will explore Performance and Optimization.

Thank you for your dedication. Stay curious, and happy coding!

glossary​

  • Time Travel Debugging: The ability to step backward and forward through the actions that have been dispatched in your application.
  • Action Diffing: The process of comparing the state before and after an action was dispatched.

Further Reading​