我开源了 inspect-devtools —— 让 AI 终于能"看见"你屏幕上的组件

我开源了 inspect-devtools ------ 让 AI 终于能"看见"你屏幕上的组件

屏幕上看着一个组件，想让 AI 帮着改下样式：

打开 DevTools 翻 DOM 节点、全局搜关键词找文件、截图贴进对话框、打一堆字描述"左边第二个卡片"......

AI 改代码只要 3 秒，但为了把"改哪个文件的哪行"告诉 AI，你前前后后折腾了 3 分钟。

尤其是在不熟悉的复杂大项目里，找对应的源码文件本身就是一个巨大的时间黑洞。

🎬 先看效果

不想看原理的直接跳到「30 秒接入」章节 👇

💢 我为什么要做这个

前端开发有一个被严重低估的时间黑洞：你看着屏幕上的一个 UI 元素，却不知道它对应哪个源码文件。

自己从头搭的项目还好，脑子里有个大概的映射。但下面这些场景，谁没经历过？

场景一：新人入职，面对陌生项目

你刚接手一个中型项目，PM 指着页面上一个弹窗说："这个确认弹窗的文案要改一下"。

你的内心活动：

打开 DevTools → Elements 面板 → 一层层展开 DOM 树 → 找到那个 <div class="modal-content"> → 看到一堆构建后的 class 名，毫无头绪
全局搜索 "确认" → 出来 38 个匹配结果 → 一个个点进去排查 → 发现有 3 个不同的确认弹窗组件
问同事 → 同事也记不清，说"好像在 components/dialog 那个目录下吧" → 去了发现有 5 个 dialog 文件

一个改文案的需求，光找文件就花了 15 分钟。

场景二：想用 AI 改，但组织上下文比改代码还累

你想用 Cursor 改一个页面上的组件。AI 的能力没问题，但你得先告诉它改哪个文件------于是你花了 3 分钟翻 DevTools、搜文件名、确认路径，然后才能开始跟 AI 对话。

或者你偷懒，直接说"帮我改一下 Dashboard 页面上那个显示用户数量的卡片"。AI 能找到，但它得先在项目里搜索一圈、读几个文件确认，一来一回多花了半分钟。明明你指一下就知道是哪个组件，却要用文字描述半天。

场景三：截图发给 AI，多了一步视觉理解

你截了个图贴进对话框，说"帮我改这个组件"。AI 能从截图里识别出 UI 内容，但它还得靠文字和布局特征去项目里反查文件------这中间多了一层视觉理解的开销。

如果你直接告诉它 @src/components/MetricCard.tsx:12:5，AI 可以跳过搜索直接开始干活，快得多。

这三个场景的共同本质是：瓶颈不在 AI 的能力，而在你给 AI 提供上下文的速度。

如果你能直接拿到这样的信息：

less 复制代码

@src/pages/dashboard/MetricCard.tsx:12:5
Hierarchy: `App` > `DashboardPage` > `MetricCard`
Route: /dashboard

不管是新人找文件、还是给 AI 提供上下文，都是秒级完成的事情------不用翻 DOM、不用搜文件名、不用组织描述语言。

但谁会手动去查文件路径、行号、组件层级？ 没有人会。

所以我做了 inspect-devtools：鼠标指一下，一键复制精确上下文，直接粘给 AI，或者直接跳转到编辑器。

✨ 和同类工具有什么不同

市面上有不少 "click-to-component" 类工具，比如 click-to-react-component、vite-plugin-vue-inspector。我都用过，但它们解决的是 2020 年的问题------"帮我打开编辑器"。

2026 年的问题是：帮 AI 理解我在说哪个组件。

这是 inspect-devtools 做到而别人没做到的三件事：

1️⃣ AI 上下文快照，不只是打开编辑器

别的工具：点击 → 打开 VS Code → 结束。

inspect-devtools：点击 → 自动复制 @file:line:col + 组件层级树 + 当前路由 → 粘贴进 AI 对话框 → AI 精确理解上下文。

less 复制代码

@src/pages/dashboard/MetricCard.tsx:12:5
Hierarchy: `App` > `DashboardPage` > `MetricCard`
Route: /dashboard?tab=overview

