@huaiyou/devtools

@huaiyou/devtools

Vue 3 轻量级浮动调试面板，开发环境下一行代码接入，提供控制台、网络请求、存储管理、性能监控、环境信息等调试能力。

特性

• 零依赖 — 不依赖 axios 等第三方库，直接拦截原生 fetch / XMLHttpRequest
• 一行接入 — setupDevTools(app) 即可使用
• 可配置 — 主题、位置、功能开关、快捷键均可自定义
• 可销毁 — 返回 destroy 函数，调用后完全恢复原始环境
• 独立运行 — 以独立 Vue App 挂载，不污染宿主应用

安装

pnpm add @huaiyou/devtools -D

快速开始

// main.ts
import { setupDevTools } from '@huaiyou/devtools'
import '@huaiyou/devtools/dist/style.css'

const app = createApp(App)

if (import.meta.env.DEV) {
  setupDevTools(app)
}

app.mount('#app')

配置项

setupDevTools(app, {
  // 主题：'dark' | 'light'，默认 'dark'
  theme: 'dark',

  // 面板初始位置：'bottom-right' | 'bottom-left' | 'top-right' | 'top-left'
  position: 'bottom-right',

  // 面板默认尺寸
  defaultSize: { width: 440, height: 500 },

  // 切换面板快捷键，默认 'ctrl+shift+d'
  shortcut: 'ctrl+shift+d',

  // 传入 Vue Router 实例，启用路由信息展示和快速跳转
  router: router,

  // 功能模块开关，默认全部启用
  features: {
    console: true,      // 控制台日志
    network: true,      // 网络请求
    storage: true,      // 存储管理
    performance: true,  // 性能指标
    quickActions: true,  // 快捷操作
    envInfo: true,      // 环境信息
  },

  // 最大日志/请求保留数
  maxConsoleLogs: 500,
  maxNetworkRequests: 200,
})

功能模块

控制台

• 拦截 console.log / warn / error / info
• 捕获 Vue 错误、window.onerror、unhandledrejection
• 按类型筛选、关键词搜索
• 点击日志复制内容
• Error 自动弹出通知提醒
• 一键导出日志为 JSON

网络

• 自动拦截 fetch 和 XMLHttpRequest 请求
• 显示方法、URL、状态码、耗时
• 按方法（GET/POST/PUT/DELETE）筛选，URL 搜索
• 展开查看请求头、请求体、响应体
• pending 请求动画指示

存储

• 查看 / 删除 localStorage、sessionStorage、Cookie
• 点击值复制
• 一键清空单类或全部存储

性能

• 页面加载时间、DOM Content Loaded
• 内存使用（Chrome）
• 日志数、请求数统计

快捷操作

• 当前路由信息（需传入 router）
• 快速跳转路径
• 刷新 / 强制刷新 / 复制 URL
• 清除全部存储并刷新

环境信息

• User Agent、平台、语言、在线状态
• 屏幕分辨率、视口大小、DPR
• Vue 版本、Vite 环境变量（MODE / DEV / PROD）

销毁

const destroy = setupDevTools(app)

// 需要时调用销毁，恢复所有拦截
destroy()

快捷键

默认 Ctrl + Shift + D 打开/关闭面板，可通过 shortcut 配置自定义：

setupDevTools(app, { shortcut: 'ctrl+alt+t' })

支持的修饰键：ctrl / shift / alt / meta（Mac 的 Command）

产物

文件	大小	gzip
devtools.js (ESM)	45 KB	12 KB
devtools.umd.cjs	38 KB	11 KB
style.css	13 KB	2.7 KB

类型导出

import type {
  DevToolsOptions,
  DevToolsState,
  DevToolsContext,
  ResolvedOptions,
  ConsoleEntry,
  NetworkEntry,
  PerfMetrics,
  PanelPosition,
  ThemeMode,
} from '@huaiyou/devtools'

License

MIT