mirror of https://github.com/zebrajr/react.git synced 2025-12-07 12:20:38 +01:00

History

Brian Vaughn 2efe63d99c DevTools: Add break-on-warn feature (#19048 ) This commit adds a new tab to the Settings modal: Debugging This new tab has the append component stacks feature and a new one: break on warn This new feature adds a debugger statement into the console override		2020-05-29 14:34:43 -07:00
..
src	DevTools: Add break-on-warn feature (#19048 )	2020-05-29 14:34:43 -07:00
backend.js	Standalone NPM packages and React Native support (#335 )	2019-07-13 10:05:04 -07:00
package.json	DevTools 4.6.0 -> 4.7.0	2020-05-18 14:16:04 -07:00
README.md	Updated README docs, example screenshots, etc	2019-08-27 15:20:34 -07:00
standalone.js	Standalone NPM packages and React Native support (#335 )	2019-07-13 10:05:04 -07:00
webpack.backend.js	DevTools: Improved "native" component stacks (#18656 )	2020-04-21 11:46:11 -07:00
webpack.standalone.js	DevTools: Improved "native" component stacks (#18656 )	2020-04-21 11:46:11 -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.
websocket: Websocket - Custom websocked to use. Overrides host and port settings if provided.
resolveRNStyle: (style: number) => ?Object - Used by the React Native style plug-in.
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);

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