React Developer Tools

React Developer Tools is a browser extension that works much like the Developer Tools built in to browsers already. The difference being is that React Developer Tools allows you to inspect React components, edit props and state, and identify performance problems.

When a website isn't built with React the logo within the extensions will be dimmed.

When a website is built with React the React logo within the extensions will be lit up.

Within the tools you can click on the Components tab and this will show you all the Components for the website.

Since this is a production build, the code will be minified and the components will not have descriptive names. However using the React Developer Tools on your own site is a great debugging tool because it allows you to see the the current React component tree, along with any props, state, or context.

There is also a profiler tab.

The Profiler tab lets you record interactions and measure component rendering.

You use the profiler to track component rendering and re-rendering. You navigate flame graphs, or visualizations of your app’s relevant optimization metrics, and use the information to identify inefficient components, reduce rendering time, and increase application speed.

This is only a small snippet of how React Developer Tools can help but as always it is a great tool to have in your armoury. Also codu is built using React!

Happy coding.

Carl.