vite-plugin-devtools

0.4.0 verified Mon Apr 27 auth: no javascript

Vite plugin that integrates mobile debugging tools (vConsole and Eruda) into your Vite dev server. Version 0.4.0 released as a lightweight wrapper; no active maintenance or recent updates. Key differentiator: simple toggle-based inclusion of popular dev consoles without manual script injection, suitable for development builds only.

Common errors

error Error: Cannot find module 'vite-plugin-devtools' ↓

cause Package not installed or ESM import used incorrectly with CommonJS.

fix

Run npm install vite-plugin-devtools and ensure vite.config.js uses ESM (type: module or .mjs).

error devtools is not a function ↓

cause Default import mistakenly treated as named import or CommonJS require without default property.

fix

Use import devtools from "vite-plugin-devtools" (default import).

Warnings

gotcha Plugin only works in development mode; production builds strip it out automatically. ↓

fix No action needed for production; verify dev mode only.

deprecated eruda option is experimental and may be removed in future versions. ↓

fix Stick with vconsole option if stability is needed.

gotcha Using both vconsole and eruda simultaneously may cause conflicts. ↓

fix Enable only one devtool at a time or test for conflicts.

Install

npm install vite-plugin-devtools

yarn add vite-plugin-devtools

pnpm add vite-plugin-devtools

Imports

default

wrong

const devtools = require("vite-plugin-devtools");

correct

import devtools from "vite-plugin-devtools";

ESM-only; CommonJS require will fail in Vite config.

devtools

import devtools from "vite-plugin-devtools";

Default export, not named.

vConsole

wrong

import { vConsole } from "vite-plugin-devtools";

correct

import devtools from "vite-plugin-devtools";

vConsole is a config option, not an export.

Quickstart

Shows basic setup with vConsole enabled. Plugin automatically injects devtools script in development.

// vite.config.js
import { defineConfig } from "vite";
import devtools from "vite-plugin-devtools";

export default defineConfig({
  plugins: [
    devtools({
      vconsole: true,
    }),
  ],
});