open-index/open-npm huggingface dataset:
npm package: @huaiyou/devtools
Description: Vue 3 轻量级浮动调试面板 - 控制台/网络/存储/性能/环境信息
Latest version: 1.2.0

# @huaiyou/devtools

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

## 特性

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

## 安装

```bash
pnpm add @huaiyou/devtools -D
```

## 快速开始

```ts
// 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')
```

## 配置项

```ts
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）

## 销毁

```ts
const destroy = setupDevTools(app)

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

## 快捷键

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

```ts
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 |

## 类型导出

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

## License

MIT