Registry / react-devtools-core

react-devtools-core

library7.0.1jsnpmunverified

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.

npm install react-devtools-core

github ↗package ↗

INSTALL

IMPORT

SIG · REACT-DEVTOOLS-COR

react-devtools-core

javascriptv7.0.1

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

initialize, connectToDevTools

✓ import { initialize, connectToDevTools } from 'react-devtools-core';

✗ const { initialize, connectToDevTools } = require('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.

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.

Debug

Known issues

gotchaThe `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.

affects: >=1.0.0

gotchaThe `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.

affects: >=1.0.0

gotchaThis 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.

affects: >=1.0.0

Errors

Common errors & fixes

React DevTools cannot connect to the target. / No components found.

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

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';`.

Upgrade

Version history

7.0.1latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

6 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/facebook/react ↗

packagehttps://www.npmjs.com/package/react-devtools-core ↗