vite-plugin-debugger

A vite plugin provide the debugger tools for mobile devices.

English | 中文

Install

node version: >=14.0.0

vite version: >=2.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 { fileURLToPath } from 'url'
import vDebugger from 'vite-plugin-debugger'

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

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

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',
  }
}

⚠ cdnjs don't provide eruda related plugins so you can specify every plugin's CDN source like:

        plugins: [
          {
            name: 'fps',
            src: 'https://cdn.jsdelivr.net/npm/eruda-fps',
          },
       // ...
        ],

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

# And some optional plugins
pnpm[yarn|npm] add eruda-fps eruda-features eruda-timing eruda-memory eruda-code eruda-benchmark eruda-dom eruda-orientation eruda-touches eruda-geolocation -D

import { fileURLToPath } from 'url'
import vDebugger from 'vite-plugin-debugger'

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',
          },
        },
        plugins: [
          'fps',
          'features',
          'timing',
          'memory',
          'code',
          'benchmark',
          'dom',
          'orientation',
          'touches',
          // 'geolocation',
        ],
      }
    })
  ]
}))

For vConsole

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

import { fileURLToPath } from 'url'
import vDebugger from 'vite-plugin-debugger'

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

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 'url'
import vDebugger from 'vite-plugin-debugger'

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