redux devtools for safari

Popular Articles

• Redux Query Vs React Query (Dec 07, 2023)
• Redux Saga Vs Redux Thunk Difference (Dec 07, 2023)
• Redux-Thunk Vs Redux-Saga Which Is Better (Dec 07, 2023)
• Redux And Local Storage (Dec 07, 2023)
• Redux And Flux (Dec 07, 2023)

Redux Browser Extension

Switch to English

Table of Contents

Introduction

Features of the redux devtools extension, installation and setup, tips and tricks, common errors and solutions.

• State Inspection: It allows you to inspect the current state of your application and how it changes over time.
• Action Inspection: You can inspect the actions dispatched by your application, including the action type, payload, and the state before and after the action was dispatched.
• Time Travel: This feature lets you jump to different points in time in your application's state history, essentially 'undoing' and 'redoing' actions.
• Action Dispatching: You can manually dispatch actions to test how your application responds.
• Filter Actions: If your application dispatches a lot of actions, the log can get crowded. You can filter actions by their types to focus on the actions you are interested in.
• Preserve Log: By default, the extension clears its state when you refresh the page. You can prevent this by enabling the 'Persist State' option.

Redux DevTools

Description.

Advisory boards aren’t only for executives. Join the LogRocket Content Advisory Board today →

• Product Management
• Solve User-Reported Issues
• Find Issues Faster
• Optimize Conversion and Adoption
• Start Monitoring for Free

Redux DevTools: Tips and tricks for faster debugging

Redux is one of the most adopted state management libraries for large scale React applications. Besides its ability to make your application more predictable, the ecosystem that has evolved around it makes Redux the best solution for large scale applications. Another advantage of Redux is the developer tool that makes it easy to trace when, where, why, and how your application’s state has changed.

We will look into some extraordinary features that Redux DevTools offers that can help you debug your applications faster.

Tracing actions

Another amazing feature of Redux DevTools is to see the call stack that has triggered the action. We can select any action from history and see the cause of action.

For large scale applications where the same actions are triggered simultaneously from different parts of apps, it is hard to get to the root cause of action dispatch. Here is where the trace feature comes in handy for developers.

Redux DevTool allows developers to either use default implementation that relies on Error.stack() or define custom implementation. Here is the API to enable trace :

As seen, the trace argument also accepts methods. This method is called with every action. Developers can add custom implementation here to see the cause of action dispatch. Passing this method against trace property allows developers to monitor the trace of desired actions only.

This can help in keeping the development experience smooth and performant, as creating trace for every action might consume a lot of memory. The method as trace can be helpful for action dispatched via side effect libraries like redux-saga or other event listeners.

When not implementing a custom trace method, developers can rely on default implementation that uses Error.stack() API. In this case, traceLimit property is useful to manage memory usage of DevTool. It overrides browser defaults of Error.stackTraceLimit and limits the length of the stack for optimized memory consumption.

We don’t just write about Redux, we talk about it too. Listen now:

Or subscribe for later.

Tracing actions in the editors

Extending the ability to show trace of action, Redux DevTool allows you to navigate to the exact point of the codebase. For large codebases, this can be super handy, as it saves tons of useful time to navigate to the exact location in a large codebase.

The editor can be set from extension settings that are available at the bottom right of the DevTool.

Skipping actions

Time travel is one of the most powerful features of Redux DevTools, it allows us to see how our app’s state has reached the current point. In certain cases, to analyze application behavior, we might need to remove a particular action from the timeline. This is not possible within the time travel mechanism. Redux DevTool has a great way of doing it. Out of three different view types for your application’s flow, log monitor and inspector allows you to disable or remove an action from the timeline. Here is how it looks.

Over 200k developers use LogRocket to create better digital experiences

Jumping to action

Besides skipping state from timeline, developers can jump to a desired state without having to move through the timeline. This enables developers to quickly move around and see app’s output on different intermediary states. Developers can monitor the impact of jump in the timeline as well. This feature is only available with inspector mode.

Custom dispatch