三行信息分别告诉 AI：改哪个文件的哪一行 、这个组件在渲染树中的位置 （防止改错同名组件）、用户当前在看哪个页面。

2️⃣ Photoshop 式多选，不只是单点选择

别的工具：hover 一个，选一个。

inspect-devtools：拖拽框选多个 → Shift 追加 → Alt 移除。完全对标 Photoshop 的选区操作逻辑。

你可以一次框选 Dashboard 上的所有卡片，然后 Alt+点击去掉不需要的那张，最后所有选中组件的文件引用自动复制到剪贴板。给 AI 的 prompt 里一次性带上 5 个文件的精确位置。

3️⃣ 智能截图，不是透明底图

别的截图工具生成的 PNG 是透明背景的。你粘贴到 Slack 暗色模式下------啥也看不见，深色文字在深色背景上完全隐形。

inspect-devtools 会自动沿着 DOM 树向上查找第一个非透明的背景色，"烘焙"进截图里。而且剪贴板里同时包含图片和 @file:line 文本引用------粘贴到图片查看器是截图，粘贴到编辑器是源码路径。一次操作，两种格式。

⚡ 30 秒接入

全框架支持，选你用的：

React + Vite（最常见）

bash 复制代码

pnpm add -D @inspect-devtools/vite-react

ts 复制代码

// vite.config.ts
import react from '@vitejs/plugin-react'
import { inspectDevtoolsReact } from '@inspect-devtools/vite-react'

export default defineConfig({
  plugins: [react(), ...inspectDevtoolsReact()],
})

完了。没有第三步。

Next.js

bash 复制代码

pnpm add -D @inspect-devtools/next

js 复制代码

// next.config.mjs
import { withInspectDevtools } from '@inspect-devtools/next'
export default withInspectDevtools({})

tsx 复制代码

// app/layout.tsx --- 加一行组件
import { InspectDevtools } from '@inspect-devtools/next/component'
// 在 <body> 里加上 <InspectDevtools />

Vue / Nuxt / Svelte 同理，一个包一行配置，README 里都有。

🔒 所有包都是 apply: 'serve'，只在开发环境生效，生产包零体积影响。

🎮 日常怎么用

装好之后，你的开发工作流会变成这样：

以前	现在
打开浏览器 → 打开 DevTools → Elements 面板 → 一层层展开 DOM 树 → 猜测对应哪个组件 → 全局搜索文件名 → 找到文件 → 手动复制路径 → 粘贴给 AI	鼠标指一下 → `Cmd+Alt+C` → 粘贴给 AI

几个高频操作：

Alt+Shift+I：开关检查模式
Cmd+Alt+C：复制 AI 上下文快照（文件路径 + 层级 + 路由）
Cmd+Shift+C：复制组件截图（带背景色）
按住 Alt：即用即走模式------按住悬浮预览，松开自动选中
框选 + Shift/Alt：多选、加选、减选
选中后按 ↑/↓：沿组件层级上下导航
选中后按 Enter：直接打开编辑器

⚙️ 常用配置（开箱即用，按需定制）

默认配置就已经能满足 90% 的场景，如果你有特定的习惯（比如偏爱 Cursor、想要单点击直接跳编辑器、或者给 AI 的上下文带上完整路由），可以在插件传参中轻松配置：

ts 复制代码

// 以 Vite + React 为例（所有框架配置项保持完全一致）
inspectDevtoolsReact({
  // ⚡ 点击行为：true 为单击直接唤起编辑器；false（默认）为单击选中复制，双击/点徽章才打开
  openOnClick: false,

  // 💻 指定编辑器：自动检测，也可显式指定 'cursor' | 'code' | 'webstorm'
  openInEditor: 'cursor',

  // 🚀 打开机制：'auto' 走本地 dev server RPC；也支持 'cursor' | 'vscode' | 'webstorm' URL Scheme 直唤
  editorProtocol: 'auto',

  // 🧭 复制时是否附加页面路由（例如追加 Route: /dashboard?tab=overview），给 AI 最全的页面上下文
  copyRoute: true,

  // 📍 复制时是否带行列号：true / 'line' / 'column'，生成类似 @App.tsx:15:3 的精确坐标
  copyLineColumn: true,

  // 📝 复制引用格式：'mention'（生成 @path 用于 Cursor/Claude 索引）或 'link'（Markdown 超链接格式）
  copyFormat: 'mention',

  // 🎨 悬浮 Dock 和高亮框的初始主题：'light' | 'dark'
  theme: 'dark',
})

