Full list of changes: * Text layout fixes for stack traces with badges ([eps1lon](https://github.com/eps1lon) in [#34925](https://github.com/facebook/react/pull/34925)) * chore: read from build/COMMIT_SHA fle as fallback for commit hash ([hoxyq](https://github.com/hoxyq) in [#34915](https://github.com/facebook/react/pull/34915)) * fix: dont ship source maps for css in prod builds ([hoxyq](https://github.com/hoxyq) in [#34913](https://github.com/facebook/react/pull/34913)) * Lower case "rsc stream" debug info ([sebmarkbage](https://github.com/sebmarkbage) in [#34921](https://github.com/facebook/react/pull/34921)) * BuiltInCallSite should have padding-left ([sebmarkbage](https://github.com/sebmarkbage) in [#34922](https://github.com/facebook/react/pull/34922)) * Show the Suspense boundary name in the rect if there's no overlap ([sebmarkbage](https://github.com/sebmarkbage) in [#34918](https://github.com/facebook/react/pull/34918)) * Don't attach filtered IO to grandparent Suspense ([eps1lon](https://github.com/eps1lon) in [#34916](https://github.com/facebook/react/pull/34916)) * Infer name from stack if it's the generic "lazy" name ([sebmarkbage](https://github.com/sebmarkbage) in [#34907](https://github.com/facebook/react/pull/34907)) * Use same Suspense naming heuristics when reconnecting ([eps1lon](https://github.com/eps1lon) in [#34898](https://github.com/facebook/react/pull/34898)) * Assign a different color and label based on environment ([sebmarkbage](https://github.com/sebmarkbage) in [#34893](https://github.com/facebook/react/pull/34893)) * Compute environment names for the timeline ([sebmarkbage](https://github.com/sebmarkbage) in [#34892](https://github.com/facebook/react/pull/34892)) * Don't highlight the root rect if no roots has unique suspenders ([sebmarkbage](https://github.com/sebmarkbage) in [#34885](https://github.com/facebook/react/pull/34885)) * Highlight the rect when the corresponding timeline bean is hovered ([sebmarkbage](https://github.com/sebmarkbage) in [#34881](https://github.com/facebook/react/pull/34881)) * Repeat the "name" if there's no short description in groups ([sebmarkbage](https://github.com/sebmarkbage) in [#34894](https://github.com/facebook/react/pull/34894)) * Tweak the rects design and create multi-environment color scheme ([sebmarkbage](https://github.com/sebmarkbage) in [#34880](https://github.com/facebook/react/pull/34880)) * Adjust the rects size by one pixel smaller ([sebmarkbage](https://github.com/sebmarkbage) in [#34876](https://github.com/facebook/react/pull/34876)) * Remove steps title from scrubber ([sebmarkbage](https://github.com/sebmarkbage) in [#34878](https://github.com/facebook/react/pull/34878)) * Include some sub-pixel precision in rects ([sebmarkbage](https://github.com/sebmarkbage) in [#34873](https://github.com/facebook/react/pull/34873)) * Don't pluralize if already plural ([sebmarkbage](https://github.com/sebmarkbage) in [#34870](https://github.com/facebook/react/pull/34870)) * Don't try to load anonymous or empty urls ([sebmarkbage](https://github.com/sebmarkbage) in [#34869](https://github.com/facebook/react/pull/34869)) * Add inspection button to Suspense tab ([sebmarkbage](https://github.com/sebmarkbage) in [#34867](https://github.com/facebook/react/pull/34867)) * Don't select on hover ([sebmarkbage](https://github.com/sebmarkbage) in [#34860](https://github.com/facebook/react/pull/34860)) * Don't highlight on timeline ([sebmarkbage](https://github.com/sebmarkbage) in [#34861](https://github.com/facebook/react/pull/34861)) * The bridge event types should only be defined in one direction ([sebmarkbage](https://github.com/sebmarkbage) in [#34859](https://github.com/facebook/react/pull/34859)) * Attempt at a better "unique suspender" text ([sebmarkbage](https://github.com/sebmarkbage) in [#34854](https://github.com/facebook/react/pull/34854)) * Track whether a boundary is currently suspended and make transparent ([sebmarkbage](https://github.com/sebmarkbage) in [#34853](https://github.com/facebook/react/pull/34853)) * Don't hide overflow rectangles ([sebmarkbage](https://github.com/sebmarkbage) in [#34852](https://github.com/facebook/react/pull/34852)) * Measure text nodes ([sebmarkbage](https://github.com/sebmarkbage) in [#34851](https://github.com/facebook/react/pull/34851)) * Don't measure fallbacks when suspended ([sebmarkbage](https://github.com/sebmarkbage) in [#34850](https://github.com/facebook/react/pull/34850)) * Filter out built-in stack frames ([sebmarkbage](https://github.com/sebmarkbage) in [#34828](https://github.com/facebook/react/pull/34828)) * Exclude Suspense boundaries in hidden Activity ([eps1lon](https://github.com/eps1lon) in [#34756](https://github.com/facebook/react/pull/34756)) * Group consecutive suspended by rows by the same name ([sebmarkbage](https://github.com/sebmarkbage) in [#34830](https://github.com/facebook/react/pull/34830)) * Preserve the original index when sorting suspended by ([sebmarkbage](https://github.com/sebmarkbage) in [#34829](https://github.com/facebook/react/pull/34829)) * Don't show the root as being non-compliant ([sebmarkbage](https://github.com/sebmarkbage) in [#34827](https://github.com/facebook/react/pull/34827)) * Ignore suspense boundaries, without visual representation, in the timeline ([sebmarkbage](https://github.com/sebmarkbage) in [#34824](https://github.com/facebook/react/pull/34824)) * Explicitly say which id to scroll to and only once ([sebmarkbage](https://github.com/sebmarkbage) in [#34823](https://github.com/facebook/react/pull/34823)) * devtools: fix ellipsis truncation for key values ([sophiebits](https://github.com/sophiebits) in [#34796](https://github.com/facebook/react/pull/34796)) * fix(devtools): remove duplicated "Display density" field in General settings ([Anatole-Godard](https://github.com/Anatole-Godard) in [#34792](https://github.com/facebook/react/pull/34792)) * Gate SuspenseTab ([hoxyq](https://github.com/hoxyq) in [#34754](https://github.com/facebook/react/pull/34754)) * Release `<ViewTransition />` to Canary ([eps1lon](https://github.com/eps1lon) in [#34712](https://github.com/facebook/react/pull/34712)) |
||
|---|---|---|
| .. | ||
| .circleci | ||
| chrome | ||
| edge | ||
| firefox | ||
| flow-typed | ||
| icons | ||
| popups | ||
| src | ||
| build.js | ||
| deploy.chrome.html | ||
| deploy.edge.html | ||
| deploy.firefox.html | ||
| deploy.html | ||
| deploy.js | ||
| improveImages.mjs | ||
| main.html | ||
| package.json | ||
| panel.html | ||
| README.md | ||
| utils.js | ||
| webpack.config.js | ||
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