Redux DevTool allows us to dispatch actions without writing any code. We can add our actions in dispatcher and it works just like action dispatched via Redux API. This kind of mocking helps in testing side effects and dependent actions. This feature becomes really handy when coupled with locking to the current state. We can lock state to a certain stage and dispatch action from DevTool to see the impact on store and monitor side effects.

Allow/block actions

For large-scale applications consisting of a number of actions, we can monitor only desired actions; alternatively, we could block certain actions from appearing in the DevTools. This can be done by adding a list of actions to either block or allow in the DevTools settings or while initializing it in our applications.

As seen we can use the actionsBlacklist / actionsWhitelist parameters in an argument at initialization or do it via settings.

Disclaimer : We don’t encourage using any racist terminologies, regardless of intent; we have used these terms just to reference the API. Issue has been raised with the maintainer of this package, and we hope they will consider our request.

Persist store on page reload

One of the pain points in large scale applications is the development of interfaces for state that is derived after a journey within the app. It becomes even harder when some of the states depend on side effects, for example, network responses. DevTool comes to the rescue, we can persist certain states of ours across page reloads. This will allow you to jump directly to the desired state after reloading without going through the journey again.

Using in production

It is very hard to predict or catch all possible bugs in our apps. We encounter a number of issues after our applications are live in production and are used by a large number of users. In order to analyze those bugs, we might need to see the trail of actions or current state of our application when the issue occurred. DevTool allows us to see a trail of actions and store in production as well, making it easier to reproduce issues.

For security and performance, it is highly recommended to use action and state sanitization options. Here is a blog post that looks at enabling DevTool in production.

Locking to the current state

The other benefit of locking is that we finally have a solution to avoid side effects.

Pin to sub state

In most production apps, state is divided in small sub state objects usually reflecting different modules in apps. Debugging cases might require focus on a particular sub state. For such cases, developers can pin to sub state and see how different actions impact this pinned sub state. Sub state can be pinned from Inspector & Chart modes .

Commit actions

For large scale applications, it is never easy to go through the list of hundreds of actions. Rather developers prefer to monitor the application in chunks. For such cases, Redux DevTool allows developers to commit the current set of actions. Current state is then considered as the initial state for upcoming actions. One of the best uses of this feature is monitoring state across page transitions.

Developers can commit state from Inspector mode but to Revert have to switch to log monitor.

Without a doubt, Redux DevTool is one of the most useful and powerful tools for debugging React applications. It allows developers to leverage predictability of application provided by Redux to the full extent. It is also available within the React Native debugger, which is why knowing it to a full extent can pace up our development and debugging on the web and mobile platforms simultaneously.

Get set up with LogRocket's modern React error tracking in minutes:

• Visit https://logrocket.com/signup/ to get an app ID

Install LogRocket via npm or script tag. LogRocket.init() must be called client-side, not server-side

Share this:

• Click to share on Twitter (Opens in new window)
• Click to share on Reddit (Opens in new window)
• Click to share on LinkedIn (Opens in new window)
• Click to share on Facebook (Opens in new window)

Stop guessing about your digital experience with LogRocket

Recent posts:.

Using Chrome’s Document Picture-in-Picture API in React

Chrome’s new Document Picture-in-Picture API builds on the PIP API to open up a wider range of possibilities for user interaction.

Vercel v0 and the future of AI-powered UI generation

Vercel v0 is a powerful tool for rapidly prototyping various UI elements that generates code based on plain text descriptions.

Wagtail vs. Django CMS: Comparing CMS options for Django

Selecting a CMS for Django can be challenging. Two popular options are Wagtail and Django CMS. Let’s explore their features, pros, and cons.

Handling file uploads in Next.js using UploadThing

Manage file uploads in your Next.js app using UploadThing, a file upload tool to be used in full-stack TypeScript applications.

3 Replies to "Redux DevTools: Tips and tricks for faster debugging"

