or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

backend-integration.mdcli-tool.mdeditor-integration.mdindex.mdstandalone-server.md
tile.json

tessl/npm-react-devtools

Standalone development tool for debugging React applications outside of browser environments

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/react-devtools@6.1.x

To install, run

npx @tessl/cli install tessl/npm-react-devtools@6.1.0

index.mddocs/

React DevTools

React DevTools is a standalone development tool that enables debugging of React applications outside of browser environments, particularly for React Native, mobile browsers, embedded webviews, and Safari. It provides a comprehensive debugging interface for inspecting React component hierarchies, props, state, and hooks, with features including component tree visualization, state modification capabilities, performance profiling, and integration with React Native Inspector.

Package Information

  • Package Name: react-devtools
  • Package Type: npm
  • Language: JavaScript (Flow typed)
  • Installation: npm install -g react-devtools or npx react-devtools

Core Imports

For programmatic usage via react-devtools-core:

import { connectToDevTools, initialize } from "react-devtools-core/backend";
import DevtoolsUI from "react-devtools-core/standalone";

For CommonJS:

const { connectToDevTools, initialize } = require("react-devtools-core/backend");
const DevtoolsUI = require("react-devtools-core/standalone");

Basic Usage

CLI Tool

# Launch standalone DevTools
react-devtools

# With project roots for editor integration
react-devtools /path/to/project

# React Native port forwarding
adb reverse tcp:8097 tcp:8097

Programmatic Backend Integration

import { connectToDevTools } from "react-devtools-core/backend";

// Basic connection
connectToDevTools();

// With custom options
connectToDevTools({
  host: "localhost",
  port: 8097,
  useHttps: false,
  retryConnectionDelay: 2000
});

Standalone Server Setup

import DevtoolsUI from "react-devtools-core/standalone";

// Start DevTools server
const server = DevtoolsUI.startServer(8097, "localhost");

// Setup UI rendering
DevtoolsUI
  .setContentDOMNode(document.getElementById("devtools"))
  .setStatusListener((message, status) => {
    console.log(`DevTools: ${message} (${status})`);
  });

Architecture

React DevTools consists of several key components:

  • CLI Tool: Electron-based desktop application providing the DevTools interface
  • Backend API: Connection and initialization functions for React applications
  • Standalone Server: WebSocket server and UI management for custom integrations
  • Editor Integration: Source code navigation and "click to open in editor" functionality
  • Bridge System: Communication layer between DevTools frontend and React applications
  • Component Inspection: Deep inspection of React component trees, props, and state

Capabilities

CLI Tool

Command-line interface for launching the standalone DevTools application with Electron-based desktop interface.

react-devtools [project-roots...]

CLI Tool

Backend Integration

Functions for connecting React applications to the DevTools backend, enabling component inspection and debugging.

function connectToDevTools(options?: ConnectOptions): void;
function initialize(
  settings?: DevToolsHookSettings | Promise<DevToolsHookSettings>,
  shouldStartProfilingNow?: boolean,
  profilingSettings?: ProfilingSettings
): void;

interface ConnectOptions {
  host?: string;
  port?: number;
  useHttps?: boolean;
  websocket?: WebSocket;
  retryConnectionDelay?: number;
  isAppActive?: () => boolean;
  nativeStyleEditorValidAttributes?: string[];
  resolveRNStyle?: (style: any) => any;
  onSettingsUpdated?: (settings: DevToolsHookSettings) => void;
  isReloadAndProfileSupported?: boolean;
  isProfiling?: boolean;
  onReloadAndProfile?: (recordChangeDescriptions: boolean) => void;
  onReloadAndProfileFlagsReset?: () => void;
}

Backend Integration

Standalone Server

Server and UI management functions for hosting DevTools in custom environments with full control over the interface.

const DevtoolsUI: {
  startServer(
    port?: number,
    host?: string, 
    httpsOptions?: ServerOptions,
    loggerOptions?: LoggerOptions
  ): { close(): void };
  connectToSocket(socket: WebSocket): { close(): void };
  setContentDOMNode(node: HTMLElement): typeof DevtoolsUI;
  setProjectRoots(roots: string[]): void;
  setStatusListener(listener: StatusListener): typeof DevtoolsUI;
  setDisconnectedCallback(callback: () => void): typeof DevtoolsUI;
  openProfiler(): void;
};

type StatusTypes = "server-connected" | "devtools-connected" | "error";
type StatusListener = (message: string, status: StatusTypes) => void;

interface ServerOptions {
  key?: string;
  cert?: string;
}

interface LoggerOptions {
  surface?: string;
}

Standalone Server

Editor Integration

Utilities for integrating with code editors to enable "click to open in editor" functionality from DevTools.

function doesFilePathExist(maybeRelativePath: string, absoluteProjectRoots: string[]): boolean;
function launchEditor(
  maybeRelativePath: string, 
  lineNumber: number, 
  absoluteProjectRoots: string[]
): void;

Editor Integration

Environment Variables

REACT_DEVTOOLS_PORT

Overrides the default port (8097) for the DevTools server.

REACT_DEVTOOLS_PORT=9090 react-devtools

Integration Patterns

React Native Integration

React DevTools automatically connects to React Native applications when the server is running:

  1. Start DevTools: react-devtools
  2. Forward ports: adb reverse tcp:8097 tcp:8097
  3. Launch React Native app - connection happens automatically

React DOM Integration

For web applications, inject the DevTools script:

<!-- Development only - remove before production -->
<script src="http://localhost:8097"></script>

Or programmatically:

// Development only
import 'react-devtools';

Custom Environment Integration

Use the standalone API for embedding DevTools in custom environments:

import DevtoolsUI from "react-devtools-core/standalone";

// Setup custom DevTools hosting
const server = DevtoolsUI.startServer(8097);
DevtoolsUI.setContentDOMNode(customContainer);