# @gyral/devtools

> Gyral devtools: an in-page timeline of messages, state, commands and stores (development builds).

Source: https://gyral.dev/docs/api/devtools/

Gyral devtools: an in-page timeline of messages, state, commands and stores (development builds).

```sh
npm install @gyral/devtools
```

> **Writing code? Start from working code, not from this page.** [Devtools](https://gyral.dev/docs/devtools/). Adapt the closest example and check it, then look a name up here when you are about to call it.

Generated from the package's type declarations. Entry points: [`@gyral/devtools`](#gyraldevtools).

## `@gyral/devtools`

### Functions

| Name | Summary |
| --- | --- |
| [`mountDevtools`](#devtools-mountdevtools) | Mounts the panel and starts listening. |

#### `mountDevtools`

```ts
function mountDevtools(options?: DevtoolsOptions): MountedDevtools;
```

Mounts the panel and starts listening. Events arrive in batches (one per microtask), so a
burst of messages renders once. Returns a handle to remove everything again.

### Types and interfaces

You rarely write most of these yourself: TypeScript infers them from the functions above. Look one up when an example or a compiler error names it.

| Name | Summary |
| --- | --- |
| [`DevtoolsOptions`](#devtools-devtoolsoptions) |  |
| [`MountedDevtools`](#devtools-mounteddevtools) |  |

#### `DevtoolsOptions`

```ts
interface DevtoolsOptions {
    /** Start with the panel open. Default false. */
    readonly open?: boolean;
    /** Where to append the panel. Default document.body. */
    readonly parent?: Element;
    /** Toggle shortcut: a KeyboardEvent.code with Alt+Shift. Default 'KeyD' (Alt+Shift+D). */
    readonly shortcutCode?: string;
}
```


#### `MountedDevtools`

```ts
interface MountedDevtools {
    readonly panel: InstanceType<typeof DevtoolsPanel>;
    /** Removes the panel, the hook and the shortcut. */
    readonly unmount: () => void;
}
```