Very good blog, Zain. The blog gives detailed information about Redux DevTools. Redux actions and states are explained nicely and are easy to understand. Redux can be used to debug applications. The tips provided in the blog are good and help to debug faster. Redux is a powerful debugging tool.

How do you unpin? I cant figure out how to unpin after mistakenly pinning!

If someone is still wondering. When yoy pin a prop you see it with the following format state > parentProp > pinnedProp . Just click in state in that to unpin the prop.

Leave a Reply Cancel reply

Mastering Redux DevTools Extension: A Comprehensive Guide

Unlock the full potential of Redux DevTools Extension and take your debugging skills to the next level. Learn how to use this powerful tool to optimize your Redux application.

Create an image featuring JavaScript code snippets and interview-related icons or graphics. Use a color scheme of yellows and blues. Include the title '7 Essential JavaScript Interview Questions for Freshers'.

Redux DevTools Extension: A Comprehensive Guide

What is redux devtools extension.

Redux DevTools Extension is a browser extension available for Chrome and Firefox that helps developers debug and inspect their Redux applications. It provides a graphical interface to visualize and interact with the Redux store, making it easier to understand and debug complex state changes.

Features of Redux DevTools Extension

1. state inspector.

The State Inspector allows you to visualize the current state of your Redux store. You can inspect the state tree, navigate through the different levels of nesting, and even search for specific keys or values.

2. Action Logger

The Action Logger displays a chronological list of all actions that have been dispatched to the Redux store. You can filter actions by type, inspect the action payload, and even replay actions to see how the state changes.

3. Diff Viewer

The Diff Viewer shows the differences between the previous and current state of the Redux store. This feature is particularly useful for identifying what changed in the state and why.

4. Time Travel

Time Travel allows you to jump back in time to a previous state of the Redux store. You can rewind, replay, and even pause the state changes to debug and understand the application behavior.

5. Dispatch Actions

The Dispatch Actions feature enables you to dispatch custom actions to the Redux store. This is useful for testing and debugging specific scenarios or edge cases.

How to Use Redux DevTools Extension

1. installation.

To install the Redux DevTools Extension, follow these steps:

• For Chrome: Visit the Chrome Web Store, search for "Redux DevTools", and click "Add to Chrome".
• For Firefox: Visit the Firefox Add-ons page, search for "Redux DevTools", and click "Add to Firefox".

2. Enabling Redux DevTools

To enable Redux DevTools, you need to add the following line of code in your Redux application:

3. Accessing Redux DevTools

Once you've enabled Redux DevTools, you can access it by clicking the Redux icon in the browser toolbar or by pressing Ctrl + Shift + E (Windows/Linux) or Cmd + Shift + E (Mac).

Benefits of Using Redux DevTools Extension

1. faster debugging.

Redux DevTools Extension saves you time and effort by providing a graphical interface to inspect and debug your Redux application.

2. Improved Understanding

By visualizing the state and action flow, you gain a deeper understanding of how your Redux application works, making it easier to identify and fix issues.

3. Enhanced Collaboration

Redux DevTools Extension enables developers to collaborate more effectively by providing a shared understanding of the application state and behavior.

Common Use Cases for Redux DevTools Extension

1. debugging state changes.

Use Redux DevTools Extension to identify the cause of unexpected state changes or errors in your Redux application.

2. Optimizing Performance

Analyze the action flow and state changes to identify performance bottlenecks and optimize your Redux application.

3. Testing and Verification

Use Redux DevTools Extension to test and verify the behavior of your Redux application, ensuring that it meets the required specifications and functionality.

Redux DevTools Extension is an indispensable tool for any Redux developer. By providing a graphical interface to inspect and debug your Redux application, it saves you time and effort, improves your understanding of the application, and enhances collaboration. With its features like State Inspector, Action Logger, Diff Viewer, Time Travel, and Dispatch Actions, Redux DevTools Extension is an essential tool for building robust and maintainable Redux applications.

Navigation Menu

Search code, repositories, users, issues, pull requests..., provide feedback.

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly.

To see all available qualifiers, see our documentation .

