Waku

This guide covers adding debugger to a Waku project. The setup takes one config change plus a layout update.

Feature	Support
Server console	Yes
Server errors	Yes
HTTP requests	Yes
Browser script injection	Manual

1. Add the Vite plugin

Update your Waku config:

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

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

2. Add script tags to layout

In your root layout (src/pages/_layout.tsx), add the browser client script tags:

{process.env.NODE_ENV === 'development' && (
  <>
    <script dangerouslySetInnerHTML={{
      __html: 'window.__DEBUGGER_INGEST_URL__="/_/d";'
    }} />
    <script src="/_/d.js" defer />
  </>
)}

Verify

npm run dev

npmpnpmbunyarn

npx dbg status

pnpm dlx dbg status

bun x dbg status

yarn dlx dbg status

npmpnpmbunyarn

npx dbg browser console

pnpm dlx dbg browser console

bun x dbg browser console

yarn dlx dbg browser console

Production safety

The NODE_ENV check prevents script injection in production. The Vite plugin uses apply: 'serve'.

Full example

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