vite-plugin-ai-inspector

vite-plugin-ai-inspector 🔍

在浏览器中审查 DOM，一键瞬间复制包含精准源码行列号、组件链路、Props 数据、CSS 选择器的结构化元信息，直接喂给 AI 编程助手（Cursor、Claude、ChatGPT、DeepSeek）。

✨ 核心特性

• ⚡ 0ms 极速响应：点击页面元素瞬间完成复制，绝无传统截图工具的等待与迟滞。
• 🎯 精准源码行列号：输出 Component File: src/views/home.vue:42:1，AI 1 秒直达具体行精准修改。
• 📦 组件真实 Props 提取：自动读取组件实例的 props（如歌曲名、用户 ID、状态），让 AI 彻底搞懂你的数据结构，不再瞎猜字段。
• ⌨️ 键盘上下键层级漫游：按 ↑ 键直接选中父级容器，按 ↓ 键选中子元素，彻底告别点不到外层包裹卡片的尴尬。
• 🧹 Vue 噪声深度净化：自动剥离 data-v-xxxx 哈希与 <!--v-if--> 内部注释，大幅节省 AI Token 并保持纯净。
• 🧩 UI 库组件智能还原：内置将编译后的底层标签还原为 <LucideIcon />、<el-button>、<van-button>，并支持数组自由扩展。
• 🛡️ Shadow DOM 隔离：审查器 UI 全部运行在独立的 ShadowRoot 容器中，彻底免疫业务项目 CSS 干扰。
• 🚀 双模式切换：
  • 普通单击：复制结构化 Prompt 供直接粘贴给 AI；
  • Shift + 单击：自动通过 Vite 开发服务器在本地 IDE（VS Code）中打开文件并高亮目标行。
• 🧹 生产环境 0 污染：仅在 vite dev 开发期注入，打包构建时自动剥离。

📦 安装

# pnpm (推荐)
pnpm add -D vite-plugin-ai-inspector

# npm
npm install -D vite-plugin-ai-inspector

🚀 快速上手

在 vite.config.ts 或 vite.config.js 中引入插件：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import aiInspector from 'vite-plugin-ai-inspector'

export default defineConfig({
  plugins: [
    vue(),
    aiInspector() // 👈 配置这一行即可！
  ]
})

打开浏览器页面，按下 Alt + W（或点击右下角 🔍 悬浮球），鼠标移动至任意元素，按 ↑/↓ 选择层级，点击即可复制！

📋 复制给 AI 的标准格式预览

### Metadata
\`\`\`yaml
Component File: src/views/home/modules/my-section.vue:42:1
Component Chain: App > RouterView > Index > MySection
CSS Selector: button.my-music-card.card-pan > div.my-card-head > span.my-card-title
Selected Text: "网盘音乐"
Page URL: /#/my
Element Rect: x=32, y=180, w=160, h=40

Bound Component Events:
- click

Component Props:
  title: "网盘音乐"
  icon: "cloud"
\`\`\`

### HTML
\`\`\`html
<span class="my-card-title">网盘音乐</span>
\`\`\`

⚙️ 可选配置项

aiInspector({
  /**
   * 触发审查模式的快捷键
   * @default 'alt-w'
   */
  hotkey: 'alt-w',

  /**
   * 是否在页面右下角显示浮动切换图标
   * @default true
   */
  showFloatButton: true,

  /**
   * 复制结构格式：'markdown' | 'yaml' | 'json'
   * @default 'markdown'
   */
  outputFormat: 'markdown',

  /**
   * 是否自动清洗超长 SVG path 及修剪深层子节点（防止浪费 AI Token）
   * @default true
   */
  cleanHtml: true,

  /**
   * 最多保留 HTML 片段行数
   * @default 35
   */
  maxHtmlLines: 35,

  /**
   * 是否提取当前组件的 Props 数据
   * @default true
   */
  extractProps: true,

  /**
   * 组件智能还原规则数组（支持内置预设：'lucide'、'element-plus'、'vant'，或自定义对象）
   * @default ['lucide', 'element-plus', 'vant']
   */
  componentRestorers: [
    'lucide',
    'element-plus',
    'vant',
    {
      match: '.my-btn',
      restore: (el) => `<m-btn>${el.innerText.trim()}</m-btn>`
    }
  ]
})

📄 开源许可

MIT © 2026 BaiCiyou