How To Use The React Developer Tools Profiler Tab You can also inspect the selected component (i.e the Button component) to know which component rendered it (i.e the App component rendered the Button component), the component that created the App component, and the version of the react-dom you’re using. You can inspect your React page component tree by navigating to your Chrome React DevTools Components tab, as illustrated below:įrom the illustration above, the tab shows that we only have two React components rendered in our React dom: the App component and the Button component that we created.īy selecting one of the components in the tree, we can easily inspect and edit any of their current props and state in the panel on the right, as demonstrated below: You should have something like this on your page: Let’s say you have a Button.jsx component that accepts a text prop, with the following: The Components tab displays the React root components that were rendered on the page, as well as the child components that are rendered within the root components. How To Use The React Developer Tools Components Tab We’ll go over how to make use of the React DevTools tab ‘components’ in the next section. You’ve learned how to install a Chrome extension in this section. This tutorial uses the Chrome extension 4.24.7 version and yours might be a little different depending on the version you have.Īfter installing the React developer tools, two new tabs will be added to your Chrome DevTools, as illustrated below: the tabs” ⚛️ Profiler” and “⚛️ Components.” You’ll get this popup notification after a successful installation:.Click on the “Add extension” button from the popup:.Search for React developer tools and click the “Add to Chrome” button to install the React DevTools extension:.This step will be used in installing any other React dev tool from the Chrome Webstore. How to Install React Developer Tools Extension?īelow is a quick guide on how to install the React developer tools. It’s the official Chrome DevTools extension for the open-source React JavaScript library, allowing you to inspect and visually analyze the React component hierarchies in the Chrome Developer Tools.įacebook React Team maintains the React developer tool extension. The first extension on the list is the React developer tools. Maybe you’ll find your favorite chrome extension here. Listed below are the top 13 React Chrome extensions that boost your productivity as a React developer. They’re useful for debugging and inspecting React components, States, Redux, Context API, React DOM elements, etc. A new tab will be opened on your browser and our React app page should look something like this: What is a React Chrome ExtensionĪ React Chrome extension is a developer tool (or DevTools) that is dedicated to developing and maintaining a React app.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |