React DevTools Core

7.0.1 · active · verified Sun Apr 19

react-devtools-core is a foundational package offering low-level APIs to enable integration of the React DevTools UI with custom React renderers, primarily those operating outside of a browser environment, such as React Native. Unlike the `react-devtools` package, which provides the standalone UI, `react-devtools-core` is intended for renderer authors who need to expose their host environment to the DevTools frontend. The current stable version is 7.0.1. Its release cadence is closely coupled with React's core library, often receiving updates alongside React's own patch and minor versions, which historically occur frequently to address bug fixes and performance improvements. A key differentiator is its explicit focus on non-browser environments, providing the necessary backend bridge for DevTools functionality where standard browser extensions are not applicable. It ensures that developers building with custom React renderers can still leverage the powerful inspection, profiling, and debugging capabilities of the official React DevTools.

Common errors

```
React DevTools cannot connect to the target. / No components found.
```
cause The `connectToDevTools` function was not invoked prior to the React library or specific renderer (e.g., React Native) being imported, or it was called in a separate JavaScript context.

fix Relocate the `initialize` and `connectToDevTools` calls to the absolute beginning of your application's entry point, strictly before any React imports, and confirm they execute within the same runtime context as your React application.
```
ReferenceError: require is not defined
```
cause Attempting to use CommonJS `require` syntax for `react-devtools-core` in a project configured for ES modules (e.g., `"type": "module"` in `package.json` or modern browser environments).

fix Migrate your import statements to ES module syntax: `import { initialize, connectToDevTools } from 'react-devtools-core';`.

Warnings

gotcha The `connectToDevTools` function MUST be called BEFORE any React or React Native packages are imported in your application. Failing to do so will result in React DevTools being unable to connect or properly inspect components.
Fix: Ensure `connectToDevTools` is placed at the very top of your application's entry file, before any `import 'react'` or `import 'react-native'` statements.
gotcha The `connectToDevTools` API must be executed within the same JavaScript context where React is loaded. If your application uses multiple contexts (e.g., web workers, iframes, or separate threads), you may need a custom bridge to relay information.
Fix: Verify that the code calling `connectToDevTools` and your React application's runtime share the same global `window` or `global` object. For complex multi-context setups, consider custom communication channels.
gotcha This package (`react-devtools-core`) is primarily intended for authors of custom React renderers (like React Native). Most application developers should use the standalone `react-devtools` package or the browser extension directly, as this package provides low-level backend APIs not meant for general application use.
Fix: If you are developing a standard React web or React Native application, refer to the `react-devtools` package documentation for setting up the DevTools frontend.

Install

npm install react-devtools-core npm
yarn add react-devtools-core yarn
pnpm add react-devtools-core pnpm

Imports

initialize, connectToDevTools
wrong:
```
const { initialize, connectToDevTools } = require('react-devtools-core');
```
correct:
```
import { initialize, connectToDevTools } from 'react-devtools-core';
```
These are the primary named exports for the backend API, used by custom React renderers. While the README shows CJS `require`, modern projects configured for ES modules should prefer `import` statements.
InitializeSettings, ConnectOptions
```
import type { InitializeSettings, ConnectOptions } from 'react-devtools-core';
```
Type definitions for the settings and options objects passed to `initialize` and `connectToDevTools` are typically available as named exports directly from the main package.

Quickstart

This snippet demonstrates how to initialize and connect a custom React renderer's backend to the React DevTools UI, ensuring the connection is established before React itself is imported and only in development environments.

if (process.env.NODE_ENV !== 'production') {
  // It is crucial that connectToDevTools is called BEFORE React or React Native are imported.
  // This ensures the DevTools backend can properly instrument React's internals.
  const { initialize, connectToDevTools } = require("react-devtools-core");

  // Optional: Define custom settings for DevTools behavior.
  const devToolsSettings = {
    appendComponentStack: true,
    breakOnConsoleErrors: false,
    showInlineWarningsAndErrors: true,
    hideConsoleLogsInStrictMode: false
  };

  initialize(devToolsSettings);
  
  // Establish connection to the DevTools frontend.
  // Host and port can be configured if the frontend is not on localhost:8097.
  connectToDevTools({
    host: process.env.REACT_DEVTOOLS_HOST ?? 'localhost',
    port: parseInt(process.env.REACT_DEVTOOLS_PORT ?? '8097', 10),
    isAppActive: () => true // Replace with actual app active check if needed
  });

  console.log('React DevTools core backend initialized.');
}
// Proceed with importing React, React Native, or your custom renderer AFTER this setup.

view raw JSON →