vite-plugin-console

Inject eruda mobile DevTools into your Vite app with a single line. A floating button appears on screen — tap it to open a full DevTools panel directly on the device.

Environment-variable driven — no coupling to Vite's mode or command. Enable it per-environment via .env files and it just works, including Capacitor native builds.

Quick start

pnpm add -D vite-plugin-console

// vite.config.ts
import mobileConsole from 'vite-plugin-console'
export default { plugins: [mobileConsole()] }

# .env.development
VITE_CONSOLE=true

That's it. Run vite dev and the DevTools button appears on screen.

DevTools panels

| Panel | What you get | |---|---| | Console | log / warn / error, interactive REPL | | Network | XHR / fetch requests, headers, response body | | Elements | DOM tree, computed styles | | Resources | LocalStorage, SessionStorage, Cookie, scripts, images | | Info | Browser info, URL, viewport | | Snippets | Run custom JS snippets on the page |

Capacitor / real-device

For native builds, add VITE_CONSOLE=true to your staging env file — eruda is automatically bundled into the build output:

# .env.staging
VITE_CONSOLE=true

# Build + sync to native project
pnpm cap:sync

Open the app on your device — the floating button will appear. No extra steps needed.

Options

mobileConsole(options?: ConsoleOptions)

| Option | Type | Default | Description | |---|---|---|---| | debug | boolean | env.VITE_CONSOLE === 'true' | Explicit on/off override, ignores env var when set | | initOptions | Record<string, unknown> | — | Passed directly to eruda.init(opts) |

Limit visible panels:

mobileConsole({
  initOptions: { tool: ['console', 'network'] },
})

Custom appearance:

mobileConsole({
  initOptions: {
    defaults: { displaySize: 50, transparency: 0.9, theme: 'Dark' },
  },
})

See the eruda API docs for all available initOptions.