SvelteKit

This guide covers adding debugger to a SvelteKit project. The setup takes two steps because SvelteKit uses its own HTML rendering pipeline that bypasses Vite's transformIndexHtml.

SvelteKit official docs

Prerequisites

• SvelteKit 2 or later (Vite 5+)

1. Add the Vite plugin

Import and add debuggerPlugin to your Vite config:

// vite.config.ts
import { sveltekit } from '@sveltejs/kit/vite'
import { defineConfig } from 'vite'
import { debuggerPlugin } from '@ephem-sh/debugger/vite'

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

This sets up the server-side instrumentation (console patching, IPC bridge, ingest middleware).

2. Add the server hook

Create or update src/hooks.server.ts:

export { handle } from '@ephem-sh/debugger/vite/sveltekit'

This injects the browser client script into your HTML using SvelteKit's transformPageChunk.

If you have existing hooks, compose them with sequence:

import { sequence } from '@sveltejs/kit/hooks'
import { handle as debuggerHandle } from '@ephem-sh/debugger/vite/sveltekit'
import { handle as yourHandle } from './your-hooks'

export const handle = sequence(debuggerHandle, yourHandle)

Verify

Start your dev server:

npm run dev

Open your app in a browser, then query with the CLI:

npx dbg status

pnpm dlx dbg status

bun x dbg status

yarn dlx dbg status

npx dbg browser console

pnpm dlx dbg browser console

bun x dbg browser console

yarn dlx dbg browser console

npx dbg server console

pnpm dlx dbg server console

bun x dbg server console

yarn dlx dbg server console

Why two steps?

SvelteKit renders HTML on the server, bypassing Vite's transformIndexHtml hook. The Vite plugin handles server-side setup (console patching, IPC bridge, ingest endpoint), but SvelteKit's own transformPageChunk hook is needed to inject the browser client script into the rendered HTML.

Production safety

The Vite plugin uses apply: 'serve' and is stripped from production builds. The handle hook checks for the </body> tag and the absence of the debugger script before injecting — if the Vite plugin isn't running (production), no script tags are added.

Full example

See the complete working example at examples/node/svelte.