vite-plugin-debugger

一个提供移动端debug工具的vite插件

English | 中文

安装

node 版本: >=20.0.0

vite 版本: >=6.0.0

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

使用

For eruda

由于eruda的未打包大小有2.38MB,所以我们推荐默认使用CDN方式引入

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

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

使用active工具强制开启eruda，您可以像这样指定激活方法和参数名：

const config = {
  active: {
    override: true, // 设置为true以覆盖debug选项
    mode: 'url',
    param: 'debugwhatever',
  }
}

想了解更多有关eruda配置，请移至 eruda API.

如果您偏好于在本地使用eruda,您应该先安装reuda及其插件。

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

由于vConsole的未打包大小有344kb,所以我们推荐默认使用CDN方式引入

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

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

使用active配置动态开启vConsole，您可以像这样指定激活方法和参数名：

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

想了解更多有关vConsole配置，请移至 vConsole API.

如果您偏好于在本地使用vConsole,您应该先安装vConsole及其插件。

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