react-devtools-inline

React DevTools implementation for embedding within a browser-based IDE (e.g. CodeSandbox, StackBlitz).

This is a low-level package. If you're looking for the standalone DevTools app, use the react-devtools package instead.

Usage

This package exports two entry points: a frontend (to be run in the main window) and a backend (to be installed and run within an iframe¹).

The frontend and backend can be initialized in any order, but the backend must not be activated until the frontend initialization has completed. Because of this, the simplest sequence is:

1. Frontend (DevTools interface) initialized in the main window.
1. Backend initialized in an iframe.
1. Backend activated.

¹ Sandboxed iframes are supported.

API

$3

* initialize(contentWindow) -
Installs the global hook on the window. This hook is how React and DevTools communicate. This method must be called before React is loaded.²
* activate(contentWindow) -
Lets the backend know when the frontend is ready. It should not be called until after the frontend has been initialized, else the frontend might miss important tree-initialization events.

``js
import { activate, initialize } from 'react-devtools-inline/backend';

// This should be the iframe the React application is running in.
const iframe = document.getElementById(frameID);
const contentWindow = iframe.contentWindow;

// Call this before importing React (or any other packages that might import React).
initialize(contentWindow);

// Initialize the frontend...

// Call this only once the frontend has been initialized.
activate(contentWindow);
`

2 The backend must be initialized before React is loaded. (This means before any import or require statements or