Devtools · kitr packages

While you build, a small "k" button sits in the corner of your app. Click it, or press Ctrl/Cmd + Shift + K, and a panel opens showing what every kitr package is doing: the current route, the query cache, the signed-in user, saved values, errors, analytics events and logs. None of it ships to production.

Install

kitr add devtools

First time? Run npm i -g kitr once. Inside a project, the global kitr runs your project's own version.

It writes config/devtools.ts. The kitr() Vite plugin removes the package from production builds, so it costs your users nothing.

Panels

Panel	Shows	Actions
App	Mode, environment, status, providers and what each one does, container bindings and config.	Reload page
Router	The current route, its params and search, and recent navigations.	Re-run loaders, go to `/`
Query	Every cached query with its data and state.	Invalidate all, clear cache
Auth	The auth session and signed-in user.	Reload session, refresh token, sign out
Storage	Saved values and cookies from storage.	Remove one, clear all
Platform	What platform reports: type, OS, online state, safe areas.
Errors	Everything monitoring caught.	Clear errors, throw a test error
Analytics	Every event analytics sent, with its properties.	Enable, disable, clear events
Log	One searchable timeline of what every package logged, including logger output and every http request.	Clear log

A panel only appears when its package is installed.

Command palette

Ctrl/Cmd + Shift + P opens a palette with every panel's actions in one searchable list.

Log your own things

import { getDevtools } from 'kitr/devtools'

getDevtools(app)?.log('checkout', 'cart updated', { items: cart.items.length })

getDevtools returns null in production, so the call costs nothing there.

Add a panel

A provider can add its own panel with a devtools(app) method:

// providers/flags.ts
import { defineProvider } from 'kitr/app'

export const flagsProvider = defineProvider({
  name: 'flags',
  devtools: () => import('./flags-devtools').then((m) => m.panels()),
})

// providers/flags-devtools.tsx
import { definePanel } from 'kitr/devtools'
import { KeyValue } from 'kitr/devtools/ui'

export const panels = () => [
  definePanel({
    id: 'flags',
    label: 'Flags',
    badge: (app) => Object.keys(app.container.use('flags').all()).length,
    render: (app) => <KeyValue rows={Object.entries(app.container.use('flags').all())} />,
    actions: [{ id: 'reset-flags', label: 'Reset flags', run: (app) => app.container.use('flags').reset() }],
  }),
]

Import the panel file lazily as above, so it never ends up in your main bundle or in production. JsonView, KeyValue and LogList from kitr/devtools/ui match the look of the built-in panels, and each panel's actions show up in the command palette.

Config

Option	Default	Description
`enabled`	development	Set `false` to turn it off without removing it.
`position`	`bottom-left`	Corner for the button: `bottom-left`, `bottom-right`, `top-left` or `top-right`.
`shortcutKey`	`k`	The key pressed with Ctrl/Cmd + Shift.
`maxEntries`	`500`	Entries kept per channel.
`openByDefault`	`false`	Open on first load.