React Developer Tools

Displays the complete React component tree rendered on a page in a dedicated DevTools tab, with automatic synchronization between DOM element selection and React component selection. When a user inspects an element in the standard Elements tab, the extension automatically highlights and selects the corresponding React component in the Components tree, and vice versa. This bidirectional linking is achieved through the extension's hook into React's internal fiber architecture, allowing real-time traversal of the component tree without requiring source map access.

Displays current props and state values for any selected React component in a side panel, with the ability to modify props and state values directly in the DevTools UI and see the changes reflected immediately in the rendered component. The extension intercepts React's state update mechanisms and prop assignments, allowing developers to test different prop/state combinations without restarting the application or modifying source code. Changes are applied through React's internal state update queue, ensuring proper re-render triggering.

Visually highlights components that are re-rendering in real-time by adding a colored border or background flash to components as they update. This feature helps developers quickly identify which components are re-rendering and how frequently, making it easy to spot unnecessary re-renders at a glance. The highlighting is configurable and can be toggled on/off to reduce visual noise.

Records and analyzes React component render performance through a dedicated Profiler tab that captures render timing, identifies unnecessary re-renders, and displays performance metrics for each component. The profiler hooks into React's profiling API to measure render duration, commit time, and component lifecycle events. It can record performance data over a time window and display a timeline view showing which components rendered, how long they took, and why they re-rendered (prop changes, state changes, parent re-render, etc.).

Identifies the source file and line number where each React component is defined, and provides a clickable link to open the component's source code in the browser's editor or IDE. The extension uses source maps and React's component metadata to map rendered components back to their original source files. When a developer clicks on a component in the DevTools, they can jump directly to the component definition in their code editor, enabling rapid navigation between the running application and source code.

Provides search functionality to find components by name within the rendered component tree, allowing developers to quickly locate specific components without manually traversing the entire hierarchy. The search implementation uses string matching on component names and may support filtering by component type or other metadata. This capability enables rapid navigation in large, deeply-nested component trees where manual scrolling would be time-consuming.

Displays React Hooks (useState, useEffect, useContext, useReducer, etc.) used by functional components, showing their current values and state. The extension hooks into React's hook system to extract hook data from the fiber node's hook queue, allowing developers to inspect hook state without console.log or manual debugging. This is particularly useful for understanding complex hook dependencies and state management in functional components.

Displays React Context values and their provider hierarchy, allowing developers to see which contexts are available to a component and what values they provide. The extension traverses the component tree to identify Context.Provider components and extracts their current values, displaying them in a hierarchical view. This helps developers understand context propagation and debug context-related issues without manually tracing through the component tree.

Tracks component lifecycle events (mount, update, unmount) and logs them in a timeline view, allowing developers to see when components are created, updated, and destroyed. The extension hooks into React's lifecycle methods and hooks to capture these events and display them in chronological order. This helps developers understand component lifecycle behavior and identify unexpected mount/unmount cycles that may indicate bugs.

Displays React Suspense boundaries and Error Boundaries in the component tree, showing their current state (suspended, error, or normal) and any associated error messages or fallback UI. The extension identifies Suspense and Error Boundary components and displays them with visual indicators of their state, helping developers understand error handling and async component loading behavior.

Captures and exports the current component tree state as a snapshot, including component hierarchy, props, state, and hooks. This allows developers to save the application state at a specific point in time for later analysis or sharing with team members. The snapshot can be used to reproduce bugs or understand the component structure at a particular moment without needing to keep the application running.