2019-07-14 01:05:04 +08:00
# `react-devtools-core`
2019-07-20 01:09:49 +08:00
A standalone React DevTools implementation.
2019-07-14 01:05:04 +08:00
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:
```js
const { connectToDevTools } = require("react-devtools-core");
2019-08-28 06:20:34 +08:00
connectToDevTools(config);
2019-07-14 01:05:04 +08:00
```
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` .
2019-08-28 06:20:34 +08:00
The `config` object may contain:
2019-07-14 01:05:04 +08:00
* `host: string` (defaults to "localhost") - Websocket will connect to this host.
* `port: number` (defaults to `8097` ) - Websocket will connect to this port.
2020-12-04 22:59:17 +08:00
* `useHttps: boolean` (defaults to `false` ) - Websocket should use a secure protocol (wss).
2020-06-16 07:59:44 +08:00
* `websocket: Websocket` - Custom websocket to use. Overrides `host` and `port` settings if provided.
2019-08-28 06:20:34 +08:00
* `resolveRNStyle: (style: number) => ?Object` - Used by the React Native style plug-in.
2020-10-29 10:08:47 +08:00
* `retryConnectionDelay: number` (defaults to `2000` ) - Milliseconds delay to wait between retrying a failed Websocket connection.
2019-07-14 01:05:04 +08:00
* `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.
```js
require("react-devtools-core/standalone")
.setContentDOMNode(document.getElementById("container"))
.setStatusListener(status => {
// This callback is optional...
})
.startServer(port);
```
2020-07-06 22:09:41 +08:00
Renders DevTools interface into a DOM node over SSL using a custom host name (Default is localhost).
```js
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);
```
2019-07-14 01:05:04 +08:00
Reference the `react-devtools` package for a complete integration example.
2019-08-28 06:20:34 +08:00
## Development
Watch for changes made to the backend entry point and rebuild:
```sh
yarn start:backend
```
Watch for changes made to the standalone UI entry point and rebuild:
```sh
yarn start:standalone
2020-06-16 07:59:44 +08:00
```