vite-plugin-debugger

vite-plugin-debugger

A vite plugin provide the debugger tools for mobile devices.

English | 中文

Install

node version: >=20.0.0

vite version: >=6.0.0

pnpm add vite-plugin-debugger -D
# or
yarn add vite-plugin-debugger -D
# or
npm i vite-plugin-debugger -D

Usage

For eruda

we use eruda with CDN by default since it's unpacked size is 2.38 MB.

import vDebugger from 'vite-plugin-debugger/eruda'

export default defineConfig(({ command, mode }) => ({
  plugins: [
    vDebugger({
      debug: mode !== 'production',
      eruda: {
        // cdn: 'jsdelivr', // 'jsdelivr' | 'unpkg' | 'cdnjs' | 'staticfile'
        // src: 'custom CDN URL',
        options: {
          tool: ['console', 'elements'],
          useShadowDom: true,
          autoScale: true,
          defaults: {
            displaySize: 50,
            transparency: 0.8,
            theme: 'Dark',
          },
        },
      },
    })
  ]
}))

Use active tools to enable eruda forcibly, you can specify activation mode and parameter name like:

const config = {
  active: {
    override: true, // true if you want to override debug option
    mode: 'url',
    param: 'debugwhatever',
  }
}

For more details about eruda options, please check out eruda API.

If you prefer use eruda locally, you should install eruda and it's plugins first.

pnpm add eruda -D
# or
yarn add eruda -D
# or
npm i eruda -D

import { fileURLToPath } from 'node:url'
import vDebugger from 'vite-plugin-debugger/eruda'

const resolve = (dir: string) => fileURLToPath(new URL(dir, import.meta.url))

export default defineConfig(({ command, mode }) => ({
  plugins: [
    vDebugger({
      debug: mode !== 'production',
      local: true,
      entry: resolve('src/main.ts'), // vue or src/main.tsx for react
      eruda: {
        options: {
          tool: ['console', 'elements'],
          useShadowDom: true,
          autoScale: true,
          defaults: {
            displaySize: 50,
            transparency: 0.8,
            theme: 'Dark',
          },
        },
      }
    })
  ]
}))

For vConsole

we use vConsole with CDN by default since it's unpacked size is 344 kB.

import vDebugger from 'vite-plugin-debugger/vconsole'

export default defineConfig(({ command, mode }) => ({
  plugins: [
    vDebugger({
      debug: mode !== 'production',
      vConsole: {
        options: {
          theme: 'dark',
        },
      },
    })
  ]
}))

Use active tools to enable vConsole dynamically, you can specify activation mode and parameter name like:

active: { mode: 'url', param: 'debugwhatever' },

For more details about vConsole options, please check out vConsole API.

If you prefer use vConsole locally, you should install vConsole first.

pnpm add vconsole -D
# or
yarn add vconsole -D
# or
npm i vconsole -D

import { fileURLToPath } from 'node:url'
import vDebugger from 'vite-plugin-debugger/vconsole'

const resolve = (dir: string) => fileURLToPath(new URL(dir, import.meta.url))

export default defineConfig(({ command, mode }) => ({
  plugins: [
    vDebugger({
      debug: mode !== 'production',
      local: true,
      entry: resolve('src/main.ts'), // vue or src/main.tsx for react
      vConsole: {
        options: {
          theme: 'dark',
        },
      },
    })
  ]
}))

License

MIT