react-devtools-core

What is react-devtools-core?

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.

What are react-devtools-core's main functionalities?

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();

Other packages similar to react-devtools-core

redux-devtools-extension

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.

mobx-react-devtools

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

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.

README

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.

Exports

require('react-devtools-core').connectToDevTools(options)

This is similar to require('react-devtools') in another package but providing more control.
Unlike require('react-devtools'), it doesn't connect immediately, but exports a function.

Run connectToDevTools() in the same context as React to set up a connection to DevTools.
Make sure this runs before any react, react-dom, or react-native imports.

The options object may contain:

• host (string), defaults to 'localhost'.
• port (number), defaults to 8097.
• resolveRNStyle (function), used by RN and null by default.

None of the options are required.

require('react-devtools-core/standalone')

Lets you render DevTools into a DOM node and have it listen to connections.

For example:

require('react-devtools-core/standalone')
  .setContentDOMNode(document.getElementById('container'))
  .startServer(port);

You can check the Electron shell in react-devtools package for a complete integration example.