Facebook/react
1
0
Fork 0
mirror of https://github.com/facebook/react.git synced 2025-11-01 09:12:30 +00:00
Code Issues Packages Projects Releases Wiki Activity
Files
288cf747c96cea278a6ddce126ce7a0484678afd
react/packages/react-devtools
T
History
Ruslan Lesiutin 288cf747c9 React DevTools 5.0.0 -> 5.0.1 (#28418) 
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))
2024-02-22 19:45:55 +00:00
..
icons
Standalone NPM packages and React Native support (#335)
2019-07-13 10:05:04 -07:00
app.html
[DevTools] upgrade electron to latest version & security improvements (#26337)
2023-03-07 22:31:54 -05:00
app.js
[DevTools] Replace deprecated new-window with webContents.setWindowOpenHandler() (#26559)
2023-04-06 10:02:23 -04:00
bin.js
[Codemod] Update copyright header to Meta (#25315)
2022-10-18 11:19:24 -04:00
CHANGELOG.md
React DevTools 5.0.0 -> 5.0.1 (#28418)
2024-02-22 19:45:55 +00:00
CONTRIBUTING.md
fix invalid link to react-devtools-extensions/src/__tests__ (#25816)
2022-12-06 21:21:01 +01:00
index.js
[Codemod] Update copyright header to Meta (#25315)
2022-10-18 11:19:24 -04:00
OVERVIEW.md
Fix devtools typos and grammar (#24587)
2022-10-03 10:11:40 -04:00
package.json
React DevTools 5.0.0 -> 5.0.1 (#28418)
2024-02-22 19:45:55 +00:00
preload.js
[DevTools] upgrade electron to latest version & security improvements (#26337)
2023-03-07 22:31:54 -05:00
README.md
[DevTools] improve troubleshooting in README (#26235)
2023-03-03 14:02:21 -05:00

README.md

react-devtools

This package can be used to debug non-browser-based React applications (e.g. React Native, mobile browser or embedded webview, Safari).

React DevTools screenshot

Installation

Install the react-devtools package. Because this is a development tool, a global install is often the most convenient:

# Yarn
yarn global add react-devtools

# NPM
npm install -g react-devtools

If you prefer to avoid global installations, you can add react-devtools as a project dependency. With Yarn, you can do this by running:

yarn add --dev react-devtools

With NPM you can just use NPX:

npx react-devtools

Usage with React Native

Run react-devtools from the terminal to launch the standalone DevTools app:

react-devtools

If you're not using a local simulator, you'll also need to forward ports used by React DevTools:

adb reverse tcp:8097 tcp:8097

If you're using React Native 0.43 or higher, it should connect to your simulator within a few seconds. (If this doesn't happen automatically, try reloading the React Native app.)

Integration with React Native Inspector

You can open the in-app developer menu and choose "Show Inspector". It will bring up an overlay that lets you tap on any UI element and see information about it:

React Native Inspector

However, when react-devtools is running, Inspector will enter a special collapsed mode, and instead use the DevTools as primary UI. In this mode, clicking on something in the simulator will bring up the relevant components in the DevTools:

React DevTools Inspector Integration

You can choose "Hide Inspector" in the same menu to exit this mode.

Inspecting Component Instances

When debugging JavaScript in Chrome, you can inspect the props and state of the React components in the browser console.

First, follow the instructions for debugging in Chrome to open the Chrome console.

Make sure that the dropdown in the top left corner of the Chrome console says debuggerWorker.js. This step is essential.

Then select a React component in React DevTools. There is a search box at the top that helps you find one by name. As soon as you select it, it will be available as $r in the Chrome console, letting you inspect its props, state, and instance properties.

React DevTools Chrome Console Integration

Usage with React DOM

The standalone shell can also be useful with React DOM (e.g. to debug apps in Safari or inside of an iframe).

Run react-devtools from the terminal to launch the standalone DevTools app:

react-devtools

Add <script src="http://localhost:8097"></script> as the very first <script> tag in the <head> of your page when developing:

<!doctype html>
<html lang="en">
  <head>
    <script src="http://localhost:8097"></script>

This will ensure the developer tools are connected. Don’t forget to remove it before deploying to production!

If you install react-devtools as a project dependency, you may also replace the <script> suggested above with a JavaScript import (import 'react-devtools'). It is important that this import comes before any other imports in your app (especially before react-dom). Make sure to remove the import before deploying to production, as it carries a large DevTools client with it. If you use Webpack and have control over its configuration, you could alternatively add 'react-devtools' as the first item in the entry array of the development-only configuration, and then you wouldn’t need to deal either with <script> tags or import statements.

Advanced

By default DevTools listen to port 8097 on localhost. If you need to customize host, port, or other settings, see the react-devtools-core package instead.

FAQ

The React Tab Doesn't Show Up

If you are running your app from a local file:// URL, don't forget to check "Allow access to file URLs" on the Chrome Extensions settings page. You can find it by opening Settings > Extensions:

Allow access to file URLs

Or you could develop with a local HTTP server like serve.

The React tab won't show up if the site doesn't use React, or if React can't communicate with the devtools. When the page loads, the devtools sets a global named __REACT_DEVTOOLS_GLOBAL_HOOK__, then React communicates with that hook during initialization. You can test this on the React website or by inspecting Facebook.

If your app is inside of CodePen, make sure you are registered. Then press Fork (if it's not your pen), and then choose Change View > Debug. The Debug view is inspectable with DevTools because it doesn't use an iframe.

If your app is inside an iframe, a Chrome extension, React Native, or in another unusual environment, try the standalone version instead. Chrome apps are currently not inspectable.

If your Components tab is empty, refer to "The React tab shows no components" section below.

If you still have issues please report them. Don't forget to specify your OS, browser version, extension version, and the exact instructions to reproduce the issue with a screenshot.

The React tab shows no components

The Issue with Chrome v101 and earlier

As we migrate to a Chrome Extension Manifest V3, we start to use a new method to hook the DevTools with the inspected page. This new method is more secure, but relies on a new API that's only supported in Chrome v102+. For Chrome v101 or earlier, we use a fallback method, which can cause malfunctions (e.g. failure to load React Elements in the Components tab) if the JS resources on your page is loaded from cache. Please upgrade to Chrome v102+ to avoid this issue.

Service Worker malfunction

Go to chrome://extensions. If you see "service worker (inactive)" in the React Developer Tools extension, try disabling and re-enabling the extension. This will restart the service worker. Then go to the page you want to inspect, close the DevTools, and reload the page. Open the DevTools again and the React components tab should be working.

Local development

The standalone DevTools app can be built and tested from source following the instructions below.

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.

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 command from the root of the repository:

./scripts/release/download-experimental-build.js

Build steps

You can test the standalone DevTools by running the following:

  • First, complete the prerequisite steps above! If you don't do it, none of the steps below will work.
  • Then, run yarn start:backend and yarn start:standalone in packages/react-devtools-core
  • Run yarn start in packages/react-devtools
  • Refresh the app after it has recompiled a change
  • For React Native, copy react-devtools-core to its node_modules to test your changes.
Reference in New Issue View Git Blame Copy Permalink