How to use react-devtools-inline - 10 common examples

connect(cb) {
      const DevTools = initializeFrontend(contentWindow);

      // Activate the backend only once the DevTools frontend Store has been initialized.
      // Otherwise the Store may miss important initial tree op codes.
      activateBackend(contentWindow);

      const root = createRoot(container);
      root.render(
        createElement(DevTools, {
          browserTheme: 'light',
          enabledInspectedElementContextMenu: true,
          enabledInspectedElementContextMenuCopy: true,
          showTabBar: true,
          warnIfLegacyBackendDetected: true,
          warnIfUnsupportedVersionDetected: true,
        }),
      );
    },

contentWindow.__REACT_DEVTOOLS_TARGET_WINDOW__ = window;

    initializeBackend(contentWindow);

    // Reset preferences between tutorial steps.
    localStorage.removeItem('React::DevTools::componentFilters');

    // This returns a React component that can be rendered into your app.
    // 
    const DevTools = initializeFrontend(contentWindow);

    // Schedule an update with React now that the DevTools UI is ready to be rendered.
    setDevTools(DevTools);

    // Let the backend know it's safe to activate.
    activateBackend(contentWindow);
  }, [iframeRef]);

const listener = ({ data }) => {
  switch (data.type) {
    case 'activate':
      window.removeEventListener('message', listener);

      // Wait for the frontend Store to be ready before initializing the backend.
      // This way the Store doesn't miss any tree operations.
      activate(window);
      break;
    default:
      break;
  }
};

useLayoutEffect(() => {
    const iframe = iframeRef.current;

    // This should be the iframe the backend hook has been installed in.
    const contentWindow = iframe.contentWindow;

    // Helps with positioning Overlay UI.
    contentWindow.__REACT_DEVTOOLS_TARGET_WINDOW__ = window;

    initializeBackend(contentWindow);

    // Reset preferences between tutorial steps.
    localStorage.removeItem('React::DevTools::componentFilters');

    // This returns a React component that can be rendered into your app.
    // 
    const DevTools = initializeFrontend(contentWindow);

    // Schedule an update with React now that the DevTools UI is ready to be rendered.
    setDevTools(DevTools);

    // Let the backend know it's safe to activate.
    activateBackend(contentWindow);
  }, [iframeRef]);

import requirePolyfills from '@codesandbox/common/lib/load-dynamic-polyfills';
import { getModulePath } from '@codesandbox/common/lib/sandbox/modules';
import { generateFileFromSandbox } from '@codesandbox/common/lib/templates/configuration/package-json';
import { getSandboxId } from '@codesandbox/common/lib/utils/url-generator';
import setupConsole from 'sandbox-hooks/console';
import setupHistoryListeners from 'sandbox-hooks/url-listeners';
import {
  listenForPreviewSecret,
  getPreviewSecret,
} from 'sandbox-hooks/preview-secret';
import { show404 } from 'sandbox-hooks/not-found-screen';

import compile, { getCurrentManager } from './compile';

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

const host = process.env.CODESANDBOX_HOST;
const debug = _debug('cs:sandbox');

export const SCRIPT_VERSION =
  document.currentScript && document.currentScript.src;

debug('Booting sandbox');

requirePolyfills().then(() => {
  registerServiceWorker('/sandbox-service-worker.js', {});

  function sendReady() {
    dispatch({ type: 'initialized' });
  }

import { initialize } from 'react-devtools-inline/backend';

// The DevTooks hook needs to be installed before React is even required!
// In a production app this should probably be done via a separate script tag,
// so we don't need to mix and match import and require statements...
initialize(window);

import { isStandalone, listen, dispatch } from 'codesandbox-api';
import { activate, initialize } from 'react-devtools-inline/backend';
import _debug from '@codesandbox/common/lib/utils/debug';

import registerServiceWorker from '@codesandbox/common/lib/registerServiceWorker';
import requirePolyfills from '@codesandbox/common/lib/load-dynamic-polyfills';
import { getModulePath } from '@codesandbox/common/lib/sandbox/modules';
import { generateFileFromSandbox } from '@codesandbox/common/lib/templates/configuration/package-json';
import { getSandboxId } from '@codesandbox/common/lib/utils/url-generator';
import setupConsole from 'sandbox-hooks/console';
import setupHistoryListeners from 'sandbox-hooks/url-listeners';

import compile, { getCurrentManager } from './compile';

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

const host = process.env.CODESANDBOX_HOST;
const debug = _debug('cs:sandbox');

export const SCRIPT_VERSION =
  document.currentScript && document.currentScript.src;

debug('Booting sandbox');

requirePolyfills().then(() => {
  registerServiceWorker('/sandbox-service-worker.js', {});

  function sendReady() {
    dispatch({ type: 'initialized' });
  }

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

if (window.location.search.includes('initDevToolsBackend')) {
  initialize(window);

  // Wait for the frontend to let us know that it's ready.
  const onMessage = ({ data }) => {
    switch (data.type) {
      case 'activate-backend':
        window.removeEventListener('message', onMessage);
        activate(window);
        break;
      default:
        break;
    }
  };

  window.addEventListener('message', onMessage);
}

import {createRoot} from 'react-dom';
import {
  activate as activateBackend,
  initialize as initializeBackend,
} from 'react-devtools-inline/backend';
import {initialize as initializeFrontend} from 'react-devtools-inline/frontend';
import {initDevTools} from 'react-devtools-shared/src/devtools';

const iframe = ((document.getElementById('target'): any): HTMLIFrameElement);

const {contentDocument, contentWindow} = iframe;

// Helps with positioning Overlay UI.
contentWindow.__REACT_DEVTOOLS_TARGET_WINDOW__ = window;

initializeBackend(contentWindow);

const container = ((document.getElementById('devtools'): any): HTMLElement);

let isTestAppMounted = true;

const mountButton = ((document.getElementById(
  'mountButton',
): any): HTMLButtonElement);
mountButton.addEventListener('click', function() {
  if (isTestAppMounted) {
    if (typeof window.unmountTestApp === 'function') {
      window.unmountTestApp();
      mountButton.innerText = 'Mount test app';
      isTestAppMounted = false;
    }
  } else {

connect(cb) {
      const DevTools = initializeFrontend(contentWindow);

      // Activate the backend only once the DevTools frontend Store has been initialized.
      // Otherwise the Store may miss important initial tree op codes.
      activateBackend(contentWindow);

      const root = createRoot(container);
      root.render(
        createElement(DevTools, {
          browserTheme: 'light',
          enabledInspectedElementContextMenu: true,
          enabledInspectedElementContextMenuCopy: true,
          showTabBar: true,
          warnIfLegacyBackendDetected: true,
          warnIfUnsupportedVersionDetected: true,
        }),
      );