React Grab:三步把任意UI元素源码复制给AI助手的完整指南【免费下载链接】react-grabCopy any UI element for your agent项目地址: https://gitcode.com/GitHub_Trending/re/react-grabReact Grab 是一款面向 React 项目的开源工具运行在浏览器开发环境里。它让你用快捷键抓住页面上任意一个 UI 元素自动复制该元素所属的组件名、源码文件和行号再粘贴给 AI 编程助手让 Agent 直接定位到对应源码。支持 Next.js、Vite、TanStack Start、Webpack 等主流框架仅在开发模式下生效。它能做什么快速定位 UI 源码调试时不必再靠猜选择器找组件抓一下鼠标位置就能拿到文件:行号适合用 AI 助手写前端代码的开发者。精确下达修改指令把抓到的元素连同你的备注一起交给 Agent它能直接改到对应组件的那一行而不是在代码库里大海捞针。一键在编辑器中打开选中元素后可选Open in editor调用 Vite / Next.js 开发服务器接口直接在 VS Code 等编辑器里跳到具体行。免手动的 AI 协作循环npx react-grablatest pull会持续监听剪贴板你在浏览器里每抓一次内容就自动推给 Agent无需反复复制粘贴。冻结页面再挑选激活时它会暂停 React 更新与页面动画动态元素也不会躲开你的鼠标拖拽框选还能一次复制多个元素。三步快速上手 React Grab 安装教程✅ 只需三步即可跑通在项目根目录执行npx grablatest initCLI 会自动识别框架并写入仅开发模式的接入代码启动开发服务器并打开页面按激活键进入抓取模式默认快捷键可用npx grablatest configure --key MetaK修改也支持长按模式--mode hold鼠标悬停到目标元素上按CtrlCMac 为⌘C复制粘贴进你的 Agent 即可。复制内容形如[a class... href#Forgot your password?/a in LoginForm (at components/login-form.tsx:46:19)]——元素标签、组件层级、文件位置一应俱全。它是怎么做到的浏览器本身只知道 DOM不知道这个按钮属于哪个组件。React Grab 的思路是从你选中的 DOM 元素向上查找它关联的 React fiber再借助 bippy 还原出完整的组件层级最后拉取打包文件的 source map把编译后的位置翻译回你写的源文件和行号。整条链路都在浏览器内完成无需你手写任何选择器。 关键实现在 core/context.ts源码定位管线和 core/index.tsx交互总调度为了让挑选时页面纹丝不动freeze-updates.ts 会临时挂起 React 更新与各类动画。更多细节可阅读架构文档。常见坑与自查清单激活没反应React Grab 默认只在开发模式注入确认 dev server 正在运行、不是预览或生产环境。快捷键与其他工具冲突用npx grablatest configure --key 组合键换一组按键或改用--mode hold --hold-duration 500长按触发。复制出的仍是打包路径检查项目 source map 是否正常生成Next.js 服务端组件的定位依赖 dev server 接口确保开发服务器可用。pull收不到内容剪贴板监听必须与浏览器跑在同一台机器上远程容器或 SSH 环境无效。不再需要删除入口文件中对应那几行开发环境注入代码即可它对生产构建没有任何影响。项目内部一览packages/react-grab/核心库包含选择交互状态机、覆盖层渲染与源码解析。packages/cli/命令行工具提供init、configure、pull、watch、stop等命令支持框架自动检测。primitives 导出底层 API命中检测、页面冻结、剪贴板、编辑器跳转可用它搭建自己风格的选取器界面。Agent Skill 配置预置的浏览器抓取 → Agent 自动处理工作流说明。注意事项⚠️ 使用前请记住以下几点仅作用于开发模式不会随生产构建发布。定位依赖 React 内部结构与 source mapReact 大版本升级后建议及时升级工具版本。MIT 开源协议免费使用适合个人学习与日常开发场景。剪贴板与编辑器联动均为本地行为注意不要在生产环境启用。React Grab 把指着一个 UI 元素变成指着它的源码省去了与 AI 协作开发前端时最耗时的定位环节安装、配置与进阶玩法详见官方仓库文档与 CONTRIBUTING 指南。【免费下载链接】react-grabCopy any UI element for your agent项目地址: https://gitcode.com/GitHub_Trending/re/react-grab创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
React Grab:三步把任意UI元素源码复制给AI助手的完整指南
React Grab:三步把任意UI元素源码复制给AI助手的完整指南【免费下载链接】react-grabCopy any UI element for your agent项目地址: https://gitcode.com/GitHub_Trending/re/react-grabReact Grab 是一款面向 React 项目的开源工具运行在浏览器开发环境里。它让你用快捷键抓住页面上任意一个 UI 元素自动复制该元素所属的组件名、源码文件和行号再粘贴给 AI 编程助手让 Agent 直接定位到对应源码。支持 Next.js、Vite、TanStack Start、Webpack 等主流框架仅在开发模式下生效。它能做什么快速定位 UI 源码调试时不必再靠猜选择器找组件抓一下鼠标位置就能拿到文件:行号适合用 AI 助手写前端代码的开发者。精确下达修改指令把抓到的元素连同你的备注一起交给 Agent它能直接改到对应组件的那一行而不是在代码库里大海捞针。一键在编辑器中打开选中元素后可选Open in editor调用 Vite / Next.js 开发服务器接口直接在 VS Code 等编辑器里跳到具体行。免手动的 AI 协作循环npx react-grablatest pull会持续监听剪贴板你在浏览器里每抓一次内容就自动推给 Agent无需反复复制粘贴。冻结页面再挑选激活时它会暂停 React 更新与页面动画动态元素也不会躲开你的鼠标拖拽框选还能一次复制多个元素。三步快速上手 React Grab 安装教程✅ 只需三步即可跑通在项目根目录执行npx grablatest initCLI 会自动识别框架并写入仅开发模式的接入代码启动开发服务器并打开页面按激活键进入抓取模式默认快捷键可用npx grablatest configure --key MetaK修改也支持长按模式--mode hold鼠标悬停到目标元素上按CtrlCMac 为⌘C复制粘贴进你的 Agent 即可。复制内容形如[a class... href#Forgot your password?/a in LoginForm (at components/login-form.tsx:46:19)]——元素标签、组件层级、文件位置一应俱全。它是怎么做到的浏览器本身只知道 DOM不知道这个按钮属于哪个组件。React Grab 的思路是从你选中的 DOM 元素向上查找它关联的 React fiber再借助 bippy 还原出完整的组件层级最后拉取打包文件的 source map把编译后的位置翻译回你写的源文件和行号。整条链路都在浏览器内完成无需你手写任何选择器。 关键实现在 core/context.ts源码定位管线和 core/index.tsx交互总调度为了让挑选时页面纹丝不动freeze-updates.ts 会临时挂起 React 更新与各类动画。更多细节可阅读架构文档。常见坑与自查清单激活没反应React Grab 默认只在开发模式注入确认 dev server 正在运行、不是预览或生产环境。快捷键与其他工具冲突用npx grablatest configure --key 组合键换一组按键或改用--mode hold --hold-duration 500长按触发。复制出的仍是打包路径检查项目 source map 是否正常生成Next.js 服务端组件的定位依赖 dev server 接口确保开发服务器可用。pull收不到内容剪贴板监听必须与浏览器跑在同一台机器上远程容器或 SSH 环境无效。不再需要删除入口文件中对应那几行开发环境注入代码即可它对生产构建没有任何影响。项目内部一览packages/react-grab/核心库包含选择交互状态机、覆盖层渲染与源码解析。packages/cli/命令行工具提供init、configure、pull、watch、stop等命令支持框架自动检测。primitives 导出底层 API命中检测、页面冻结、剪贴板、编辑器跳转可用它搭建自己风格的选取器界面。Agent Skill 配置预置的浏览器抓取 → Agent 自动处理工作流说明。注意事项⚠️ 使用前请记住以下几点仅作用于开发模式不会随生产构建发布。定位依赖 React 内部结构与 source mapReact 大版本升级后建议及时升级工具版本。MIT 开源协议免费使用适合个人学习与日常开发场景。剪贴板与编辑器联动均为本地行为注意不要在生产环境启用。React Grab 把指着一个 UI 元素变成指着它的源码省去了与 AI 协作开发前端时最耗时的定位环节安装、配置与进阶玩法详见官方仓库文档与 CONTRIBUTING 指南。【免费下载链接】react-grabCopy any UI element for your agent项目地址: https://gitcode.com/GitHub_Trending/re/react-grab创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
