react-devtools-core vs react-devtools-inline vs react-devtools
React Development Tools Comparison
1 Year
react-devtools-corereact-devtools-inlinereact-devtools
What's React Development Tools?

React Development Tools are essential packages that assist developers in debugging and optimizing React applications. They provide a suite of tools that allow developers to inspect the React component hierarchy, monitor state and props, and identify performance bottlenecks. Each package serves a unique purpose, catering to different use cases and environments, making them invaluable for effective React development.

Package Weekly Downloads Trend
Github Stars Ranking
Stat Detail
Package
Downloads
Stars
Size
Issues
Publish
License
react-devtools-core3,456,609234,26218.5 MB9742 months agoMIT
react-devtools-inline180,539234,26228.7 MB9742 months agoMIT
react-devtools95,644234,26224.5 kB9742 months agoMIT
Feature Comparison: react-devtools-core vs react-devtools-inline vs react-devtools

Integration

  • react-devtools-core:

    react-devtools-core can be integrated into custom applications, allowing developers to build their own debugging interfaces. This package provides the core functionality needed to create tailored React debugging experiences, making it highly flexible for advanced users.

  • react-devtools-inline:

    react-devtools-inline offers a simple integration method for developers who want to include debugging tools directly within their React applications. This inline approach allows for quick access to debugging features without needing a separate tool.

  • react-devtools:

    react-devtools integrates seamlessly with browsers like Chrome and Firefox, providing a user-friendly interface for inspecting React components and their states. It allows for easy navigation through the component tree and real-time updates, making debugging straightforward and efficient.

Performance Monitoring

  • react-devtools-core:

    react-devtools-core includes performance monitoring capabilities that can be leveraged in custom applications. Developers can utilize its profiling features to gain insights into their application's performance and make informed optimizations.

  • react-devtools-inline:

    react-devtools-inline offers basic performance monitoring features, suitable for quick checks during development. While it may not be as comprehensive as the standalone version, it still provides valuable insights into component rendering.

  • react-devtools:

    react-devtools provides performance monitoring features that allow developers to profile their applications. It helps identify performance bottlenecks by showing render times and component updates, enabling developers to optimize their applications effectively.

User Interface

  • react-devtools-core:

    react-devtools-core does not provide a user interface on its own but serves as the foundation for building custom UIs. Developers can create their own interfaces tailored to specific needs, offering flexibility in how debugging information is presented.

  • react-devtools-inline:

    react-devtools-inline provides a minimalistic user interface that is easy to use and integrates directly into the application. It offers essential features without overwhelming the developer with too much information.

  • react-devtools:

    react-devtools features a comprehensive and intuitive user interface that allows developers to easily navigate through the component hierarchy, view props and state, and inspect component behavior in real-time. This UI is designed for ease of use, making debugging more accessible.

Installation and Setup

  • react-devtools-core:

    react-devtools-core requires a bit more setup since it is intended for custom integrations. Developers need to handle the installation and configuration within their applications, which may involve additional steps compared to the standalone version.

  • react-devtools-inline:

    react-devtools-inline is easy to set up as it can be included directly in the application code. This makes it a quick solution for developers looking to add debugging capabilities without extensive configuration.

  • react-devtools:

    Installing react-devtools is straightforward, as it is available as a browser extension. Developers can quickly set it up and start debugging their applications with minimal configuration required.

Use Cases

  • react-devtools-core:

    react-devtools-core is perfect for advanced developers who want to create custom debugging solutions or integrate React DevTools into other frameworks or applications. It is designed for flexibility and extensibility.

  • react-devtools-inline:

    react-devtools-inline is ideal for developers who need quick and lightweight debugging capabilities during development. It is suitable for smaller projects or for those who want to avoid the overhead of a full debugging application.

  • react-devtools:

    react-devtools is best suited for developers working on large-scale React applications who need a powerful tool for debugging and performance monitoring. It is ideal for those who prefer a dedicated application for inspecting their component trees.

How to Choose: react-devtools-core vs react-devtools-inline vs react-devtools
  • react-devtools-core:

    Choose react-devtools-core if you are building custom integrations or need to embed React DevTools functionality into your own application. This package is designed for developers looking to create tailored debugging experiences or integrate React DevTools into other environments.

  • react-devtools-inline:

    Choose react-devtools-inline if you want a lightweight, inline version of React DevTools that can be easily integrated into your application. This is suitable for quick debugging without the overhead of a full application, especially during development.

  • react-devtools:

    Choose react-devtools if you want a standalone application that provides a rich interface for inspecting React components in a browser. It is ideal for developers who prefer a dedicated tool for debugging and profiling their React applications.

README for react-devtools-core

react-devtools-core

This package provides low-level APIs to support renderers like React Native. If you're looking for the standalone React DevTools UI, we suggest using react-devtools instead of using this package directly.

This package provides two entrypoints: labeled "backend" and "standalone" (frontend). Both APIs are described below.

Backend API

Backend APIs are embedded in development builds of renderers like React Native in order to connect to the React DevTools UI.

Example

If you are building a non-browser-based React renderer, you can use the backend API like so:

if (process.env.NODE_ENV !== 'production') {
  const { initialize, connectToDevTools } = require("react-devtools-core");

  initialize(settings);
  // Must be called before packages like react or react-native are imported
  connectToDevTools({...config});
}

NOTE that this API (connectToDevTools) must be (1) run in the same context as React and (2) must be called before React packages are imported (e.g. react, react-dom, react-native).

initialize arguments

| Argument | Description | |------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | settings | Optional. If not specified, or received as null, then default settings are used. Can be plain object or a Promise that resolves with the plain settings object. If Promise rejects, the console will not be patched and some console features from React DevTools will not work. |

Settings

| Spec | Default value | |--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------| |

{
appendComponentStack: boolean,
breakOnConsoleErrors: boolean,
showInlineWarningsAndErrors: boolean,
hideConsoleLogsInStrictMode: boolean
}
|
{
appendComponentStack: true,
breakOnConsoleErrors: false,
showInlineWarningsAndErrors: true,
hideConsoleLogsInStrictMode: false
}
|

connectToDevTools options

| Prop | Default | Description | |------------------------|---------------|---------------------------------------------------------------------------------------------------------------------------| | host | "localhost" | Socket connection to frontend should use this host. | | isAppActive | | (Optional) function that returns true/false, telling DevTools when it's ready to connect to React. | | port | 8097 | Socket connection to frontend should use this port. | | resolveRNStyle | | (Optional) function that accepts a key (number) and returns a style (object); used by React Native. | | retryConnectionDelay | 200 | Delay (ms) to wait between retrying a failed Websocket connection | | useHttps | false | Socket connection to frontend should use secure protocol (wss). | | websocket | | Custom WebSocket connection to frontend; overrides host and port settings. | | onSettingsUpdated | | A callback that will be called when the user updates the settings in the UI. You can use it for persisting user settings. | |

connectWithCustomMessagingProtocol options

| Prop | Description | |---------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------| | onSubscribe | Function, which receives listener (function, with a single argument) as an argument. Called when backend subscribes to messages from the other end (frontend). | | onUnsubscribe | Function, which receives listener (function) as an argument. Called when backend unsubscribes to messages from the other end (frontend). | | onMessage | Function, which receives 2 arguments: event (string) and payload (any). Called when backend emits a message, which should be sent to the frontend. | | onSettingsUpdated | A callback that will be called when the user updates the settings in the UI. You can use it for persisting user settings. |

Unlike connectToDevTools, connectWithCustomMessagingProtocol returns a callback, which can be used for unsubscribing the backend from the global DevTools hook.

Frontend API

Frontend APIs can be used to render the DevTools UI into a DOM node. One example of this is react-devtools which wraps DevTools in an Electron app.

Example

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

// See the full list of API methods in documentation below.
const { setContentDOMNode, startServer } = DevtoolsUI;

// Render DevTools UI into a DOM element.
setContentDOMNode(document.getElementById("container"));

// Start socket server used to communicate between backend and frontend.
startServer(
  // Port defaults to 8097
  1234,

  // Host defaults to "localhost"
  "example.devserver.com",

  // Optional config for secure socket (WSS).
  {
    key: fs.readFileSync('test/fixtures/keys/agent2-key.pem'),
    cert: fs.readFileSync('test/fixtures/keys/agent2-cert.pem')
  }
);

Exported methods

The default export is an object defining the methods described below.

These methods support chaining for convenience. For example:

const DevtoolsUI = require("react-devtools-core/standalone");
DevtoolsUI.setContentDOMNode(element).startServer();

connectToSocket(socket: WebSocket)

This is an advanced config function that is typically not used.

Custom WebSocket connection to use for communication between DevTools frontend and backend. Calling this method automatically initializes the DevTools UI (similar to calling startServer()).

openProfiler()

Automatically select the "Profiler" tab in the DevTools UI.

setContentDOMNode(element: HTMLElement)

Set the DOM element DevTools UI should be rendered into on initialization.

setDisconnectedCallback(callback: Function)

Optional callback to be notified when DevTools WebSocket closes (or errors).

setProjectRoots(roots: Array<string>)

Optional set of root directories for source files. These roots can be used to open an inspected component's source code using an IDE.

setStatusListener(callback: Function)

Optional callback to be notified of socket server events (e.g. initialized, errored, connected).

This callback receives two parameters:

function onStatus(
  message: string,
  status: 'server-connected' | 'devtools-connected' | 'error'
): void {
  // ...
}

startServer(port?: number, host?: string, httpsOptions?: Object, loggerOptions?: Object)

Start a socket server (used to communicate between backend and frontend) and renders the DevTools UI.

This method accepts the following parameters: | Name | Default | Description | |---|---|---| | port | 8097 | Socket connection to backend should use this port. | | host | "localhost" | Socket connection to backend should use this host. | | httpsOptions | | Optional object defining key and cert strings. | | loggerOptions | | Optional object defining a surface string (to be included with DevTools logging events). |

Development

Watch for changes made to the backend entry point and rebuild:

yarn start:backend

Watch for changes made to the standalone UI entry point and rebuild:

yarn start:standalone

Run the standalone UI using yarn start in the react-devtools.