DevTools() — react Function Reference

Architecture documentation for the DevTools() function in DevTools.js from the react codebase.

Function javascript BabelCompiler Validation calls 1

Entity Profile

BabelCompiler→ Validation→ DevTools() — react Function Reference

Dependency Diagram

graph TD
  364bb6ab_2e5f_4a8c_dd84_d1824ad9ee86["DevTools()"]
  e2c52a93_982e_407f_9fee_e89aa134ae9d["DevTools.js"]
  364bb6ab_2e5f_4a8c_dd84_d1824ad9ee86 -->|defined in| e2c52a93_982e_407f_9fee_e89aa134ae9d
  f8027c1d_4d83_6db4_6353_968f6a09e324["useIsSuspenseTabEnabled()"]
  364bb6ab_2e5f_4a8c_dd84_d1824ad9ee86 -->|calls| f8027c1d_4d83_6db4_6353_968f6a09e324
  style 364bb6ab_2e5f_4a8c_dd84_d1824ad9ee86 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/react-devtools-shared/src/devtools/views/DevTools.js lines 154–412

export default function DevTools({
  bridge,
  browserTheme = 'light',
  canViewElementSourceFunction,
  componentsPortalContainer,
  editorPortalContainer,
  inspectedElementPortalContainer,
  profilerPortalContainer,
  suspensePortalContainer,
  currentSelectedSource,
  defaultTab = 'components',
  enabledInspectedElementContextMenu = false,
  fetchFileWithCaching,
  hookNamesModuleLoaderFunction,
  overrideTab,
  showTabBar = false,
  store,
  warnIfLegacyBackendDetected = false,
  warnIfUnsupportedVersionDetected = false,
  viewAttributeSourceFunction,
  viewElementSourceFunction,
  readOnly,
  hideSettings,
  hideToggleErrorAction,
  hideToggleSuspenseAction,
  hideLogAction,
  hideViewSourceAction,
}: Props): React.Node {
  const [currentTab, setTab] = useLocalStorage<TabID>(
    LOCAL_STORAGE_DEFAULT_TAB_KEY,
    defaultTab,
  );
  const enableSuspenseTab = useIsSuspenseTabEnabled(store);
  const tabs = enableSuspenseTab ? tabsWithSuspense : defaultTabs;

  let tab = currentTab;

  if (overrideTab != null) {
    tab = overrideTab;
  }

  const selectTab = useCallback(
    (tabId: TabID) => {
      // We show the TabBar when DevTools is NOT rendered as a browser extension.
      // In this case, we want to capture when people select tabs with the TabBar.
      // When DevTools is rendered as an extension, we capture this event when
      // the browser devtools panel changes.
      if (showTabBar === true) {
        if (tabId === 'components') {
          logEvent({event_name: 'selected-components-tab'});
        } else if (tabId === 'suspense') {
          logEvent({event_name: 'selected-suspense-tab'});
        } else {
          logEvent({event_name: 'selected-profiler-tab'});
        }
      }
      setTab(tabId);
    },
    [setTab, showTabBar],
  );

  const options = useMemo(
    () => ({
      readOnly: readOnly || false,
      hideSettings: hideSettings || false,
      hideToggleErrorAction: hideToggleErrorAction || false,
      hideToggleSuspenseAction: hideToggleSuspenseAction || false,
      hideLogAction: hideLogAction || false,
      hideViewSourceAction: hideViewSourceAction || false,
    }),
    [
      readOnly,
      hideSettings,
      hideToggleErrorAction,
      hideToggleSuspenseAction,
      hideLogAction,
      hideViewSourceAction,
    ],
  );

  const viewElementSource = useMemo(