React Grab 上手指南五分钟内把任意 UI 元素复制成源码上下文【免费下载链接】react-grabCopy any UI element for your agent项目地址: https://gitcode.com/GitHub_Trending/re/react-grabReact Grab 能把浏览器里的任意 UI 元素一键变成带组件名和文件行号的源码上下文粘贴给 AI 编程助手即可直达代码免去口述界面位置的低效沟通。工具面向 React 生态Next.js、Vite、TanStack Start、Webpack一条npx grablatest init完成安装全程 5 分钟内可用。它到底做了什么React Grab 做的事只有一件把你指着页面上某个元素这个动作转写成 AI 助手能直接使用的文字——该元素的 HTML 片段、所属组件的调用栈、以及每个组件对应的真实源码文件与行号。它不改网络请求、不拦截接口也不会修改你的业务组件代码它只是在开发服务器的入口文件里注入一段仅开发模式运行的脚本并在你复制时临时冻结页面动画让选中过程稳定可控。适合用 React 写业务页面、频繁让 AI 助手改某个具体组件的开发者组件层层套娃、肉眼难以判断这个按钮到底是谁写的的项目想把页面位置 → 源码文件这条路交给工具自动完成的团队。不适合非 React 技术栈Vue、Svelte 等目前无自动支持生产环境页面——工具只在开发模式注入线上不会出现纯样式、纯布局的排查需求它给的是组件与源码定位不是样式调试器。动手前的五项核对清单目录位置终端必须停在前端项目根目录能看到package.json的那一层CLI 靠它识别框架。框架在支持列表Next.jsApp / Pages 路由、Vite、TanStack Start、Webpack 可自动配置Remix、Astro、SvelteKit、Gatsby 暂不支持自动安装。Node 与包管理器Node 18 以上npm / yarn / pnpm / bun 均可CLI 会自动识别当前管理器。备份最容易翻车的一项init会真实写入你的框架入口文件如app/layout.tsx或src/main.tsx并安装依赖包。动手前提交一次代码或至少git diff心里有数出问题随时还原。只用开发环境注入逻辑都包在NODE_ENV development判断里生产构建天然不带它——这也意味着生产环境里看不到工具不是 bug而是设计。五步实操走一遍以 Vite 项目为主案例Next.js、TanStack Start、Webpack 流程相同只是被改写的入口文件不同初始化在项目根目录运行npx grablatest initCLI 自动检测框架、安装react-grab依赖并把一段仅开发模式生效的引入语句写进入口文件过程会先展示改动预览。重启开发服务器入口文件变了必须让 Vite 重新编译后脚本才会加载。进入抓取模式在页面上按默认激活键目标元素出现高亮描边、页面动画暂停。复制指向目标元素按 ⌘CmacOS或 CtrlCWindows / Linux。验证生效把剪贴板内容粘贴进编辑器——正确的样子是一行形如[a … in LoginForm (at components/login-form.tsx:46:19)]的引用同时包含元素本身和它所在组件的源码位置。看到文件名和行号说明整条链路已经通了。如果默认激活键与编辑器或浏览器快捷键冲突运行npx grablatest configure换一个组合键例如MetaK或把激活方式从按一下切换改成按住不放按住时长也可自行调节。换个角度看代码CLI 命令层packages/cli/src/commands/ 里init.ts、configure.ts、remove.ts各司其职detect.ts负责认出框架与包管理器transform.ts负责生成入口文件改动的预览与实际写入。运行时编排packages/react-grab/src/core/index.tsx 有意保持单文件大编排从激活、冻结、选框到复制的完整流程可以顺着它一个文件读下来core/store.ts 则用一个状态机描述交互过程空闲 → 悬停 → 冻结 → 拖选 → 复制完成。动作即插件复制、加评论、在编辑器中打开这三个用户动作全部实现为插件挂在 core/plugins/ 下核心代码不硬编码任何剪贴板行为想改复制内容可以插自己的转换函数。源码解析管线core/context.ts 把指针下的 DOM 节点逐级翻译成组件 → 文件 → 行号src/utils/ 里散落着冻结动画、命中检测、打开文件等独立工具每个文件只管一件事。框架升级时改哪里新增框架支持只需动 CLI 的检测与改写逻辑detect.tstransform.tsReact 内部结构变化时受影响的是源码解析与冻结相关的少数工具文件。匹配、编排、插件这条主干不用动。更完整的内部说明冻结机制、Shadow DOM 挂载、源码 map 符号化等见 docs/architecture.md。出问题了怎么办现象原因处理页面里完全没有高亮、快捷键无效dev server 未在写入后重启或页面跑在非开发模式重启 dev server确认是开发环境按激活键没反应或触发了别的操作快捷键与浏览器 / 编辑器 / 应用自身快捷键冲突npx grablatest configure换组合键或改用按住激活模式组件名全是AppRouter之类框架内部名源码解析未拿到真实栈帧sourcemap 或 dev server 异常确认 dev server 正常、构建输出带 source map复制出来只有元素、没有文件行号指针停在了非 React 节点Shadow DOM、iframe、手写 DOM换一个 React 渲染的真实节点再试生产构建里出现了 React Grab手动安装时条件判断写错脚本进了生产包核对框架入口的注入写法确认包在 dev 判断内初始化时提示不支持当前框架框架不在自动支持列表参考 README 按对应框架手动加入口引入写在最后React Grab 的最佳使用姿势是按需启用、用完可还原初始化写入的只是入口文件里几行带开发模式条件的代码不需要时git一键还原即可生产构建本身也不含它。框架大版本升级后源码解析这类贴近 React 内部结构的逻辑可能需要同步更新因此保持关注 react-grab 的版本发布、升级后重跑一次init或configure同步配置是更省心的长期用法。【免费下载链接】react-grabCopy any UI element for your agent项目地址: https://gitcode.com/GitHub_Trending/re/react-grab创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考