Embed react-devtools within a website
npm install react-devtools-inlinereact-devtools-inlineThis package can be used to embed React DevTools into browser-based tools like CodeSandbox, StackBlitz, and Replay.
If you're looking for the standalone React DevTools UI, we suggest using react-devtools instead of using this package directly.
---
> Note that this package (and the DevTools UI) relies on several _experimental_ APIs that are only available in the experimental release channel. This means that you will need to install react@experimental and react-dom@experimental.
---
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.
Installs the global hook on the window/global object. This hook is how React and DevTools communicate.
> This method must be called before React is loaded. (This includes import/require statements and tags that include React.)
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);
`Frontend APIs
$3
Configures the DevTools interface to listen to the window (or global object) the backend was injected into. This method returns a React component that can be rendered directly.> Because the DevTools interface makes use of several new React concurrent features (like Suspense) it should be rendered using
ReactDOMClient.createRoot instead of ReactDOM.render.$3
`js
import { initialize } from 'react-devtools-inline/frontend';// This should be the iframe the backend hook has been installed in.
const iframe = document.getElementById(frameID);
const contentWindow = iframe.contentWindow;
// This returns a React component that can be rendered into your app.
// e.g. render( );
const DevTools = initialize(contentWindow);
`Advanced examples
$3
DevTools can display hook "names" for an inspected component, although determining the "names" requires loading the source (and source-maps), parsing the code, and inferring the names based on which variables hook values get assigned to. Because the code for this is non-trivial, it's lazy-loaded only if the feature is enabled.
To configure this package to support this functionality, you'll need to provide a prop that dynamically imports the extra functionality:
`js
// Follow code examples above to configure the backend and frontend.
// When rendering DevTools, the important part is to pass a 'hookNamesModuleLoaderFunction' prop.
const hookNamesModuleLoaderFunction = () => import('react-devtools-inline/hookNames');// Render:
hookNamesModuleLoaderFunction={hookNamesModuleLoaderFunction}
{...otherProps}
/>;
`$3
The simplest way to use this package is to install the hook from the parent
window. This is possible if the iframe is not sandboxed and there are no cross-origin restrictions.`js
import {
activate as activateBackend,
initialize as initializeBackend
} from 'react-devtools-inline/backend';
import { initialize as initializeFrontend } from 'react-devtools-inline/frontend';// The React app you want to inspect with DevTools is running within this iframe:
const iframe = document.getElementById('target');
const { contentWindow } = iframe;
// Installs the global hook into the iframe.
// This must be called before React is loaded into that frame.
initializeBackend(contentWindow);
// Initialize DevTools UI to listen to the hook we just installed.
// This returns a React component we can render anywhere in the parent window.
// This also must be called before React is loaded into the iframe
const DevTools = initializeFrontend(contentWindow);
// React application can be injected into