nanostores-devtools

• Named stores. Each store gets the name of its variable, object key, array index, or Map key. You don’t call anything per store.
• One row per change. The timeline shows writes like $counter/set and $user/setKey:name, with a diff and a stack trace that points at the line that wrote the value.
• Read-only. The browser side never calls store.get(), never reads your getters, and never mounts a store.
• Vite, webpack, and Rspack. The plugin only runs in development builds. A production build gets three empty functions.
• Free when closed. While there isn’t a DevTools panel open, it costs nothing for the page.

// vite.config.ts
import { defineConfig } from "vite"
import { nanostoresDevtools } from "nanostores-devtools/vite"

export default defineConfig({
  plugins: [nanostoresDevtools()],
})

// src/main.ts
import { connectDevtools } from "nanostores-devtools"

connectDevtools({ name: "my-app" })

The API, a description of how store discovery works, and troubleshooting notes are at nanostores-devtools.psdcoder.dev.