mirror of https://github.com/zebrajr/react.git synced 2026-01-15 12:15:22 +00:00

Files

Brian Vaughn 5027eb4650 DevTools fork console patching logic (#21301 )

React has its own component stack generation code that DevTools embeds a fork of, but both of them use a shared helper for disabling console logs. This shared helper is DEV only though, because it was intended for use with React DEV-only warnings and we didn't want to unnecessarily add bytes to production builds.

But DevTools itself always ships as a production build– even when it's used to debug DEV bundles of product apps (with third party DEV-only warnings). That means this helper was always a noop.

The resolveCurrentDispatcher method was changed recently to replace the thrown error with a call to console.error. This newly logged error ended up slipping through and being user visible because of the above issue.

This PR updates DevTools to also fork the console patching logic (to remove the DEV-only guard).

Note that I didn't spot this earlier because my test harness (react-devtools-shell) always runs in DEV mode. 🤡

2021-04-16 12:01:47 -04:00

src

Expose DEV-mode warnings in devtools UI (#20463 )

2020-12-22 11:09:29 -05:00

backend.js

Standalone NPM packages and React Native support (#335 )

2019-07-13 10:05:04 -07:00

package.json

Fixed bug in react-detools-inline frontend init method (#21265 )

2021-04-14 13:27:21 -04:00

README.md

fixed: typo in react-devtools/README.md Websocked -> Websocket (#20376 )

2020-12-04 09:59:17 -05:00

standalone.js

Standalone NPM packages and React Native support (#335 )

2019-07-13 10:05:04 -07:00

webpack.backend.js

DevTools fork console patching logic (#21301 )

2021-04-16 12:01:47 -04:00

webpack.standalone.js

[DevTools] Add DevTools forked Feature flags (#18994 )

2020-10-12 13:07:10 -04:00

README.md

`react-devtools-core`

A standalone React DevTools implementation.

This is a low-level package. If you're looking for the Electron app you can run, use react-devtools package instead.

API

`react-devtools-core`

This is similar requiring the react-devtools package, but provides several configurable options. Unlike react-devtools, requiring react-devtools-core doesn't connect immediately but instead exports a function:

const { connectToDevTools } = require("react-devtools-core");
connectToDevTools(config);

Run connectToDevTools() in the same context as React to set up a connection to DevTools.
Be sure to run this function before importing e.g. react, react-dom, react-native.

The config object may contain:

host: string (defaults to "localhost") - Websocket will connect to this host.
port: number (defaults to 8097) - Websocket will connect to this port.
useHttps: boolean (defaults to false) - Websocket should use a secure protocol (wss).
websocket: Websocket - Custom websocket to use. Overrides host and port settings if provided.
resolveRNStyle: (style: number) => ?Object - Used by the React Native style plug-in.
retryConnectionDelay: number (defaults to 2000) - Milliseconds delay to wait between retrying a failed Websocket connection.
isAppActive: () => boolean - If provided, DevTools will poll this method and wait until it returns true before connecting to React.

`react-devtools-core/standalone`

Renders the DevTools interface into a DOM node.

require("react-devtools-core/standalone")
  .setContentDOMNode(document.getElementById("container"))
  .setStatusListener(status => {
    // This callback is optional...
  })
  .startServer(port);

Renders DevTools interface into a DOM node over SSL using a custom host name (Default is localhost).

const host = 'dev.server.com';
const options = {
  key: fs.readFileSync('test/fixtures/keys/agent2-key.pem'),
  cert: fs.readFileSync('test/fixtures/keys/agent2-cert.pem')
};


require("react-devtools-core/standalone")
  .setContentDOMNode(document.getElementById("container"))
  .setStatusListener(status => {
    // This callback is optional...
  })
  .startServer(port, host, options);

Reference the react-devtools package for a complete integration example.

Development

Watch for changes made to the backend entry point and rebuild:

yarn start:backend

Watch for changes made to the standalone UI entry point and rebuild:

yarn start:standalone