{"id":11686,"library":"react-devtools-core","title":"React DevTools Core","description":"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.","status":"active","version":"7.0.1","language":"javascript","source_language":"en","source_url":"https://github.com/facebook/react","tags":["javascript"],"install":[{"cmd":"npm install react-devtools-core","lang":"bash","label":"npm"},{"cmd":"yarn add react-devtools-core","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-devtools-core","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"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.","wrong":"const { initialize, connectToDevTools } = require('react-devtools-core');","symbol":"initialize, connectToDevTools","correct":"import { initialize, connectToDevTools } from 'react-devtools-core';"},{"note":"Type definitions for the settings and options objects passed to `initialize` and `connectToDevTools` are typically available as named exports directly from the main package.","symbol":"InitializeSettings, ConnectOptions","correct":"import type { InitializeSettings, ConnectOptions } from 'react-devtools-core';"}],"quickstart":{"code":"if (process.env.NODE_ENV !== 'production') {\n  // It is crucial that connectToDevTools is called BEFORE React or React Native are imported.\n  // This ensures the DevTools backend can properly instrument React's internals.\n  const { initialize, connectToDevTools } = require(\"react-devtools-core\");\n\n  // Optional: Define custom settings for DevTools behavior.\n  const devToolsSettings = {\n    appendComponentStack: true,\n    breakOnConsoleErrors: false,\n    showInlineWarningsAndErrors: true,\n    hideConsoleLogsInStrictMode: false\n  };\n\n  initialize(devToolsSettings);\n  \n  // Establish connection to the DevTools frontend.\n  // Host and port can be configured if the frontend is not on localhost:8097.\n  connectToDevTools({\n    host: process.env.REACT_DEVTOOLS_HOST ?? 'localhost',\n    port: parseInt(process.env.REACT_DEVTOOLS_PORT ?? '8097', 10),\n    isAppActive: () => true // Replace with actual app active check if needed\n  });\n\n  console.log('React DevTools core backend initialized.');\n}\n// Proceed with importing React, React Native, or your custom renderer AFTER this setup.","lang":"javascript","description":"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."},"warnings":[{"fix":"Ensure `connectToDevTools` is placed at the very top of your application's entry file, before any `import 'react'` or `import 'react-native'` statements.","message":"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.","severity":"gotcha","affected_versions":">=1.0.0"},{"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.","message":"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.","severity":"gotcha","affected_versions":">=1.0.0"},{"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.","message":"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.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"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.","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.","error":"React DevTools cannot connect to the target. / No components found."},{"fix":"Migrate your import statements to ES module syntax: `import { initialize, connectToDevTools } from 'react-devtools-core';`.","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).","error":"ReferenceError: require is not defined"}],"ecosystem":"npm"}