React provides the tools for developers to debug React code. It allows us to inspect a React-rendered component with the component hierarchy, props, and state.
There are two official extensions that are available for the Chrome and Firefox browsers.
Download the extension for Chrome:
And Firefox:
https://addons.mozilla.org/en-US/firefox/addon/react-devtools/
Once you download or install the extension in your browser, open the Developer Tools on a React page. You should see one extra tab called React:
In the side panel, you can see the State and Props for every React component. If you expand the State of the component, you will see the full hierarchy of the component with the name of the component you are using in the React app.
See the following screenshot:
Right-click on the side panel and we can inspect and edit its current props and state in the panel on the right.
We can also view the code execution function by clicking Execute function:
If you inspect the allTicket component with the React tool, you can see the data flow with props into the child elements:
If you are inspect a React element on the page in the Elements tab, and then switch over to the React tab, that element will be automatically selected in the React tree. Using the search tab, we can also search for the component by name.
If you also need to trace updates for the component, you need to select the top checkbox, Trace React Updates.