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

Files

Luna Ruan 60a30cf32e Console Logging for StrictMode Double Rendering (#22030 )

React currently suppress console logs in StrictMode during double rendering. However, this causes a lot of confusion. This PR moves the console suppression logic from React into React Devtools. Now by default, we no longer suppress console logs. Instead, we gray out the logs in console during double render. We also add a setting in React Devtools to allow developers to hide console logs during double render if they choose.

2021-08-25 15:35:38 -07:00

src

Console Logging for StrictMode Double Rendering (#22030 )

2021-08-25 15:35:38 -07:00

backend.js

Standalone NPM packages and React Native support (#335 )

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

package.json

React DevTools 4.16.0 -> 4.17.0

2021-08-24 11:12:42 -07: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

Console Logging for StrictMode Double Rendering (#22030 )

2021-08-25 15:35:38 -07:00

webpack.standalone.js

Console Logging for StrictMode Double Rendering (#22030 )

2021-08-25 15:35:38 -07: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