配置速查表：

选项	类型	默认值	说明
`openOnClick`	`boolean`	`false`	单击元素是否立刻打开编辑器。设为 `false` 更适合"选区复制给 AI"的工作流
`openInEditor`	`string`	自动检测	唤醒的编辑器命令，如 `'cursor'`、`'code'`（VS Code）、`'webstorm'`
`editorProtocol`	`'auto'	'vscode'	'cursor'
`copyRoute`	`boolean`	`false`	复制源码位置时，是否附加当前页面 URL 路由（如 `Route: /dashboard`）
`copyLineColumn`	`boolean	'line'	'column'`
`copyFormat`	`'mention'	'link'`	`'mention'`
`theme`	`'light'	'dark'`	`'light'`
`allowedDirs`	`string[]`	`[]`	服务端允许访问的白名单外部目录（防路径越界）

🧠 硬核原理（简版）

如果你只想用，上面就够了。下面是给想了解原理的同学准备的。

编译期：在每个 DOM 元素上"盖戳"

inspect-devtools 通过 Babel 插件（React）/ 模板变换（Svelte）/ 框架内建机制（Vue），在每个原生 HTML 标签上注入两个 data 属性：

html 复制代码

<!-- 编译前 -->
<div className="card">...</div>

<!-- 编译后（开发模式） -->
<div className="card"
  data-inspect-devtools-source="src/MetricCard.tsx:12:5"
  data-inspect-devtools-component="MetricCard">
  ...
</div>

这就是源码坐标的"锚点"。

运行时：从 DOM 反查组件树

点击一个 <div> 时，inspect-devtools 会：

React ：通过 __reactFiber$ 拿到 Fiber 节点 → 沿着 fiber.return 向上遍历 → 收集所有组件名 → 过滤掉框架内部组件（Suspense、Fragment、ErrorBoundary...）和第三方包装（styled.、motion....）→ 得到干净的层级链
Vue ：通过 __vueParentComponent 拿到组件实例 → 沿着 inst.parent 向上遍历
Svelte ：通过 __svelte_meta.loc 拿到源码位置 → DOM 祖先遍历

三种框架走三条路径，但最终输出统一的 GrabSelection 数据结构。

安全：不能打开项目外的文件

"帮我打开编辑器"这个功能其实有安全风险------如果攻击者构造了恶意路径（../../etc/passwd），你的 dev server 就成了任意文件读取的后门。

inspect-devtools 做了完整的沙箱防护：

typescript 复制代码

// 只允许打开项目根目录或 monorepo workspace 内的文件
const safeRoots = [projectRoot, workspaceRoot, ...allowedDirs]
// 用 realpathSync 展开符号链接，防止 symlink 逃逸
const realCandidate = realpathSync(candidate)
// 必须落在安全目录内
return safeRoots.some(root => isSubPath(root, realCandidate))

🎯 支持矩阵

框架	包名	Bundler
React	`@inspect-devtools/vite-react`	Vite
Vue 3	`@inspect-devtools/vite-vue`	Vite
Svelte 4/5	`@inspect-devtools/vite-svelte`	Vite
Next.js	`@inspect-devtools/next`	Webpack (内建)
Nuxt 3	`@inspect-devtools/nuxt`	Vite (内建)
通用	`@inspect-devtools/unplugin`	Webpack / Rollup / Rspack / Esbuild

🙏 最后

这个项目还比较早期，但我自己已经在用了，确实省了不少和 AI 扯皮的时间。

如果你也是 Cursor / Claude Code / Codex 的重度用户，试试看，体验完在评论区告诉我感受 ------ 好的坏的都行，我都会认真看。

有 Bug 直接提 Issue，有想法欢迎 PR。

⭐ GitHub ：inspect-devtools

如果觉得有用，顺手点个 Star，这对开源作者真的很重要 🫡

本文首发于稀土掘金，转载请注明出处。