Full list of changes (not a public CHANGELOG): * feature[REMOVED][devtools]: turn off / hide location based component filters ([hoxyq](https://github.com/hoxyq) in [#28417](https://github.com/facebook/react/pull/28417)) * Add useSyncExternalStore and useTransition to getPrimitiveStackCache ([jamesbvaughan](https://github.com/jamesbvaughan) in [#28399](https://github.com/facebook/react/pull/28399)) * chore[devtools]: use react-window from npm and bump react-virtualized-auto-sizer to ^1.0.23 ([hoxyq](https://github.com/hoxyq) in [#28408](https://github.com/facebook/react/pull/28408)) * Pass ref as normal prop ([acdlite](https://github.com/acdlite) in [#28348](https://github.com/facebook/react/pull/28348)) * Combine createElement and JSX modules ([acdlite](https://github.com/acdlite) in [#28320](https://github.com/facebook/react/pull/28320)) * [Debug Tools] Always use includeHooksSource option ([sebmarkbage](https://github.com/sebmarkbage) in [#28309](https://github.com/facebook/react/pull/28309)) * Revert "[Tests] Reset modules by default" ([acdlite](https://github.com/acdlite) in [#28318](https://github.com/facebook/react/pull/28318)) * Switch <Context> to mean <Context.Provider> ([gaearon](https://github.com/gaearon) in [#28226](https://github.com/facebook/react/pull/28226)) * [Debug Tools] Introspect Promises in use() ([sebmarkbage](https://github.com/sebmarkbage) in [#28297](https://github.com/facebook/react/pull/28297)) * fix[devtools/useModalDismissSignal]: use getRootNode for shadow root case support ([hoxyq](https://github.com/hoxyq) in [#28145](https://github.com/facebook/react/pull/28145)) * fix: define IS_ACT_ENVIRONMENT global for tests with concurrent mode and synchronous act ([hoxyq](https://github.com/hoxyq) in [#28296](https://github.com/facebook/react/pull/28296)) * chore: gate legacy apis for react-devtools-shell ([hoxyq](https://github.com/hoxyq) in [#28273](https://github.com/facebook/react/pull/28273)) * DevTools: Add support for use(Context) ([eps1lon](https://github.com/eps1lon) in [#28233](https://github.com/facebook/react/pull/28233)) * Remove __self and __source location from elements ([sebmarkbage](https://github.com/sebmarkbage) in [#28265](https://github.com/facebook/react/pull/28265)) * chore: use versioned render in inspectedElement test ([hoxyq](https://github.com/hoxyq) in [#28246](https://github.com/facebook/react/pull/28246)) * chore: use versioned render in TimelineProfiler test and gate some for legacy rendering ([hoxyq](https://github.com/hoxyq) in [#28218](https://github.com/facebook/react/pull/28218)) * [Tests] Reset modules by default ([rickhanlonii](https://github.com/rickhanlonii) in [#28254](https://github.com/facebook/react/pull/28254)) * chore: use versioned render in preprocessData test and gate some for … ([hoxyq](https://github.com/hoxyq) in [#28219](https://github.com/facebook/react/pull/28219)) * chore: use versioned render in storeStressSync test and gate them for legacy rendering ([hoxyq](https://github.com/hoxyq) in [#28216](https://github.com/facebook/react/pull/28216)) * Patch devtools before running useMemo function in strict mode ([gsathya](https://github.com/gsathya) in [#28249](https://github.com/facebook/react/pull/28249)) * chore: use versioned render in storeComponentFilters test ([hoxyq](https://github.com/hoxyq) in [#28241](https://github.com/facebook/react/pull/28241)) * chore: use versioned render in profilerContext test ([hoxyq](https://github.com/hoxyq) in [#28243](https://github.com/facebook/react/pull/28243)) * chore: use versioned render in profilingCommitTreeBuilder test and gate some for legacy rendering ([hoxyq](https://github.com/hoxyq) in [#28236](https://github.com/facebook/react/pull/28236)) * chore: use versioned render in profilingHostRoot test and gate some for legacy rendering ([hoxyq](https://github.com/hoxyq) in [#28237](https://github.com/facebook/react/pull/28237)) * chore: use versioned render in profilingCache test ([hoxyq](https://github.com/hoxyq) in [#28242](https://github.com/facebook/react/pull/28242)) * chore: use versioned render in ownersListContext test ([hoxyq](https://github.com/hoxyq) in [#28240](https://github.com/facebook/react/pull/28240)) * chore: use versioned render in editing test ([hoxyq](https://github.com/hoxyq) in [#28239](https://github.com/facebook/react/pull/28239)) * chore: use versioned render in treeContext test ([hoxyq](https://github.com/hoxyq) in [#28245](https://github.com/facebook/react/pull/28245)) * chore: use versioned render in store test ([hoxyq](https://github.com/hoxyq) in [#28244](https://github.com/facebook/react/pull/28244)) * chore: use versioned render in profilerStore test ([hoxyq](https://github.com/hoxyq) in [#28238](https://github.com/facebook/react/pull/28238)) * chore: use versioned render in profilingCharts test ([hoxyq](https://github.com/hoxyq) in [#28235](https://github.com/facebook/react/pull/28235)) * chore: use versioned render in profilerChangeDescriptions test ([hoxyq](https://github.com/hoxyq) in [#28221](https://github.com/facebook/react/pull/28221)) * chore: use versioned render in storeOwners test ([hoxyq](https://github.com/hoxyq) in [#28215](https://github.com/facebook/react/pull/28215)) * chore: use versioned render in componentStacks test ([hoxyq](https://github.com/hoxyq) in [#28214](https://github.com/facebook/react/pull/28214)) * chore: use versioned render in console test ([hoxyq](https://github.com/hoxyq) in [#28213](https://github.com/facebook/react/pull/28213)) * chore: use versioned render in useEditableValue test ([hoxyq](https://github.com/hoxyq) in [#28212](https://github.com/facebook/react/pull/28212)) * chore: use versioned render in FastRefreshDevToolsIntegration test ([hoxyq](https://github.com/hoxyq) in [#28211](https://github.com/facebook/react/pull/28211)) * chore: add versioned render implementation for DevTools tests ([hoxyq](https://github.com/hoxyq) in [#28210](https://github.com/facebook/react/pull/28210)) * chore: add single versioned implementation of act for DevTools tests ([hoxyq](https://github.com/hoxyq) in [#28186](https://github.com/facebook/react/pull/28186)) * DevTools: Add support for useFormState ([eps1lon](https://github.com/eps1lon) in [#28232](https://github.com/facebook/react/pull/28232)) * DevTools: Add support for useOptimistic Hook ([eps1lon](https://github.com/eps1lon) in [#27982](https://github.com/facebook/react/pull/27982)) * Add stable React.act export ([acdlite](https://github.com/acdlite) in [#28160](https://github.com/facebook/react/pull/28160)) * [flow] upgrade to 0.225.1 ([kassens](https://github.com/kassens) in [#27871](https://github.com/facebook/react/pull/27871)) * fix[devtools/e2e]: add fallback for act in integration tests ([hoxyq](https://github.com/hoxyq) in [#27842](https://github.com/facebook/react/pull/27842)) * Add stable concurrent option to react-test-renderer ([jackpope](https://github.com/jackpope) in [#27804](https://github.com/facebook/react/pull/27804)) * Update act references in tests ([gnoff](https://github.com/gnoff) in [#27805](https://github.com/facebook/react/pull/27805)) * Flow: make more objects exact ([kassens](https://github.com/kassens) in [#27790](https://github.com/facebook/react/pull/27790))
This is the source code for the React DevTools browser extension.
Installation
The easiest way to install this extension is as a browser add-on:
Local development
You can also build and install this extension from source.
Prerequisite steps
DevTools depends on local versions of several NPM packages1 also in this workspace. You'll need to either build or download those packages first.
1 Note that at this time, an experimental build is required because DevTools depends on the createRoot API.
To install all necessary dependencies, run the following command from the root of the repository:
yarn install
Build from source
To build dependencies from source, run the following command from the root of the repository:
yarn build-for-devtools
Download from CI
To use the latest build from CI, run the following commands starting from the root of the repository:
cd scripts/release
yarn install
./download-experimental-build.js
Build steps
Once the above packages have been built or downloaded, you can build the extension by running:
cd packages/react-devtools-extensions/
yarn build:chrome # => packages/react-devtools-extensions/chrome/build
yarn run test:chrome # Test Chrome extension
yarn build:firefox # => packages/react-devtools-extensions/firefox/build
yarn run test:firefox # Test Firefox extension
yarn build:edge # => packages/react-devtools-extensions/edge/build
yarn run test:edge # Test Edge extension