Here is a free React Developer Tool to inspect rendered React components in Chrome. Here this is a simple and powerful Chrome extension to audit React components and inspects them in various ways. Here this Chrome extension adds extra option in the built in Chrome DevTools that you can use to audit a page using React for rendering. It can list down the components in the tree and you can easily inspect and edit its current props and state. Also, in the breadcrumbs, you can inspect the selected component with ease.
This is a simple Chrome extension that will be loved by React developers. The extension will only work on web pages using React for rendering the components and you can see if a web page supports React by simply clicking on the icon of this simple extension. And not only Chrome but it works with Firefox as well. You just open DevTools on any website using React such as Facebook and then inspect any element on the page. It offers you a search box as well which supports regular expressions to find a specific element in the tree.
How to Add React Debugging Tools to Chrome DevTools to Inspect React Component?
You install this extension like you install any other Chrome or Firefox plugin. Add this from Chrome Store or install it in Firefox from the add-ons page. Next, you will start seeing its icon in the toolbar. If you click on its icon then it will show you whether the current page is in React or not. If the current page is not using React then it will obviously not work on that.
So, first open a page that it built using React. Or, you can use this on some of your React projects that you’ve been working on. Just open Chrome DevTool by pressing F12 or you can use the right click menu Inspect option for the same. Now from the DevTool, simply go to the far right and find “Components” and “Profiler” options. You can see the below screenshot.
Now, here you can actually start inspecting. The whole React tree is right in front of you. You can explore the different nodes and use the search box at the top. Here you are free to inspect any React component, the component which created it, and this goes on and on.
In this way, you can use this simple and powerful extension for Chrome DevTools to inspect React components on different websites. During my testing, I used on different type of Facebook pages and components and it worked flawlessly.
Closing thoughts
React is an amazing gift to web developers from Facebook. And if you are a React developer or just beginner then you will like this simple extension I have mentioned here. You can just get it from the given link and then start inspecting React components on different websites.
