React Grab 复制 UI 元素指南：一键定位页面背后的源码
【免费下载链接】react-grabCopy any UI element for your agent项目地址: https://gitcode.com/GitHub_Trending/re/react-grab
悬停按钮、按 ⌘C，按钮的源码位置就进了剪贴板。
React Grab 做的就是这件事：在浏览器里点中任意 UI 元素，它把组件名、源文件、行号和几行上下文一起复制下来。粘贴给 AI agent 后，agent 不用猜代码在哪。
上手指南 🚀
适用于 Vite、Next.js、TanStack Start、Webpack 的 React 项目，需要 Node 环境，且项目在开发模式下运行。
- 在项目根目录运行
npx grab@latest init。CLI 会自动识别框架和包管理器，按提示确认即可。注意：monorepo 里如果列出多个项目，用-c指定具体 app 目录。 - 启动开发服务器（如
npm run dev），在浏览器打开页面。注意：React Grab 只在开发环境生效，生产构建不会注入。 - 鼠标悬停到想复制的元素上，出现高亮后按 ⌘C（macOS）或 Ctrl+C（Windows/Linux）。注意：这是"抓取"复制，和页面自带的复制是两回事。
- 把复制的内容粘贴给你的 AI agent。注意：格式类似
[<button> in LoginForm (at components/login-form.tsx:46:19)]，组件名和文件行号一目了然。
它凭什么能做到 🕵️
它是怎么找到源码的？可以类比成零件上的批次号。页面上渲染出的元素就像成品零件，每个都挂在 React 内部的隐藏结构（fiber，React 给每个元素记的内部档案）上。React Grab 先读出你点中元素的批次号，再用 source map（把构建产物翻译回原始代码的对照表）反查出它产自哪个文件、哪一行。它还沿组件树往上爬，拿到外面套着的组件，也就是组件栈。
你悬停的时候，它顺手把页面冻结：暂停 React 更新、CSS 动画和悬停高亮，页面不会在你指的时候跳来跳去。
不同框架只差注入方式，选取逻辑完全一致：
| 框架 | 注入方式 |
|---|---|
| Next.js | CLI 把仅开发模式生效的注入代码写进根布局文件 |
| Vite | 在入口文件顶部加一段仅开发模式生效的引入 |
| Webpack | 与 Vite 相同，在入口加条件引入 |
进阶配置与多场景 🛠️
- 自定义快捷键：默认按键和页面功能冲突时，运行
npx grab@latest configure，改成 Meta+K 这类组合键，保存即生效。 - 按住模式：configure 里把激活方式切成 hold 并设保持时长（最长 2000 毫秒），按住键才出现覆盖层、松开即消失，像"瞄一眼"，不用二次按键退出。
- agent 自动接收：在 agent 会话里跑
npx react-grab@latest pull，命令会阻塞等待下一次复制，agent 循环处理，你只负责在浏览器里点。 - 未支持的框架：CLI 不认识你的框架（如 Remix、Astro）时，按官方 README 手动集成即可，本质就是在入口文件加一行条件引入。
代码是怎么组织的 🗂️
主体代码在packages/react-grab，按交互、源码解析、插件三块划分，CLI 单独成包。
交互中枢
core/index.tsx 用单文件统管"激活 → 悬停 → 选取 → 复制"全流程，选取时同步暂停 React 更新和动画。所有事件监听共用一个中止控制器，退出时一次调用全部清理。
源码解析管线
core/context.ts 负责最难的活：从你指着的 DOM 元素找到对应的 React 内部结构，经 source map 反查出源文件和行号，再过滤掉框架内部的噪音组件，输出干净的组件名加文件位置。
插件与 CLI
复制、评论、在编辑器中打开这些动作都是 core/plugin-registry.ts 里注册的插件，想加新动作只需注册新插件，不用分叉仓库。packages/cli 目录把 init、configure、pull 这些能力打包成命令行。
踩坑记录 ⚠️
- 如果你装完完全看不到覆盖层：多半在跑生产构建。React Grab 只在开发环境注入，切回
npm run dev再试。 - 如果按快捷键没反应，反而触发了页面自身功能：默认按键被页面占用了。运行
npx grab@latest configure换成带修饰键的组合。 - 如果复制出的位置指向 chunk 这类构建产物而不是 .tsx 源文件：source map 没找到。检查开发服务器是否输出 source map，CDN 域名配置要和实际加载地址一致。
- 如果 agent 侧收不到复制内容：
pull必须和浏览器跑在同一台机器上，走 SSH 或远程容器读不到本地剪贴板。
安全底线
- 改了什么：只在开发环境注入一个用于选取和调试的覆盖层，UI 放在 Shadow DOM（浏览器里的样式隔离区）中，不改动你的业务代码和数据。
- 没改什么：生产构建不包含任何 React Grab 代码，线上行为零变化，也上传不了任何业务数据。
- 本地还是网络：元素选取、源码反查、复制全部在浏览器本地完成；"在编辑器中打开"默认走本地开发服务器自带的接口。
- 一句话提醒：React Grab 是 MIT 开源的开发工具，请只在自家开发环境使用，别带进上线产物。
写在最后
React Grab 把"指一下"从口头描述变成了精确的源码坐标：组件名、文件、行号，一次复制全给你。agent 拿到坐标，第一步就能落到正确的文件上，不再来回问"你说的是哪个组件"。下次让 agent 改界面，指一下、复制、粘贴就行。
【免费下载链接】react-grabCopy any UI element for your agent项目地址: https://gitcode.com/GitHub_Trending/re/react-grab
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