• Notifications You must be signed in to change notification settings

A Safari extension for Redux

OKNoah/SafariReduxDevtoolsExtension

Folders and files, repository files navigation, safari redux devtools extension.

It's under major development , so please check back soon or make a pull request.

We've long wanted a Redux Devtools extension for the world's fastest browser!

As of now, this one simply uses an iframe to show remote-redux-devtools .

That means you'll need to set up your redux store something like this:

Don't worry, it's very flexible and more examples are in the readme .

It's limited to localhost domains for now as well.

• JavaScript 99.5%

How to Use React DevTools in Safari

Published on Jun 09, 2023 in platforms by Lucien Chemaly 11 minute read

React is commonly used for the frontend in static site generators like Gatsby and now WordPress . React DevTools is a set of developer tools with a multitude of features that can make your workflow more efficient and help you debug and optimize your code.

However, if you use Safari, you may be disappointed to learn that there is no browser extension for React DevTools like there is in Chrome and Firefox.

Fortunately, there is a solution. You can still use standalone React DevTools to connect to your site in Safari. This practical tool is also useful for debugging non-browser-based React applications, like React Native apps. It can help simplify the process of optimizing and debugging your code, making your workflow more efficient.

In this article, you’ll learn how to install and use the standalone version of React DevTools to debug a React application running in Safari. In addition, the article also highlights the differences between the standalone version and the Chrome extension, as well as some limitations of the tools.

Use Cases for Debugging React Apps

The standalone version of React DevTools is a separate application that provides a powerful set of debugging and inspection tools for React applications. It’s independent of any specific browser and can be used across various platforms and environments. This makes it a versatile option for developers who need to debug their React apps in different contexts.

Some of the use cases for the standalone version of React DevTools include:

• Debugging non-browser-based React apps: The standalone version of React DevTools is particularly useful when debugging React Native applications because it is platform-independent and can connect to apps running on iOS or Android devices. For example, you can use it to determine why a specific component of your React Native app isn’t rendering correctly on an iOS device. You can use React DevTools to inspect the component tree, check component props and state, and identify issues with styling or logic that may be causing the rendering problem.
• Debugging React apps in Safari: Safari is a widely used browser, especially among macOS users. Although Safari has its own set of developer tools, it doesn’t have extensions or support for React applications like Chrome or Firefox. The standalone version of React DevTools can be used to debug React applications running in Safari, as it provides developers with a powerful set of tools to inspect components and diagnose issues. For instance, if a specific UI component in your React app doesn’t behave as expected when viewed in Safari, you can use React DevTools to inspect the component in question. You can check its state and props and identify any issues.
• Debugging server-rendered React apps: In most static site generators, React apps are server-rendered, which means components are rendered on the server side and sent as HTML to the client. In these scenarios, the standalone version of React DevTools can help you debug issues related to server-rendered components. For example, if you’re using a solution like Next.js or React Server Components to perform server-side rendering, you can use the standalone version of React DevTools to inspect the rendered components and identify issues related to data fetching, state management, or rendering logic.

How to Debug a React App in Safari

The following tutorial explains how to use the standalone version of React DevTools to debug a React application running in Safari. By the end, you’ll be equipped with the knowledge and tools you need to confidently debug your React application.

Prerequisites

To complete this tutorial, you’ll need:

• A Mac running Safari
• A code editor, such as Visual Studio Code
• Git installed on your machine
• Node.js and npm (the Node package manager) installed on your system

To verify the installation of Node.js and npm, execute these commands in your shell or terminal:

If they aren’t installed, download and install Node.js , which also automatically installs npm. This tutorial uses Node version 18.12.1 and npm version 8.19.2.

Creating a React Demo Application

You’ll first need to set up a basic React demo application, which you’ll run and debug in your Safari browser using the standalone version of React DevTools.

Create a new React project using Create React App by executing this command:

This command will generate a new folder with the specified name and populate it with boilerplate code for a React application.

Change the current directory to your newly created project folder by running the following command:

Execute the following command to start the development server:

