Embed react-devtools within a website
npm install @iteria-app/react-devtools-inlinereact-devtools-inlineReact 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.
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 iframe1).
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.
1 Sandboxed iframes are supported.
* 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.2
* 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