Product
Introducing License Enforcement in Socket
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
react-devtools-core
Advanced tools
The react-devtools-core package provides the core functionality of React Developer Tools, which are used to inspect and debug React component hierarchies in the Chrome Developer Tools. It can be integrated into other environments, such as custom browsers, editors, or embedded inside apps.
Standalone React DevTools
This code snippet demonstrates how to connect to the React DevTools from a standalone environment. It is useful when you want to debug React components within an environment that is not a web browser.
const { connectToDevTools } = require('react-devtools-core');
connectToDevTools({ host: 'localhost', port: 8097 });
Custom Integration
This code snippet shows how to start a React DevTools server. This can be used to integrate React DevTools into an environment where you have control over the server, such as an Electron app or a custom browser.
const { Server } = require('react-devtools-core');
const server = new Server({ port: 8097 });
server.on('ready', () => console.log('DevTools server started on port 8097.'));
server.start();
This package provides tools for debugging application's state changes. While react-devtools-core is focused on React component hierarchies, redux-devtools-extension is focused on Redux state management.
Similar to react-devtools-core, this package is used for debugging React applications. However, it is specifically tailored for applications using MobX for state management, as opposed to React's context or Redux.
Vue Devtools is for Vue.js applications what react-devtools-core is for React applications. It allows developers to inspect and debug Vue component hierarchies.
react-devtools-core
This package provides low-level APIs to support renderers like React Native. If you're looking for the standalone React DevTools UI, we suggest using react-devtools
instead of using this package directly.
This package provides two entrypoints: labeled "backend" and "standalone" (frontend). Both APIs are described below.
Backend APIs are embedded in development builds of renderers like React Native in order to connect to the React DevTools UI.
If you are building a non-browser-based React renderer, you can use the backend API like so:
if (process.env.NODE_ENV !== 'production') {
const { connectToDevTools } = require("react-devtools-core");
// Must be called before packages like react or react-native are imported
connectToDevTools({
...config
});
}
NOTE that this API (
connectToDevTools
) must be (1) run in the same context as React and (2) must be called before React packages are imported (e.g.react
,react-dom
,react-native
).
connectToDevTools
optionsProp | Default | Description |
---|---|---|
host | "localhost" | Socket connection to frontend should use this host. |
isAppActive | (Optional) function that returns true/false, telling DevTools when it's ready to connect to React. | |
port | 8097 | Socket connection to frontend should use this port. |
resolveRNStyle | (Optional) function that accepts a key (number) and returns a style (object); used by React Native. | |
retryConnectionDelay | 200 | Delay (ms) to wait between retrying a failed Websocket connection |
useHttps | false | Socket connection to frontend should use secure protocol (wss). |
websocket | Custom WebSocket connection to frontend; overrides host and port settings. |
connectWithCustomMessagingProtocol
optionsProp | Description |
---|---|
onSubscribe | Function, which receives listener (function, with a single argument) as an argument. Called when backend subscribes to messages from the other end (frontend). |
onUnsubscribe | Function, which receives listener (function) as an argument. Called when backend unsubscribes to messages from the other end (frontend). |
onMessage | Function, which receives 2 arguments: event (string) and payload (any). Called when backend emits a message, which should be sent to the frontend. |
Unlike connectToDevTools
, connectWithCustomMessagingProtocol
returns a callback, which can be used for unsubscribing the backend from the global DevTools hook.
Frontend APIs can be used to render the DevTools UI into a DOM node. One example of this is react-devtools
which wraps DevTools in an Electron app.
import DevtoolsUI from "react-devtools-core/standalone";
// See the full list of API methods in documentation below.
const { setContentDOMNode, startServer } = DevtoolsUI;
// Render DevTools UI into a DOM element.
setContentDOMNode(document.getElementById("container"));
// Start socket server used to communicate between backend and frontend.
startServer(
// Port defaults to 8097
1234,
// Host defaults to "localhost"
"example.devserver.com",
// Optional config for secure socket (WSS).
{
key: fs.readFileSync('test/fixtures/keys/agent2-key.pem'),
cert: fs.readFileSync('test/fixtures/keys/agent2-cert.pem')
}
);
The default
export is an object defining the methods described below.
These methods support chaining for convenience. For example:
const DevtoolsUI = require("react-devtools-core/standalone");
DevtoolsUI.setContentDOMNode(element).startServer();
connectToSocket(socket: WebSocket)
This is an advanced config function that is typically not used.
Custom WebSocket
connection to use for communication between DevTools frontend and backend. Calling this method automatically initializes the DevTools UI (similar to calling startServer()
).
openProfiler()
Automatically select the "Profiler" tab in the DevTools UI.
setContentDOMNode(element: HTMLElement)
Set the DOM element DevTools UI should be rendered into on initialization.
setDisconnectedCallback(callback: Function)
Optional callback to be notified when DevTools WebSocket
closes (or errors).
setProjectRoots(roots: Array<string>)
Optional set of root directories for source files. These roots can be used to open an inspected component's source code using an IDE.
setStatusListener(callback: Function)
Optional callback to be notified of socket server events (e.g. initialized, errored, connected).
This callback receives two parameters:
function onStatus(
message: string,
status: 'server-connected' | 'devtools-connected' | 'error'
): void {
// ...
}
startServer(port?: number, host?: string, httpsOptions?: Object, loggerOptions?: Object)
Start a socket server (used to communicate between backend and frontend) and renders the DevTools UI.
This method accepts the following parameters:
Name | Default | Description |
---|---|---|
port | 8097 | Socket connection to backend should use this port. |
host | "localhost" | Socket connection to backend should use this host. |
httpsOptions | Optional object defining key and cert strings. | |
loggerOptions | Optional object defining a surface string (to be included with DevTools logging events). |
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
Run the standalone UI using yarn start
in the react-devtools
.
15.3.1 (August 19, 2016)
React.Children.only
. (@sophiebits in #7514)<input>
validation warning from browsers when changing type
. (@nhunzaker in #7333)stopPropagation()
in Synthetic Events. (@nhunzaker in #7343)<input>
elements in mobile browsers. (@keyanzhang in #7397)<input type="range">
values not updating when changing min
or max
. (@troydemonbreun in #7486)trackedTouchCount
invariant into a console.error for better reliability. (@yungsters in #7400)FAQs
Use react-devtools outside of the browser
The npm package react-devtools-core receives a total of 2,285,522 weekly downloads. As such, react-devtools-core popularity was classified as popular.
We found that react-devtools-core demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 11 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
Product
We're launching a new set of license analysis and compliance features for analyzing, managing, and complying with licenses across a range of supported languages and ecosystems.
Product
We're excited to introduce Socket Optimize, a powerful CLI command to secure open source dependencies with tested, optimized package overrides.