> ## Documentation Index
> Fetch the complete documentation index at: https://docs.sorokit.xyz/llms.txt
> Use this file to discover all available pages before exploring further.

# Integrated DevTools

> Debugging is a feature, not an afterthought. Inspect your transactions right where you build them.

One of the most frustrating parts of Stellar development is jumping between your app and the Stellar Laboratory just to see what happened inside a transaction.

Sorokit eliminates this friction by embedding a dedicated inspection panel directly into your application.

<Frame>
  <video src="https://mintcdn.com/odii/s5tXMi8OLUh_JWXR/images/devtools-demo.mp4?fit=max&auto=format&n=s5tXMi8OLUh_JWXR&q=85&s=7926169f85baa6b0bb4752f501f4e674" autoPlay loop muted playsInline className="w-full" data-path="images/devtools-demo.mp4" />
</Frame>

### The One-Prop Setup

You don't need to import separate components or manage sidebars. DevTools are built into the `SorokitProvider`. Simply toggle the `devtools` prop, and the inspector will appear in your development environment.

```tsx theme={null}
import { SorokitProvider } from "@sorokit/provider";

export function App() {
  return (
    <SorokitProvider
      network="TESTNET"
      devtools={true} // [!code highlight]
    >
      <YourApp />
    </SorokitProvider>
  );
}
```

### Smart Defaults

* **Development Only:** The DevTools panel automatically detects your environment. It renders when `process.env.NODE_ENV` is `development` and disappears entirely in your production build, adding zero weight to your final bundle.
* **Theme-Matched:** The panel inherits your app's own color tokens (`--background`, `--foreground`, and the rest), so it renders in whatever light or dark theme your app is already in, with no extra setup.

### Advanced Configuration

If you want the panel to be open by default when you refresh the page, you can pass a configuration object instead of a boolean.

```tsx theme={null}
<SorokitProvider
  network="TESTNET"
  devtools={{ initialOpen: true }} // [!code highlight]
>
  {/* ... */}
</SorokitProvider>
```

### Key Features

1. **The Sends Log:** Every time `useContractSend` is triggered, a new entry appears. You can track the exact moment a transaction moves from `QUEUED` to `SIMULATING`, `NEEDS_SIGNATURE`, `SUBMITTING`, and finally `SUCCESS` (or `ERROR`), with the decoded args and result, the built transaction's operation type, source account, and simulated minimum resource fee, a one-click copy of the transaction XDR, and — once the network accepts it — a link straight to the transaction on Stellar Expert.
2. **Cache Inspector:** A live view of every `@tanstack/react-query` entry Sorokit's hooks have created, with a status breakdown (fresh, fetching, paused, stale, inactive) and each query's key and observer count, so you can see exactly what's cached without leaving your app.