Use the React Developer Tools browser extension

Introduction

The React Developer Tools is a browser extension that allows you to inspect the React component hierarchy in the Elements tab of your browser's developer tools. It is available for the Google Chrome, Mozilla Firefox, and Microsoft Edge web browsers.

Installation

1. Install the extension in your web browser:
   • For Google Chrome: visit the Chrome Web Store and search for React Developer Tools. Click Add to Chrome to install the extension.
   • For Mozilla Firefox: visit the Firefox Add-ons website and search for React Developer Tools. Click Add to Firefox to install the extension.
   • For Microsoft Edge: visit the Microsoft Edge Add-ons website and search for React Developer Tools. Click Get to install the extension.
2. Once the extension is installed, open the your react app you want to inspect in the web browser.
3. Open the developer tools by right-clicking on the page and selecting Inspect (or use the keyboard shortcut Ctrl + Shift + I on Windows, or ⌘ + ⌥ + I on macOS).
4. Click on the React tab in the developer tools panel.
5. You should now see the React component hierarchy for the page you are inspecting. You can click on a component in the hierarchy to view its props and state, and you can make changes to the props and state in the developer tools to see how they affect the component.

Note : The React Developer Tools extension only works with pages that are using React. If the page you are inspecting is not using React, the React tab will not be available in the developer tools.

Usage

Some specific use cases for the React Developer Tools extension include:

• Debugging: You can use the extension to view the props and state of a component, which can help you understand why a component is not behaving as expected. You can also use the extension to set new values for props and state, which can help you test different scenarios and identify bugs.
• Understanding the component hierarchy: The extension allows you to see the full component hierarchy for a page, which can be helpful for understanding how the components are organized and how they interact with each other.
• Inspecting the component tree: The extension allows you to expand and collapse the component tree to see the structure of the components in more detail. You can also use the search function to find specific components in the tree.
• Modifying components: You can use the extension to modify the props and state of a component in real-time, which can be useful for testing different configurations and seeing how they affect the component.
• Profiling: Profiling allows you to see how your application is performing like time took to render specific components.

Example screenshots

Fig: Screenshot of components tab from react developer tools

Fig: Screenshot of profiler tab from react developer tools