# Magic Devtools

**See your app the way Magic sees it.**

The Magic adapter layer for the tapir and crumbs dev tools. It enriches their snapshots and records with Magic-aware context, and behind a `!kReleaseMode` guard it is absent from release builds.

## Dev tools that understand Magic.

tapir and crumbs know nothing about Magic. Magic Devtools adapts them, so an LLM agent or a CI driver reads the route, the auth user, controller state and Gate results instead of guessing.

### Magic-aware snapshots

`MagicTapirIntegration.install()` registers enrichers on tapir snapshots: route and middleware, forms and errors, controller state, Gate results, the auth user, Echo when broadcasting is bound, and recent HTTP, logs and exceptions.

[Learn more about Magic-aware snapshots](https://anilcancakir.com/magic/docs/devtools/getting-started/installation.md)

### Magic-aware records

`MagicCrumbsIntegration.install()` registers crumbs watchers for Magic events and a `MagicHttpFacadeAdapter` that records Magic HTTP requests.

[Learn more about Magic-aware records](https://anilcancakir.com/magic/docs/devtools/getting-started/installation.md)

### Masked auth header

The header named by `auth.token.header` (default `Authorization`) is hidden in crumbs records. Bodies go through crumbs' own redaction.

[Learn more about Masked auth header](https://anilcancakir.com/magic/docs/devtools/getting-started/installation.md)

### One umbrella, two phases

`MagicDevtools.installPre()` runs before `Magic.init()` and `installPost()` after it, so tapir and crumbs boot first and Magic attaches once the container exists.

[Learn more about One umbrella, two phases](https://anilcancakir.com/magic/docs/devtools/getting-started/installation.md)

### Performance sessions

`MagicPerfIntegration.install()` records performance sessions with insight rules (`PerfInsightRules`) and a navigator observer.

[Learn more about Performance sessions](https://anilcancakir.com/magic/docs/devtools/getting-started/installation.md)

### Dev-only preview catalog

`MagicPreview.register(...)` and `MagicPreview.registerRoutes()` add `/preview` and `/preview/:component`. One component at a time, light or dark from a header toggle.

[Learn more about Dev-only preview catalog](https://anilcancakir.com/magic/docs/devtools/getting-started/installation.md)

## Add it in seconds

```bash
flutter pub add magic_devtools
```

Or add to `pubspec.yaml`:

```yaml
dependencies:
  magic_devtools: ^1.0.0
```

Or give your AI agent this prompt:

```text
Read https://anilcancakir.com/magic/docs/devtools/llms.txt and install the Magic Devtools package in this project.
```