# Devtools

Source: /tuil/docs/guides/devtools
Locale: en

Integrate and operate the runtime inspector.



Install and mount the inspector inside the renderer tree:

<CodeBlockTabs defaultValue="npm">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="npm">
      npm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="pnpm">
      pnpm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="yarn">
      yarn
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="bun">
      bun
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="npm">
    ```bash
    npm install @mwillbanks/tuil-devtools
    ```
  </CodeBlockTab>

  <CodeBlockTab value="pnpm">
    ```bash
    pnpm add @mwillbanks/tuil-devtools
    ```
  </CodeBlockTab>

  <CodeBlockTab value="yarn">
    ```bash
    yarn add @mwillbanks/tuil-devtools
    ```
  </CodeBlockTab>

  <CodeBlockTab value="bun">
    ```bash
    bun add @mwillbanks/tuil-devtools
    ```
  </CodeBlockTab>
</CodeBlockTabs>

```tsx
import { TuilDevtools } from "@mwillbanks/tuil-devtools";

function App() {
  return (
    <>
      <Application />
      {process.env.NODE_ENV !== "production" ? <TuilDevtools /> : null}
    </>
  );
}
```

Devtools reads lifecycle, capabilities, theme, focus, commands, services,
plugins, event history, and extension health. It subscribes to public runtime
surfaces and does not mutate them.

Use the overlay to diagnose focus ownership, missing command registration,
plugin ordering, event payloads after redaction, and capability-specific output.
Do not expose secrets through event payloads or service diagnostics.