Your React application should now be live at http://localhost:3000/ . Use your Safari browser to open the application:

Any modifications made to the source code will trigger an automatic page refresh.

Connecting Standalone React DevTools to Your App in Safari

To connect React DevTools to your app in Safari, you first need to install the standalone React DevTools package using npm from your terminal or shell:

Run React DevTools with this command:

After you run the command, you’ll get the following screen telling you to add an additional script to your React DOM :

This tutorial uses the script with the localhost link ( <script src="http://localhost:8097"></script> ) to connect the React application, but the LAN IP address also works. Since you’re not working with a mobile application, the localhost link will work just fine.

Go to your source project and open the index.html file in the public folder. Add the localhost link just after the <head> tag, then open React DevTools. You should see the following in the Components section:

Creating a User Listing

Once you have connected React DevTools to your application, you can use the various features it provides. These features include the ability to inspect the component tree, examine component state and props, and profile component performance.

As the sample application doesn’t have many components, you’ll only see the App component in the tree. To explore more features of React DevTools, you’ll need to add more components.

To add a User component, create a file named User.js in the src folder and add the following code to it:

This component displays user information, such as first name, last name, age, and date of birth (DOB).

You’ll now create a UsersList component that utilizes the User component to display the list of users. Create a file named UsersList.js in the src folder and add the following code to it:

To populate the list of users, you need to create some dummy data and wrap the UsersList component in the App component. To do this, replace the code in App.js with the following:

Note: The App component renders the UsersList component, which in turn renders each User component for every user in the list.

The application in your Safari browser should look like the following:

Debugging and Inspecting Your App

Now that your application is ready, you can start debugging it with React DevTools.

If you open React DevTools, you should see your application tree. It begins with the App component at the top, followed by the UsersList component, and ends with the User component:

If you click the UsersList component in the tree, the props that are passed to the component will be displayed in the right pane. In this case, the props include the array of users from your dummy data:

Clicking a User component displays the props that it passes (the user object in this case). You can click any of three User components and check their relative props:

When you use React DevTools to debug your application, it’s important to understand the application tree and how it represents the component hierarchy. The application tree can help you quickly identify rendering issues and data flow by providing a visual representation of the components. You can inspect the props and state of each component to pinpoint bugs and troubleshoot issues that may arise.

Additionally, you can pin the location of a selected component in your browser by clicking the eye icon in React DevTools:

Once this has been activated, it will highlight the component in light blue in your browser:

You can also log the selected component in the console by clicking the bug icon in React DevTools:

The following image shows the results in the browser when you click the bug icon:

Using React DevTools, you can gain a better understanding of the structure and behavior of your applications. You can also more easily identify and fix bugs and performance issues. The standalone version is particularly useful because it can be used with any React application, whether it’s running locally or on a remote server, and it provides a separate, dedicated window for debugging purposes. Overall, the standalone version of React DevTools is a practical tool for developing and debugging React applications.

Differences between Standalone React DevTools and the Chrome Extension

If you use the standalone version of React DevTools, you’ll be able to use it with any browser, not just Safari. It also offers more customization options and flexibility compared to the Chrome extension. The following are some other differences between the two versions:

• Cross-platform compatibility: The standalone version of React DevTools is designed to work across various platforms, including browsers and devices, enabling a broader range of debugging and development possibilities. Chrome extensions, on the other hand, are limited to working within the Chrome browser environment.
• Ease of setup and connection: Chrome extensions are designed to integrate seamlessly with the browser, so using the extension version makes it easy to detect and connect to React apps running in the browser. The standalone version of React DevTools often requires manual configuration to connect to the target app, which can be more time-consuming and error-prone.
• Updates and maintenance: These two versions of React DevTools may have different release schedules and update processes. Chrome extensions typically update automatically with the browser, while the standalone version may require manual updates.

Limitations of Standalone React DevTools

It’s also important to be aware that the standalone version of React DevTools has some limitations. For instance, the tool may not work as effectively with certain types of components, such as those built with third-party libraries. You may need to use additional tools or methods to gather the necessary information if the tool provides limited data.

