devtools

A panel that shows what every package is doing, opened by a button, a shortcut or a gesture. On in development; one flag ships it.

Developer toolsClient
/play/devtools/invoices-panel
Tap the mark in the corner to open the panel, then create and pay invoices and look at the Network, Log and Invoices tabs.
/play/devtools/on-a-phone
The same panel in a 390px frame: a sheet you drag, tabs you swipe, a trigger you move.

What it is

@kitr/devtools is a window in your app. It shows the route, the network requests, the query cache, the session, stored values, errors, analytics calls and one log every kitr package writes to. Open it from a floating button, a keyboard shortcut or a three-finger long press, on a laptop or on a phone. Your own providers can add panels.

Runs in the browser, in development. Set enabled: true in config/devtools.ts to use it in production too; otherwise production builds leave it out.

Install

kitr add devtools

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

Adds @kitr/devtools, its provider and config/devtools.ts. Every change.

Quick start

Run kitr dev and open the app. Tap the round button in the corner, press Ctrl/Cmd + Shift + K, or hold three fingers on a touch screen, and the window opens. If that shortcut clashes with your browser, change it:

// config/devtools.ts
import { defineConfig } from '@kitr/devtools'

export default defineConfig({
  position: 'bottom-right',
  shortcut: ['Meta', 'Alt', 'D'],
  maxEntries: 500,
  openByDefault: true,
})

The window now opens on Ctrl/Cmd + Alt + D, the button starts bottom-right and the window starts open. Next in the guide: Open the panel, or On a phone.

Built on

It is a view onto kitr. Keep React Developer Tools and your browser's devtools next to it.

Problems it solves

Further reading