Qwik

This guide covers adding debugger to a Qwik City project. The setup takes two steps.

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

1. Add the Vite plugin

Update your Vite config:

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

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

2. Add script tags to root

In src/root.tsx, add the browser client inside <body>:

import { isDev } from '@builder.io/qwik'

// inside <body>, after <RouterOutlet />:
{isDev && (
  <>
    <script dangerouslySetInnerHTML={
      `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 isDev check ensures script tags only render during development. The Vite plugin uses apply: 'serve'.

Full example

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