The following are some of the most notable limitations:

• Browser-specific features: The standalone version of React DevTools may lack some browser-specific features, such as network request inspection, JavaScript debugging, or browser performance profiling. For these features, developers need to use the browser’s built-in developer tools or rely on other debugging solutions tailored for the specific browser.
• Integration with browser environment: The standalone version doesn’t have the same level of integration with the browser environment as the extensions. Certain tasks, like interacting with browser APIs or manipulating the DOM, may be more challenging or impossible to accomplish using the standalone version.
• Learning curve: Due to differences in features, interface, and setup process, developers may need to invest additional time in learning how to use the standalone version of React DevTools. This may slow down their development process, especially if they are already familiar with the Chrome extension.
• Performance and resource usage: The standalone version of React DevTools may have different performance characteristics and resource usage compared to the Chrome extension version. Depending on the specific tools and configurations used, developers may experience varying levels of performance and resource consumption, which can impact their development experience.

By keeping these limitations in mind, you can adjust your approach and optimize your code more effectively. For instance, you can use alternative tools or workarounds to gather the information you need.

The standalone version of React DevTools offers a versatile solution for developers who need a powerful and flexible set of debugging tools, whether they’re working on browser-based React apps or non-browser-based applications like React Native apps.

This article introduced the standalone version of React DevTools and demonstrated how to use it to debug a React app running in Safari. You should now be comfortable with setting up, connecting, and using React DevTools to inspect and debug your React applications. With the knowledge from this article, you’ll be able to debug your React applications, regardless of the environment or browser they are running in.

You can find the code that was used in this article in this GitHub repository .

By Lucien Chemaly

Lucien has a Master's and Engineering Degree in IT and Telecommunications from the University of Rennes, France. He teaches seasonal courses for engineering students at the Saint Joseph University of Beirut and has been involved in programming training for private companies. He also writes for Draft.dev.

Build a Blog that Software Developers Will Read

The Technical Content Manager’s Playbook is a collection of resources you can use to manage a high-quality, technical blog:

• A template for creating content briefs
• An Airtable publishing calendar
• A technical blogging style guide

@redux-devtools/extension

• 2 Dependencies
• 72 Dependents
• 11 Versions

Redux DevTools Extension's helper

and use like that:

or if needed to apply extension’s options :

There are just a few lines of code . If you don’t want to allow the extension in production, just use composeWithDevToolsDevelopmentOnly instead of composeWithDevTools .

Package Sidebar

npm i @redux-devtools/extension

Git github.com/reduxjs/redux-devtools

github.com/reduxjs/redux-devtools/tree/master/packages/redux-devtools-extension

Downloads Weekly Downloads

Unpacked size, total files, last publish.

7 months ago

Collaborators

Redux DevTools

709 ratings

Redux DevTools for debugging application's state changes.

The extension provides power-ups for your Redux development workflow. Apart from Redux, it can be used with any other architectures which handle the state. This is an open source project. See the official repository for more details: https://github.com/reduxjs/redux-devtools

4.6 out of 5 709 ratings Google doesn't verify reviews. Learn more about results and reviews.

Rahul Biswas Jun 11, 2024

it's very useful, Thanks!

Dhirendra Dubey May 29, 2024

The frequency of crashes is excessively high.

Nujood Kadhem May 17, 2024

Keeps crashing.

• Version 3.1.6
• Updated December 14, 2023
• Report a concern
• Offered by Redux DevTools
• Size 1.79MiB
• Languages English
• Developer Email [email protected]
• Non-trader This developer has not identified itself as a trader. For consumers in the European Union, please note that consumer rights do not apply to contracts between you and this developer.

This developer declares that your data is

• Not being sold to third parties, outside of the approved use cases
• Not being used or transferred for purposes that are unrelated to the item's core functionality
• Not being used or transferred to determine creditworthiness or for lending purposes

For help with questions, suggestions, or problems, visit the developer's support site