What React Developer Tools does

React Developer Tools is a browser extension associated with Meta Platforms, Inc.. The official material describes it as: “Adds React debugging tools to the Microsoft Edge Developer Tools. Created from revision 3cde211b0c on 10/20/2025.” This guide uses the recorded store pages and official project material to explain installation, first use, documented functions, browser coverage, pricing signals, permissions, privacy checks and troubleshooting without treating promotional claims as independently tested results.

React Developer Tools has verified store entries for Chrome, Microsoft Edge, Firefox. Use the browser icons on this page to reach those exact listings because similarly named extensions can belong to different publishers. The Chrome entry is the primary catalog reference for this batch; Edge and Firefox are included only where the corresponding product was matched and checked.

React Developer Tools is a browser DevTools extension for the open-source React library.
You will get two new tabs in your Edge DevTools: "Components ⚛" and "Profiler ⚛".
The Components tab shows you the root React components that were rendered on the page, as well as the subcomponents that they ended up rendering.
By selecting one of the components in the tree, you can inspect and edit its current props and state in the panel on the right.

How to install React Developer Tools

Open the official store icon for the browser you currently use: in Chrome select Add to Chrome; in Microsoft Edge select Get; in Firefox select Add to Firefox. Confirm that the title is React Developer Tools, compare the product icon and publisher with this page, and read the permission dialog before accepting the installation. This helps avoid a different extension with a similar name.

After installation, open the browser Extensions menu and confirm that React Developer Tools is enabled. Pin its toolbar icon when the product uses a popup; if it changes a new-tab page or adds controls inside supported websites, open a fresh tab or reload the target page. Start on a non-sensitive page until you understand the interface and access it requests.

Use only the verified Chrome, Microsoft Edge, Firefox store links shown on this page.
Confirm the listed publisher: Meta Platforms, Inc..
Review optional site access before enabling it for every website.

First-use workflow for React Developer Tools

React Developer Tools is a browser DevTools extension for the open-source React library. Begin with the narrow task described in that official material. Open the toolbar popup, replacement page or supported website that the extension provides, complete one representative action, and compare the result with the original browser workflow before making it part of daily work.

You will get two new tabs in your Edge DevTools: "Components ⚛" and "Profiler ⚛". Controls can move between versions, so use the current interface and official help links as the final reference. If an account, API key, local companion app or website permission is requested, complete only the setup required by the specific feature you intend to use.

React Developer Tools is a browser DevTools extension for the open-source React library.
You will get two new tabs in your Edge DevTools: "Components ⚛" and "Profiler ⚛".
The Components tab shows you the root React components that were rendered on the page, as well as the subcomponents that they ended up rendering.
By selecting one of the components in the tree, you can inspect and edit its current props and state in the panel on the right.
In the breadcrumbs you can inspect the selected component, the component that created it, the component that created that one, and so on.

Documented features and practical controls

The Components tab shows you the root React components that were rendered on the page, as well as the subcomponents that they ended up rendering. The screenshots on this page come from an official browser store or the official project repository and show the interface or functions available when they were captured. A screenshot is useful for orientation but may not match a later release pixel for pixel.

Use the extension settings to review behavior that can be changed, disabled or limited by site when those controls are available. Test one change at a time, reload the affected page, and keep the original data or browser state when the tool edits, downloads, filters, converts, synchronizes or submits information.

The Components tab shows you the root React components that were rendered on the page, as well as the subcomponents that they ended up rendering.
By selecting one of the components in the tree, you can inspect and edit its current props and state in the panel on the right.
In the breadcrumbs you can inspect the selected component, the component that created it, the component that created that one, and so on.
If you inspect a React element on the page using the regular Elements tab, then switch over to the React tab, that element will be automatically selected in the React tree.
The Profiler tab allows you to record performance information.
This extension requires permissions to access the page's React tree, but it does not transmit any data remotely.

Who React Developer Tools is for and how to evaluate it

React Developer Tools is most useful when the documented function removes a repeated browser step or exposes information that would otherwise require a separate page. Evaluate it with a real but low-risk task: record how many steps the normal workflow takes, repeat the same task with the extension, and keep it only when the benefit is clear enough to justify another browser permission and background component.

For security, finance, AI, translation, downloads, account management or content-processing tools, independently verify important output and destination details. An extension can shorten a workflow, but it does not replace backups, the original website, professional advice or review of a transaction before confirmation.

Test one representative task before enabling broad site access.
Verify generated, translated, filtered or financial output independently.
Remove the extension if its current behavior no longer matches the documented purpose.

Free use, paid features and account requirements

The captured official material does not present a required purchase for the core browser extension, so this directory records React Developer Tools as free to install. That label is not a promise that every connected account, network transaction, optional service, donation feature or future release is free. Confirm current terms on the official product page before relying on the extension for a paid workflow.

Account requirements can differ by feature and browser. A local utility may work immediately, while synchronization, cloud processing, AI models, support, team functions or connected services may require sign-in or separate terms. Read the current checkout and account screens instead of relying on an old review, because plans and regional availability can change after this research date.

Check whether the exact feature you need requires an account.
Confirm current limits and regional prices on the developer website.
Review renewal and cancellation terms before starting a trial.

Permissions, privacy and current version

The captured product data reports Edge 7.0.1 (10/20/2025); Firefox 6.1.1. Where an Edge manifest was available, it declared or requested items including: scripting, storage, tabs, clipboardWrite, <all_urls>. A permission list describes technical access, not proof of how the publisher uses data. Read the browser prompt, restrict optional site access to the pages that need it, and review the current privacy information before entering confidential, financial or personal content.

The developer also publishes an official source repository, which is linked in the source record for readers who want to inspect code, release notes or project documentation. Store versions can change independently across Chrome, Edge and Firefox. Check the update date, release notes and ownership shown by the store before enabling an old installation again, especially when a workflow handles credentials, cookies, page content, downloads or account data.

Recorded versions: Edge 7.0.1 (10/20/2025); Firefox 6.1.1.
Manifest generation: 3.
The captured Edge listing includes a publisher privacy-policy link.

Common questions and troubleshooting for React Developer Tools

People searching for “react developer tools” and “react developer tools edge” commonly need an official download, setup help, browser compatibility or an explanation of the extension's purpose. This page links to official store entries rather than hosting an installation package. If the product does not appear after installation, verify that it is enabled, pin the icon when appropriate, reload the target page and check whether site access is allowed.

If a feature still fails, compare the browser and extension versions, confirm any required account or companion service, and temporarily disable other extensions that change the same page. Use the official project or publisher support route for product-specific errors. Uninstall React Developer Tools when permissions, ownership, pricing or behavior no longer fit your needs. The saved keyword suggestions are factual autocomplete outputs, not claims of search volume or product quality.

Reload the target page after changing permissions or settings.
Check browser compatibility and required companion services.
Use official support channels for product-specific failures.

Screenshots