How to use React Developer Tools

To understand this very useful tool, we absolutely need to install it when building React applications.

One very useful tool that we absolutely need to install when building a React application (for example, the Next.js application) is the React Developer Tools.

Both are availableChrome alloywithFirefox browser, React Developer Tools is the basic tool that can be used to check React applications.

They provide an inspector that reveals the React component tree that builds the page. For each component, you can check the props, status, hooks, etc.

Once React Developer Tools are installed, you can open the regular browser devtools (in Chrome, right-click on the page and clickInspect), you will find 2 new panels:ingredientwithProfiler.

If you move the mouse over the component, you will see it on the page, and the browser will select the part rendered by the component.

If you select any component in the tree, the right panel will display theParent component, The props are passed to it:

You can easily navigate by clicking around the component name.

You can click the eye icon in the "Developer Tools" toolbar to inspect the DOM element. If you are using the first icon (the icon with a mouse icon, which is usually located under a similar regular DevTools icon), then You can hover an element over the browser user interface to directly select the React component that renders it.

you can use itbugThe icon logs component data to the console.

This is great because once the data is printed in it, you can right-click on any element and press "Save as Global Variable". For example, here I useurlProp, I can check it in the console using the temporary variable assigned to it,temp1:

useSource map, Automatically loaded by Next.js in development mode, we can click from the "Components" panel<>Code, DevTools will switch to the "Source Code" panel to show us the component source code:

ThisProfilerIf possible, the label would be better. It enables us toRecord interactionIn the app, then see what happens. I can't show an example because it requires at least 2 components to create an interaction, and now there is only one. talk about it later.

I used the Chrome browser to show all the screenshots, but the React Developer Tools work the same way in Firefox:

Download mine for freeResponse Handbook


More response tutorials: