--- title: "DevTools" description: "The Backend tab in Nuxt DevTools — the deployment and its env, live checks and doctor on demand, the signed-in account, billing, email, webhook deliveries, the agent endpoint and an activity log." canonical_url: "https://nuxt-backend.dev/docs/start/develop/devtools" --- # DevTools > The Backend tab in Nuxt DevTools — the deployment and its env, live checks and doctor on demand, the signed-in account, billing, email, webhook deliveries, the agent endpoint and an activity log. With Nuxt DevTools enabled, the module adds a **Backend** tab to the Server group. It is dev-only, on whenever DevTools is (never under a test runner), and off with `backend: { devtools: false }`. It is built for Nuxt DevTools 3, the version Nuxt 4 installs. The connection's details, live queries, the auth-state timeline and function logs live in `nuxt-convex-module`'s own tab, which the Backend tab links to. Two data paths feed it: - **Dev-server facts** come over the DevTools RPC: the deployment, the checks, which env names are set, the pages, the catalog. The dev server pushes fresh facts to an open panel when `.env`, `.env.local` or the codegen changes. Only env **names** cross, never values: secrets stay in the Node process. - **Live app state** comes from the inspected page: a dev-only client plugin runs the package's own composables (`useAuth`, `useBilling`, `useFeatures`, `useOrganization`, the credit and delivery queries) and mirrors their state into a plain-JSON bridge on `window.__NUXT_BACKEND_DEVTOOLS__`. What the page already holds (the session, the content config, the connection) is mirrored from page load. The queries on top (the subscription, granted features, every credit meter, the active workspace, webhook deliveries) start the first time the tab opens, so a page nobody inspects pays nothing for them. Sessions, passkeys, gifts and email lookups load only when a tab asks for them. If the panel says the bridge is missing, reload the inspected page. Colour means one thing everywhere in the tab: green is fine, amber needs attention, red is broken, grey is off or not applicable. ## Overview
Part Shows
Header The backend connection, the deployment's kind and id (dev, local, production, …), a link to its dashboard for cloud deployments, Connection & queries (the base module's tab), and the installed versions of nuxt-backend , nuxt-convex-module , convex and nuxt
Missing modules A warning when a scaffolded function module the composables bind to ( auth.ts , billing.ts , email.ts ) is not deployed
Health The same checks the dev server prints on start, problems first with a copyable fix . Run doctor adds nuxt-backend doctor 's deployment-side checks, run in the dev server against the dev deployment: codegen, deployed functions, the invitation route, webhook route probes, the billing catalog. Copy doctor JSON then copies the run as doctor --json prints it, for an issue or a coding agent
Env Every variable of the env contract , twice: set in this dev server ( .env , .env.local , its process env) and set on the deployment (read with convex env list , names only, cached for a minute). A variable that is set on the deployment counts as set, so AUTH_SECRET and SITE_URL provisioned by the dev server stop warning
Pages Every ready-made page: its path, whether it needs a session, and whether the module or your own page renders it
Wiring The module options that change what runs: installation mode, scaffolding, env auto-provisioning, the stylesheet, workspaces, the pages, the auth route
The panel reads only a dev deployment. For production, run `npx nuxt-backend doctor --prod`. ## Account The signed-in user (name, email, id), the active workspace with your role, its members and pending invitations, and this account's device sessions (the current browser marked) and passkeys. A session's token and a passkey's credential never reach the panel. Buttons open `auth.ts` and `functions.ts` in your editor. ## Billing The subscription's state (status, product, cancel at period end, paused, trial end, a plan change scheduled for the next period), the granted feature keys `useFeatures().has()` matches, every credit meter (balance, credited, consumed), and gifts waiting for this account (read only, never claimed from the panel). The **Catalog as code** card lists what `billing.catalog.ts` declares and whether `billing sync` has written ids for sandbox and production, and warns when `appConfig.backend.billing` lists a plan or pack the catalog does not declare. ## Email What the transport has (`EMAIL_API_KEY`, `EMAIL_FROM`, `EMAIL_TEST_MODE`, `EMAIL_WEBHOOK_SECRET`), with what each one's absence means; recent delivery events; a lookup of one email's delivery status by the id `send` returned; and the packaged templates you can override in `auth.ts`. ## Webhooks The last event received per service with its outcome, both webhook secrets, and the delivery log: the last 50 deliveries the deployment verified or refused, filterable by service and to problems only. Refused requests of one kind share a row, with a ×count. The log is for admins: signed in as anyone else, the tab says so and gives the command that makes an account an admin. Outcomes: `ok` is green, `duplicate` (already handled) is grey, an unknown event type is amber, and a refused delivery (`invalid_signature`, `missing_secret`, …) is red. To send one again, replay it from the provider's dashboard. ## Agents The [MCP endpoint](https://nuxt-backend.dev/docs/agents/mcp): its URL and token-exchange path, the command that connects a client (`claude mcp add --transport http …`), every built-in tool with the scope it needs, the scopes a client can be granted, and the two discovery URLs. **MCP Inspector** switches to the inspector tab the MCP toolkit adds, to call the tools by hand. ## Activity What changed while the page was open, newest first: sign-ins, sign-outs and account switches; workspace and role changes; a subscription's status, plan, scheduled cancellation and pause; features granted and removed; each credit meter's balance; every new webhook delivery, a refused one in red; the delivery status of the email looked up on the Email tab; the connection dropping and coming back. Changes are compared between settled values, so a sign-in still counts though the session reloads on the way, and a section's first settled value is the baseline: a session that already existed when the page loaded is not a sign-in, and connecting at page load is not news. The last 200 entries are kept. When an amber or red entry arrives while another tab is open, the Activity tab shows how many. The same entries go to a **Backend** layer on the Vue DevTools timeline, beside route changes and component events, so a backend change lines up with what the page did. ## Open in editor The panel's file buttons resolve a backend source file (`billing.ts`, `auth.ts`, …) to its path under the functions directory and open it through the dev server's editor launcher. Only plain relative names inside the functions directory resolve — path segments like `..` are rejected. ## Options ```ts [nuxt.config.ts] export default defineNuxtConfig({ modules: ['nuxt-backend'], devtools: { enabled: true }, // Nuxt DevTools itself backend: { devtools: false, // drop just the Backend tab }, }) ``` ## Developing the panel Working on the panel itself, in this repository: see [The DevTools panel](https://github.com/qruto/nuxt-backend/blob/main/CONTRIBUTING.md#the-devtools-panel) in CONTRIBUTING.md. ## Sitemap See the full [sitemap](https://nuxt-backend.dev/sitemap.md) for all pages.