January 07, 2021
React Developers Tools is a Browser Extension that makes debugging easy and a developer's life simple. It allows you to inspect the React component hierarchy providing a view of the component tree and the current state & props of each component. We will learn how to utilize DevTools in debugging React and React Native app. Let's get started.
You can install DevTools extension on either of the two browsers i.e. Chrome or Firefox. You can visit the extension page for your browser of choice or visit the link below to install the extension.
That's it. No extra setup is needed (unless you're using React Native). You can verify the extension by looking for the React logo next to the address bar.
In the case of React Native, we have to install
react-devtools package to enable all the features as we are using a standalone shell not a browser.
react-devtools package globally:
yarn global add react-devtools
or with npm:
npm install -g react-devtools
react-devtools from the terminal to launch the standalone DevTools app:
You can open React DevTools in your browser by right-clicking and selecting Inspect.
"Profiler" tabs will appear to the right which we will use to debug our app.
You can visit this link to see these two in action.
You can browse through the component tree and get a better understanding of the structure of your app. React elements can be selected to view extra information about that component.
Selected React elements have a real-time view of the instance’s state, props, and hooks. This is great for debugging!
Render stack shows where the props are coming from so it's easier to debug. It also provides a way to log warnings that include the React component stack.
Large component trees can sometimes be hard to navigate. DevTools now provides a way to filter components so that you can hide ones you're not interested in seeing.
"Rendered by" list will reveal the history of props and where they are coming from. In React, an element's "owner" refers to the thing that rendered it. Sometimes an element's parent is also its owner, but usually, they're different. This distinction is important because props come from owners.
DevTools adds a new
"rendered by" list in the right-hand pane that allows you to quickly step through the list of owners to speed up your debugging.
The inverse of the "rendered by" list is called the "owners tree". Owners tree will show a list of things rendered by a particular component. Just double click a component and it will show all the things it owns.
Hooks now have the same level of support as props and state: values can be edited, arrays and objects can be drilled into, etc.
A Profiler is a powerful tool for performance tuning React Components. The Profiler measures how often a React application renders and what the “cost” of rendering is. By "cost", I mean that when each component rendered, how many times it got rendered and at what speed. It collects timing information about components to explain how fast or your slow app is.
Open the browser developer tools by right-clicking anywhere on the page and clicking "Inspect". Then select the "⚛ Profiler" tab where you will a blue circle ● at the left most corner to "Start Profiling" the application.
Conceptually, React does work in two phases:
The profiler runs for as long as your application renders until you hit the stop button. After you hit stop, you will see some form of bars and charts. Let's understand these charts.
Each bar in the chart represents a React component. The size and color of the bar represent how long it took to render the component and its children. (The width of a bar represents how much time was spent when the component last rendered and the color represents how much time was spent as part of the current commit.)
The ranked chart view of representing performance shows a React component in bar format. It is arranged in descending order, with the components that took the longest to render at the top. A component's rendering time also includes the time it took to render the children components.
Interactions are used for tracing the cause of an update. “Interactions” traced with this API will also be shown in the profiler. Example: Scroll to row 200, Scroll to row 300, etc.
I hope this guide serves it's purpose and explains the benefits of using React DevTools to debug your React app. Happy Debugging!!