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:.
Radix UI adoption guide: Overview, examples, and alternatives
Radix UI is quickly rising in popularity and has become an excellent go-to solution for building modern design systems and websites.
Understanding the CSS revert-layer keyword
In this article, weâll explore CSS cascade layers â and, specifically, the revert-layer keyword â to help you refine your styling strategy.
Exploring Nushell, a Rust-powered, cross-platform shell
Nushell is a modern, performant, extensible shell built with Rust. Explore its pros, cons, and how to install and get started with it.
Exploring Zed, an open source code editor written in Rust
The Zed code editor sets itself apart with its lightning-fast performance and cutting-edge collaborative features.
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
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 Devtools Extension
Switch to English
Table of Contents
Introduction
Installation and setup, features of redux devtools extension, tips and tricks, common error-prone cases and how to avoid them.
- The Redux Devtools Extension is available for both Chrome and Firefox. You can install it from their respective web stores. Once installed, it will appear in your browser toolbar.
- After installation, you need to configure your Redux store to work with the extension. Here's a basic setup:
- Action History: This feature allows you to see a history of all the actions that have been dispatched in your application, along with the state changes they caused. You can even "time-travel" by sliding the action slider to see the state of your application at any point in time.
- State History: Similar to action history, you can see a chronological history of your application's state. This is particularly useful for tracking down when and where certain state changes occurred.
- Hot Reloading: This is a powerful feature that allows you to change your reducer code on-the-fly and see the results instantly, without needing to refresh your browser.
- It's important to note that while the Redux Devtools Extension is incredibly useful for debugging, you should disable it in the production environment to prevent exposing your state to users.
- One common pitfall is over-reliance on the extension. While it's a powerful tool, it's not a replacement for good unit tests and careful coding. Use it as a supplement to your development process, not a crutch.
- Unserializable Values: Redux recommends using serializable values in your state. If you have non-serializable values in your state or actions, such as functions or Promises, the extension might not work correctly. To avoid this issue, keep your state serializable.
- Performing Side Effects in Reducers: Reducers should be pure functions, meaning they don't cause side effects. If you perform API calls or other side effects in your reducers, you might run into issues with the extension's time-travel feature. To avoid this, perform side effects in your action creators or middleware.
- Overloading the Extension: If your state is very large or you're dispatching actions at a very high frequency, the extension might become slow or even crash. To avoid this, you can limit the number of actions the extension keeps in its history by using the `maxAge` option when configuring the extension.
How to use Redux devtools with React Native
Request, deliver, revise, done.
Get unlimited UI Design & React Development for a fixed monthly price
50% off your first month
Introduction
If you're coming from React to React Native, one thing you might be missing is access to Redux dev tools. Luckily using React Native debugger we can still have access to Redux dev tools whilst developing in React Native. In this article I'll show you how to set it up.
Installing React Native Debugger on MacOS
On MacOS we can use Homebrew to install React Native debugger by running the following command:
This will install the React Native Debugger app in your /applications folder.
If you don't have Homebrew installed on your Mac, you can also install the app by downloading it directly from the releases page .
Installing React Native Debugger on Windows
To install React Native Debugger on Windows, you can download the .exe installer from the releases page .
Running React Native Debugger
To run React Native Debugger, you should be able to run it directly from your applications folder on MacOS, or your start menu in Windows.
When you first open the app, it will be set to listen to port 8081 by default as 8081 is the default port that the React Native metro bundler uses.
However, this might not be the port that your apps bundler uses. Expo's bundler, for example, uses port 19001 by default.
On MacOS you can open React Native Debugger and set the port number:
That command will open the app and set it to listen on port 19001.
You can also change the port within the app itself. When you open a new tab in React Native Debugger (cmd + t) it will ask you to set the port before opening the dev tools.
Before using Redux dev tools with your app, you need to enable remote JS debugging. In order to this you need to access the developer menu on your device or simulator.
Enable remote JS debugging in iOS device or simulator
To open the developer menu on a physical iOS device, you can simply shake the device.
To open the developer menu on an iOS simulator, press cmd + d .
The developer menu should then popup from the bottom of the screen. Then you should be able to select the âDebug with Chromeâ option.
Enable remote JS debugging on an Android device or emulator
To enable remote JS debugging on Android, you first need to enable the developer options if you haven't already done so. To do this, go to the Settings app, then tap âAbout Deviceâ or âAbout Phoneâ.
Scroll down this page and select âSoftware informationâ. You should then be able to see a Build Number. Tap the build number 7 times (you might be prompted to enter your PIN or password at this point) and then voila - the âDeveloper optionsâ menu item should now appear in your Settings menu.
Then when you open your app, you should be able to open the developer menu by pressing cmd + m , and enable remote JS debugging.
Debugging Redux in React Native
After enabling debugging, you should now be able to see the Redux devtools.
Copyright 2024 - Atom Lab | Privacy Policy | Terms and Conditions
Redux Devtools for Dummies
tyler clark
- How does one set up the fancy redux devtools in a redux environment?
- What all is happening inside the inspector tools?
Do you take one look at the docs and just give up? Did you know that you can completely control the currently running applicationâs actions/state through these tools?
Redux Devtools Set-up
The first step is the easiest to understand and complete. Hopefully you are ether on Firefox or Chrome because these are the quickest to get up and running (o ther options ).
Go to the following links and install the browser add-on or extension:
This extension is important for connecting your browser to the Redux application. Without it, you will not be able to load the tools from your console.
There are multiple different ways to wire up your new dev-tools. This is because redux applications can be so different. Thus the need to have different options. In my opinion, this is the most robust and easiest to set up.
- npm install --save redux-devtools-extension
- import { composeWithDevTools } from âredux-devtools-extensionâ; into the store file.
- Finally compose your store with the imported module:
I recommend using this option over the others because it helps avoid issues with isomorphic applications . It also allows a lot of customization to the console dev tools.
Side note: If youâre hungry for more after reading this article. Check out the additional features you can add and remove to the console here
Here is how one would add in those customized features:
Also, if you do not have enhancers/middleware in your application, there is a more straight forward approach:
Notice that we are using devToolsEnhancer here rather than composerWithDevTools . The key here is that composeWithDevTools is needed when your Redux store needs enhancers . Otherwise, you can just use devToolsEnhancer .
DevTools Console Break-down
Now that we have everything set up, letâs get into the fun stuff. If youâve installed the browser extension correctly, you will see a Redux option in the console.
When you click on this new option, you will see one of two things. If you installed everything correctly in your store initialization, it will show you something like this:
If there is an error in your set-up, including exceptions thrown from your code, you will see this:
Letâs break down whats happening in each section of the dev tools.
Left-Side Console Tools
The left hand column of the dash is showing in real time the actions that are firing on the current page (as defined by the action creator types).
This comes complete with a filter option at the top and the time each action fired after the previous one.
When you click on an individual action it displays two options ( Jump and Skip ). This is the first introduction to time traveling and changing the application view. Jump will take your application to the state of the app at the time this action fired. The skip will cross out the action and show you your app without that action.
Right-Side Console Tools
The four tabs at the top right are in my opinion the most helpful of the tools.
The right side of the console has multiple options to see the state of the application and the relation of each action to the state.
When an action is selected in the left hand side of the console, the Diff option will show only what that individual action changed in the state tree.
Clicking on the Action tab will show the individual action type and any data it is carrying along to the reducers.
In the example above, this action has a type features/FETCH_SUCCESS and also carries data, the requested features to the reducer. You might have noticed that there are three sub tabs Tree , Chart , Raw within this master Action tab. These display the same data just in different formats.
- The Tree view is the default view and summarizes the data into single lines.
- The Chart tab shows the up-to-date store tree. Including all of the combined reducers and their corresponding data branches.
- The Raw tab shows the action creator in a code view.
The state tab shows the entire state tree at the time of the action selected in the left hand side of the console.
Back to the upper tabs, there is a test option. This will create a test format in some pre-provided testing frameworks. It takes your root state and provides a written test on what the end state should hold
Top Console Tools
The top of the console offers two more sets of tabs. The right tab lets you flip between different instances of running apps on the page. If you have different stores running on the same page.
The left set of tabs shows different modes:
- Inspector : the most used and is the default mode. Shows all the tools that have been discussed here.
- Log Monitor shows complete state and actions, as opposed to the Inspector mode where it just shows the diffs. (Try using the slider while in this view and watch your state tree grow/shrink!)
- Chart shows the state in a tree-like structure.
Magic Toolbar
The bottom of the console provides more functionality for diving into your actions and state. It allows for time travel, dispatching actions, importing/exporting state, and remote control. Starting from the far left, the first three options are for creating a new console view ether to the left, right, or bottom.
- The Pause recording does not stop other actions from firing within your app, it is just stopping the recording of actions within the console. Unlike other abilities within the console it does not control the state of your running browser page.
- The Lock changes will actually freeze the running appâs other/future actions. So it takes Pause recording to the next level by locking any future state changes in your app.
- The Persist option will keep the current state even when the page reloads
- The Dispatcher option will ether show or hide the dispatching module. Which can be used to fire a custom action with custom data.
- The Slider option will give you a smooth scroll through the actions. This will time travel through the actions that have fired and update the running app to show the current state and certain points in time. This comes packed with an auto-play, one step action arrows, and a speed interval play-through time.
- The import and export options are for importing/exporting state as JSON into the application. Which enables you to run your app off of custom state.
- The Remote option creates a separate console, not connected to the browser console tools. This will run the same actions but âremotelyâ away from the dev-tools.
- Install Redux browser dev-tools (Chrome and Firefox)
- Install dev-tools npm package and import it into store file
- Open developer tools with app running and click on the Redux option.
- Console tools show running actions and state. It provides time traveling, detail charting, and customization to actions/state.
Follow me on twitter! @iamtylerwclark
Written by tyler clark
Father/Husband, Front-End Dev, Sports Fanatic, Mormon, Sightseer, Car Enthusiast, Ambitious, Always a Student
More from tyler clark and codeburst
Javascriptâs Recursive, Closure, and Curry Functions
At least a couple times each week i find myself feeling like javascript is as vast as outer space. i continue to learn new methodsâŠ.
How To Create Horizontal Scrolling Containers
As a front end developer, more and more frequently i am given designs that include a horizontal scrolling component. this has becomeâŠ.
Top 50 Java Interview Questions for Beginners and Junior Developers
A list of frequently asked java questions and answers from programming job interviews of java developers of different experience..
Quick Reference: React with Flow
Flow and react, recommended from medium.
Thanh (Bruce) Pham
Redux Toolkit
For a more enjoyable experience on this blog, i suggest that you have the following prerequisites:.
Mahbub Khandakar
General Coding Knowledge
Stories to Help You Grow as a Software Developer
Growth Marketing
Modern Marketing
Monir Hossain
What Is Redux? Why Redux Toolkit?
What is redux.
Redux Interview Question
Q1.what is the flow of reducer.
PRIYAM MONDAL
React Data Binding: A Comprehensive Guide to One-Way and Two-Way Binding
Text to speech
@redux-devtools/core
- 3 Dependencies
- 14 Dependents
- 14 Versions
Redux DevTools
A live-editing time travel environment for Redux . See Dan's React Europe talk demoing it!
Note that the implemention in this repository is different from Redux DevTools Extension . Please refer to the latter for browser extension.
Table of Contents
Browser extension, setup instructions, custom monitors.
- Lets you inspect every state and action payload
- Lets you go back in time by âcancellingâ actions
- If you change the reducer code, each âstagedâ action will be re-evaluated
- If the reducers throw, you will see during which action this happened, and what the error was
- With persistState() store enhancer, you can persist debug sessions across page reloads
Redux DevTools is a development time package that provides power-ups for your Redux development workflow. Be careful to strip its code in production (see walkthrough for instructions)! To use Redux DevTools, you need to choose a âmonitorââa React component that will serve as a UI for the DevTools. Different tasks and workflows require different UIs, so Redux DevTools is built to be flexible in this regard. We recommend using LogMonitor for inspecting the state and time travel, and wrap it in a DockMonitor to quickly move it across the screen. That said, when youâre comfortable rolling up your own setup, feel free to do this, and share it with us.
If you came here looking for what do the âResetâ, âRevertâ, âSweepâ or âCommitâ buttons do, check out the LogMonitor documentation .
If you donât want to bother with installing Redux DevTools and integrating it into your project, consider using Redux DevTools Extension for Chrome and Firefox. It provides access to the most popular monitors, is easy to configure to filter actions, and doesnât require installing any packages.
Read the installation walkthrough for integration instructions and usage examples ( <DevTools> component, DevTools.instrument() , exclude from production builds, gotchas).
Running Examples
Clone the project:
Run npm install in the package folder:
Now you can open an example folder and run npm install there:
Finally, run the development server and open the page:
Try clicking on actions in the log, or changing some code inside the reducers. You should see the action log re-evaluate the state on every code change.
Also try opening http://localhost:3000/?debug_session=123 , click around, and then refresh. You should see that all actions have been restored from the local storage.
DevTools accepts monitor components so you can build a completely custom UI. LogMonitor and DockMonitor are just examples of what is possible.
I challenge you to build a custom monitor for Redux DevTools!
Some crazy ideas for custom monitors:
- A slider that lets you jump between computed states just by dragging it
- An in-app layer that shows the last N states right in the app (e.g. for animation)
- A time machine like interface where the last N states of your app reside on different Z layers
- Feel free to come up with and implement your own! Check LogMonitor propTypes to see what you can do.
In fact some of these are implemented already:
Slider Monitor
Inspector Monitor
Diff Monitor
Filterable Log Monitor
Chart monitor.
Filter Actions
(Does not have a UI but can wrap any other monitor)
Redux Usage Report
Keep them coming!
Create a PR to add your custom monitor.
- hot reloading
- time travel
Package Sidebar
npm i @redux-devtools/core
Git github.com/reduxjs/redux-devtools
github.com/reduxjs/redux-devtools/tree/main/packages/redux-devtools
Downloads Weekly Downloads
Unpacked size, total files, last publish.
4 months ago
Collaborators
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 Toolkit
The official, opinionated, batteries-included toolset for efficient Redux development
Includes utilities to simplify common use cases like store setup, creating reducers, immutable update logic , and more.
Opinionated
Provides good defaults for store setup out of the box , and includes the most commonly used Redux addons built-in .
Takes inspiration from libraries like Immer and Autodux to let you write "mutative" immutable update logic , and even create entire "slices" of state automatically .
Lets you focus on the core logic your app needs, so you can do more work with less code .
Other Libraries from the Redux Team
A predictable state container for JavaScript applications
React-Redux
Official React bindings for Redux
Redux DevTools
697 ratings
For help with questions, suggestions, or problems, visit the developer's support site.
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
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement . Weâll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Big Sur Safari WebExtensions API support #678
damo78 commented Nov 17, 2020
- đ 2 reactions
Methuselah96 commented Nov 17, 2020 • edited
- đ 14 reactions
Sorry, something went wrong.
trytuna commented Sep 20, 2022
dvaldivia commented Oct 11, 2022
- đ 2 reactions
markvl91 commented Oct 31, 2023
No branches or pull requests
Redux DevTools
Description.
- Read Tutorial
- Watch Guide Video
Welcome back to the course. In this video, we are going to implement the Redux dev tools extension so you can use them in your application.
This is only going to work using Chrome, so if you're using something besides Chrome, something like Firefox, you'll need to find a different way to work this out. I'm doing it with Chrome extension. So in the Chrome web store, you just need to search Redux Dev tools, or you can also just Google it.
Here's what it should look like:
It's offered by remotedev.io. Go ahead and click on Add to Chrome . Now we're going to have to add some code to be able to use it. If we go to our application in the browser, to see the tools all we have to do is right click and select Redux Devtools . If it doesn't show up, you may have to restart Chrome for it to refresh.
Even if we open the DevTools right now, we won't see anything since we haven't connected it up with our app. So let's go into our code to connect it.
Open up the code, and open the file bootstrap.js . We're going to import another function from redux and connect to our extension, so lets change that now.
bootstrap.js
Make sure your file has these same changes.
Now if we pull up our DevTools window, it should have changed. You'll see that we know have state and courses in it, but they both register as empty.
This is because we haven't done anything with state. Let's get our information put in. You can see that in reducers/index.js we have it calling courses, which is why it's showing up in the DevTools. However, in coursesReducer.js , we can see that it's returning nothing inside of state , which is why it's showing up as empty.
What we can do is instead of logging it to the console, we can return a spread operator, which if you don't understand how a spread operator works, you should Google it since it is a JavaScript operator, and if you can understand how it works, how reducers work is going to make more sense.
So, we'll spread state , then we'll tell it to overwrite payload. Then we will spread out action.payload as well. Our code should look like this:
coursesReducer.js
And you can see that our code shows up in the DevTools window.
With the spread operator, we can see that it does what it's supposed to by spreading out our information, instead of having it lumped together in one object. I definitely recommend you pause the video to go and look up the spread operator, because if you don't understand how it works or what it can do, then trying to understand how our data gets into our store will be confusing.
Now that we have it working, and have our DevTools installed I'm going to end this video. In the next video we will go over how we can use the tools we have now to have the data show in our application, instead of the filler data that we currently have.
Let's commit our code.
See you in the next video.
Code at this stage
devCamp does not support ancient browsers. Install a modern version for best experience.
IMAGES
VIDEO
COMMENTS
In case you are using Nextjs framework, you can achieve this by opening the console in safari. Type window in it. Expand it. Now just check in the window object property. You will find a key something like '__REDUX' or something like that. In my case it was __NEXT_REDUX_STORE__.
This is a monorepo powered by pnpm and Nx. Install pnpm and run pnpm install to get started. Each package's dependencies need to be built before the package itself can be built. You can either build all the packages (i.e., pnpm run build:all) or use Nx commands to build only the packages necessary for the packages you're working on (i.e., pnpm nx build remotedev-redux-devtools-extension).
This browser extension allows you to inspect and debug your Redux state and actions, leading to efficient development and less time spent on hunting down bugs. In this article, we will delve into the features, installation and usage of the Redux DevTools Extension, and share some tips and tricks to avoid common pitfalls.
It would be amazing to get Redux / React dev tools in Safari to ditch Chrome, especially when relying on battery since it really makes a huge difference in battery life between Chrome and Safari nowadays. I use the stand alone react-devtools package. It took me a little bit of work to figure out how to include it in my webpack build, but then ...
The DevTools component you created with createDevTools() has a special static method called instrument(). It returns a store enhancer that you need to use in development. A store enhancer is a function that enhances the behavior of createStore(). You can pass store enhancer as the last optional argument to createStore().
Now we will set up Redux DevTools extension step by step. 1.Adding Redux DevTools extension to our browser (Google Chrome) 2.Installing Dependencies for Redux DevTools & Adding Redux DevTools to ...
Developers can commit state from Inspector mode but to Revert have to switch to log monitor. Conclusion. 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.
Redux DevTools is an indispensable tool for debugging and analyzing the state of your application built with Redux. It provides a real-time view of your app's state and helps you track changes ...
d165cc7. Compare. Redux DevTools Extension v3.1.6. Fix Symbol.observable mismatch via #1560 and #1568. Assets 5. đ 1. 1 person reacted. DevTools for Redux with hot reloading, action replay, and customizable UI - Releases · reduxjs/redux-devtools.
By providing you with the tools you'll need to track and debug your application's state changes, #Redux DevTools is critical when helping to streamline your development workflow. In this video, we're going to teach you how to: - Install Redux DevTools - Generate a React/Redux app in a code editor - Open Redux DevTools in a browser
Ready to set yourself up with Redux DevTools? We walk you through the basics of how to do just that. By providing you with the tools you'll need to track and...
Action History: This feature allows you to see a history of all the actions that have been dispatched in your application, along with the state changes they caused. You can even "time-travel" by sliding the action slider to see the state of your application at any point in time. State History: Similar to action history, you can see a chronological history of your application's state.
Before using Redux dev tools with your app, you need to enable remote JS debugging. In order to this you need to access the developer menu on your device or simulator. Enable remote JS debugging in iOS device or simulator. To open the developer menu on a physical iOS device, you can simply shake the device.
Step 2. There are multiple different ways to wire up your new dev-tools. This is because redux applications can be so different. Thus the need to have different options. In my opinion, this is the most robust and easiest to set up. npm install --save redux-devtools-extension. import { composeWithDevTools } from 'redux-devtools-extension ...
Redux DevTools with hot reloading and time travel. Latest version: 3.14.0, last published: 8 days ago. ... Redux DevTools is a development time package that provides power-ups for your Redux development workflow. Be careful to strip its code in production (see walkthrough for instructions)! To use Redux DevTools, you need to choose a "monitor ...
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.
The Redux DevTools extension is a very popular tool to visualize and perform actions on the Redux state tree of an application. Thankfully, it can also be used with Angular 2+ projects that use ngrx/store for state management, thanks to ngrx/store-devtools. First install the Redux DevTools extension itself. If you're using Chrome, the easiest ...
The official, opinionated, batteries-included toolset for efficient Redux development. Get Started. Simple. Includes utilities to simplify common ... logic, and more. Opinionated. Provides good defaults for store setup out of the box, and includes the most commonly used Redux addons built-in. Powerful. Takes inspiration from libraries like ...
Redux DevTools. Follows recommended practices for Chrome extensions. Learn more. Featured. 4.6 (697 ratings) Extension Developer Tools1,000,000 users. Add to Chrome. For help with questions, suggestions, or problems, visit the developer's support site. Google apps. About Chrome Web Store;
In Safari 17 the extension generated by using the xcrun safari-web-extension-converter tool on the non-prod Firefox version of the extension only requires removing the chrome.notifications.onClicked reference in the background page script in order to get a fully working Redux DevTools. So close, but I can image the distribution overhead that ...
Developer-Tools 255269 | (10) Get . Description. 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. It's an opensource project. See the official repository for more details: https ...
Welcome back to the course. In this video, we are going to implement the Redux dev tools extension so you can use them in your application. This is only going to work using Chrome, so if you're using something besides Chrome, something like Firefox, you'll need to find a different way to work this out. I'm doing it with Chrome extension.