Commit Graph

17 Commits

Author SHA1 Message Date
Brendan Abbott
0a7dc1b1c7 [devtools] Introduce REACT_DEVTOOLS_PORT for the standalone react-devtools (#30767)
## Summary

This PR attempts to make running the React DevTools a little friendlier
in projects that are not completely React.

At the moment, running the DevTools with `npx react-devtools` will
default to the port to use the `PORT` env variable otherwise it'll fall
back to `8097`. `PORT` is a common env variable, so we can get into this
strange situation where the a Rails server (eg Puma) is using `PORT`,
and then the React DevTools attempts to boot using the same `PORT`.

This PR introduces a dedicated env variable, `REACT_DEVTOOLS_PORT` to
assist in this scenario.

## How did you test this change?

I'm using fish shell, so I did the following, please let me know if
there's a better way:

```sh
cd packages/react-devtools
set -x PORT 1000
set -x REACT_DEVTOOLS_PORT 2000
node bin.js
```

We can see in the UI that it's listening on `2000`. Without this PR,
it'd listen on `1000`:

![Screenshot 2024-08-21 at 10 45
42 AM](https://github.com/user-attachments/assets/a5c7590c-1b54-4ac8-9a8b-8eb66ff67cfb)
2025-02-11 18:14:43 +00:00
Mengdi Chen
b073104c26 [DevTools] improve troubleshooting in README (#26235)
## Summary

Improve the README when the elements are not loaded due to Chrome
service worker malfunction
2023-03-03 14:02:21 -05:00
Mengdi Chen
6dbccb9249 [DevTools] upgrade to Manifest V3 (#25145)
## Summary

resolves #24522

To upgrade to Manifest V3, one of the biggest issue is that we are no
longer allowed to add a script element with code in textContent so that
it would run synchronously. It's necessary for us because we need to
inject a global hook for react reconciler to detect whether devtools
exist.
To do that, we'll leverage a new API
`chrome.scripting.registerContentScripts` in V3. Particularly, we rely
on the "world" option (added in Chrome v102
[commit](e5ad3451c1))
to run it in the "main world" on the page.

This PR also renames a few content script files so that it's easier to
tell them apart from other extension scripts and understand the purpose
of each of them.

Manifest V3 is not yet ready for Firefox, so we need to keep some code
for compatibility.

## How did you test this change?

`yarn build:chrome && yarn test:chrome`
`yarn build:edge && yarn test:edge`
`yarn build:firefox && yarn test:firefox`
2022-10-21 22:52:18 -04:00
Brandon Chan
b2748907c3 Updated the URL link for serve (#25296) 2022-09-19 13:13:38 -04:00
Robert Balicki
4e60dbd905 [easy] Clarify folders in react devtools readme #25077
Clarify the folder from which we run various commands in the react-devtools readme
2022-08-11 19:47:02 -04:00
Brian Vaughn
8fce116998 Update DevTools READMEs (#24105) 2022-03-16 11:37:10 -04:00
38elements
cbf6178ed3 Fix links in packages/react-devtools/README.md (#22356) 2021-09-20 15:10:29 -04:00
Brian Vaughn
d483463bc8 Updated scripts and config to replace "master" with "main" branch (#21768) 2021-06-29 14:26:24 -04:00
Saikat Guha
f46a80ae11 Update outdated links and fix two broken links (#19985)
* update all facebook.github.io links

* facebookincubator links : update some outdated links and fix two other broken links where they are actually the latest updated ones
2020-10-09 02:56:30 +01:00
Dan Abramov
2663a12eb3 Tweak wording 2020-07-10 14:56:28 +01:00
Vetrivel Chinnasamy
b621dab5d4 make link https (#19147) 2020-06-30 12:43:52 +01:00
Sunil Pai
21b713b9fd Updated React Native home URL (#18218) 2020-03-05 13:15:46 +00:00
Brian Vaughn
95056b6836 DevTools build script enhancements (#17653)
* Updated DevTools local development instructions to mention experimental build step

* Added a command to download latest experimental release (for DevTools)

* Updated build instructions for clarity

* Added build-for-devtools package alias
2019-12-18 14:34:40 -08:00
Liad Yosef
c317fc273b Correct link for troubleshooting react-dev-tools (#16690) (#16708)
* Correct link for troubleshooting react-dev-tools (#16690)

As pointed out in #16690 - the link for 'React Tab Doesn't Show Up' points to the empty README.MD.
This points it to that section in the v3 version README.MD - until an updated section will be added to the new dev-tools.

* Add a "The React Tab Doesn't Show Up" section

Add the troubleshooting section to the react dev tools readme

* point to the correct section in react-dev-tools readme

After adding the troubleshooting section to the readme - this will point to the correct place

* Moved README file to GitHub

* Update new issue link to include DevTools label
2019-09-10 13:14:19 -07:00
Brian Vaughn
bc8b15332b Updated README docs, example screenshots, etc 2019-08-27 15:20:34 -07:00
Brian Vaughn
45dff31a75 Patched up react-devtools-core Webpack configs 2019-08-14 11:22:28 -07:00
Brian Vaughn
0f2fb5badf Standalone NPM packages and React Native support (#335)
* Add version 4 react-devtools and react-devtools-core packages which support both React Native and e.g. Safari or iframe DOM usage.
* Replaces typed operations arrays with regular arrays in order to support Hermes. This is unfortunate, since in theory a typed array buffer could be more efficiently transferred between frontend and backend for the web extension, but this never actually worked properly in v8, only Spidermonkey, and it fails entirely in Hermes so for the time being- it's been removed.
* Adds support for React Native (paper renderer)
* Adds a style editor for react-native and react-native-web
2019-07-13 10:05:04 -07:00