React Grab 上手教程浏览器里选中任意 UI 元素把源码位置直接交给 AI Agent【免费下载链接】react-grabCopy any UI element for your agent项目地址: https://gitcode.com/GitHub_Trending/re/react-grab一、它是什么React Grab 是一个浏览器端的 React 开发辅助工具你在跑着的网页里悬停到任意元素按快捷键复制剪贴板里得到的不只是这段 HTML而是它背后的组件名、源文件路径和行号。把这段内容粘贴给 AI 编程助手助手就能直接定位到你写的代码不用再靠截图和描述去猜位置。官方基准显示带上 React Grab 的上下文后Agent 完成任务的速度平均快约 2 倍。它只在开发模式下工作支持 Next.jsApp/Pages Router、Vite、TanStack Start、Webpack 四类项目也自带一个 Web 扩展方便在浏览器里手动触发。二、先跑通从安装到第一次复制前提条件你的项目是 React 技术栈且框架在上述支持列表内本机已装 Node.js能用npx即可npm/yarn/pnpm/bun 均可项目已能在浏览器里正常跑起来npm run dev之类。如果想在仓库源码里折腾可先克隆git clone https://gitcode.com/GitHub_Trending/re/react-grab关键操作步骤打开项目根目录的终端运行安装命令它会自动识别你的框架并写好开发环境的接入代码npx grablatest init按提示确认过程中可以选择激活快捷键默认即可激活模式可选“按住触发”hold或“开关触发”toggle启动你的开发服务器在浏览器里打开应用页面按设置的快捷键进入抓取模式页面会被“冻结”动画、状态更新、悬停变色全部暂停画面定格方便你精确瞄准元素上会浮现高亮框和组件名标签悬停到目标元素上按 ⌘CMac或 CtrlCWindows/Linux复制把剪贴板内容粘贴给 Agent。如何验证安装生效复制成功后剪贴板里应是一行类似这样的引用[a classml-auto inline-block text-sm href#Forgot your password?/a in LoginForm (at components/login-form.tsx:46:19)]其中components/login-form.tsx:46:19就是编辑器可以直接跳转的源文件位置。如果你看到这段格式的输出说明整条链路——元素识别、组件栈解析、源码映射——都正常工作了。若只想看效果不想改项目也可以直接用仓库里的 Web 扩展在支持页面的浏览器里手动注入。三、再理解它是怎么把屏幕上的元素变回代码位置的可以把整个过程想象成一次“反向导航”。你在页面上点中的是一个 DOM 节点而 React 内部为每个节点都挂着一份叫 fiber 的内部数据结构可以理解为 React 的“户籍档案”记录这个节点由哪个组件、在哪个文件哪一行渲染出来。React Grab 的工作就是从 DOM 节点出发借助 bippy 这个依赖找到最近的 fiber再沿着 fiber 的归属链一路向上还原出“这个元素属于 LoginForm它的父级是 Page各自定义在哪个文件”。难点在于组件栈里给出的文件位置往往还是打包后的 URL比如/_next/static/chunks/app.js直接给 Agent 没法用。所以工具会顺着 bundle 尾部的 source map 注释去下载并解码源码映射把行号换回你写的真实文件。Next.js 的 Server Component 更特殊它的堆栈是rsc://虚拟地址React Grab 会把这些帧批量发给 Next.js 开发服务器的符号化接口让服务端把它们还原成真实路径。这一段管线就写在 core/context.ts 里。源码组织上各职责分得很清楚src/core/核心编排index.tsx负责初始化与交互生命周期context.ts负责“DOM 到源码”的解析管线store.ts用有限状态机管理“空闲 → 按住 → 激活 → 复制”等状态src/core/plugins/复制、添加注释、在编辑器中打开这三个动作都以插件形式注册复制内容在写入剪贴板前会流经插件的转换管线你可以插进自己的步骤而不用 fork 项目src/utils/一堆小而专的工具比如freeze-updates.ts冻结 React 状态更新、freeze-animations.ts冻结 CSS/SVG/动画帧循环、open-file.ts借开发服务器的 open-in-editor 接口直接打开编辑器packages/cli/独立 CLI 包init/configure等命令负责检测框架、安装依赖、改写入口文件。“冻结页面”是它最吃技术的一块React 没有暂停渲染的公开 API于是它改写 React 内部 dispatcher把暂停期间的状态更新全部暂存解冻后按“外部 store → transition → 状态更新”的顺序回放避免画面跳变。细节都写在 docs/architecture.md 里值得一读。正因为这些手法改 dispatcher、补 KeyboardEvent、拦截动画系统都贴着 React 内部结构走官方也明说这是“脆弱”的。当 React 或构建工具升级、内部结构变化后维护者通常只需要修src/utils/freeze-*.ts这类适配文件和context.ts里的解析分支核心的状态机和插件机制不用动——这就是“编排集中、工具下沉”这个设计原则带来的好处。四、排错手册高频问题按“现象 → 原因 → 动作”对照现象装了之后页面没有任何高亮提示快捷键没反应可能原因React Grab 只在开发模式加载你跑的是npm run build后的生产包或者项目框架不在支持列表Remix、Astro、SvelteKit、Gatsby 目前不支持自动接入。 处理动作确认用的是 dev server不支持的框架可参考 README 里“Manual Installation”一节的思路手动引入。现象复制出来的内容里全是_n.P、Anonymous这类匿名组件没有文件路径可能原因source map 没生成或路径解析被过滤掉了框架内部帧。 处理动作确认 dev server 正常产出 source map若组件栈太浅可用npx grablatest configure调大上下文行数--context-lines上限 50匿名帧属于正常过滤行为真正有用的特征帧会优先占用预算。现象Next.js 项目里出现水合hydration报错可能原因注入方式与 Next 的渲染时序冲突例如在html下挂 DOM、或生产环境也加载了脚本。 处理动作确保只在process.env.NODE_ENV development分支注入并优先用 CLI 生成的接入代码而不是手改。现象快捷键触发了但 App 自己的键盘逻辑也被带跑了可能原因某些页面全局监听按键事件。 处理动作用npx grablatest configure --key MetaK之类命令换一个少用的组合键支持如MetaK、CtrlShiftG的写法工具对已认领的按键会做遮蔽处理但极端的全局监听仍可能受波及。现象点“在编辑器中打开”没反应可能原因项目用的框架没有 open-in-editor 中间件或开发服务器没在跑。 处理动作Vite 和 Next.js 会自动走各自的 dev 端点/__open-in-editor、/__nextjs_launch-editor其他构建工具则回退到协议链接唤起 VS Code需要本机装有 VS Code 并已配置vscode://处理器。现象想自动化让 Agent 自动消费我复制的内容这不是故障而是进阶玩法仓库里的 skills/react-grab/SKILL.md 描述了一条“无人值守”循环——在终端跑npx react-grablatest pull --max-age 0它会阻塞等待你下一次抓取并打印成 JSON复制的内容里若带了注释注释就是任务指令。适合放在长驻 Agent 里跑。五、边界与提醒适合谁不适合谁适合日常用 AI 改 React 界面、反复在“截图 → 描述 → 定位”之间浪费时间的开发者团队里多人共享同一套“指给 Agent 看”的协作习惯的项目。不适合 / 注意它不改动生产构建线上页面装上也看不到期望把它当线上调试探针的请换个工具冻结与解析手法依赖 React 内部结构升级 React 大版本后若行为异常建议先升到最新 react-grab 再排查本地问题pull类监听剪贴板的自动化命令务必与浏览器跑在同一台机器上剪贴板不跨 SSH 和容器复制的内容可能包含界面里呈现的他人数据表单内容、用户名等粘贴进 Agent 或提交到外部服务前建议先扫一眼有没有敏感信息项目采用 MIT 协议可放心商用若你基于 react-grab/primitives 自研选择器界面命中测试的过滤规则和data-react-grab-ignore属性需要自行处理避免工具栏挡住应用元素。一句话总结一条npx grablatest init装好浏览器里选中、复制、粘贴从此你和 Agent 之间关于“到底是哪行代码”的沟通成本归零。【免费下载链接】react-grabCopy any UI element for your agent项目地址: https://gitcode.com/GitHub_Trending/re/react-grab创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 React Grab 上手教程：浏览器里选中任意 UI 元素，把源码位置直接交给 AI Agent
React Grab 上手教程浏览器里选中任意 UI 元素把源码位置直接交给 AI Agent【免费下载链接】react-grabCopy any UI element for your agent项目地址: https://gitcode.com/GitHub_Trending/re/react-grab一、它是什么React Grab 是一个浏览器端的 React 开发辅助工具你在跑着的网页里悬停到任意元素按快捷键复制剪贴板里得到的不只是这段 HTML而是它背后的组件名、源文件路径和行号。把这段内容粘贴给 AI 编程助手助手就能直接定位到你写的代码不用再靠截图和描述去猜位置。官方基准显示带上 React Grab 的上下文后Agent 完成任务的速度平均快约 2 倍。它只在开发模式下工作支持 Next.jsApp/Pages Router、Vite、TanStack Start、Webpack 四类项目也自带一个 Web 扩展方便在浏览器里手动触发。二、先跑通从安装到第一次复制前提条件你的项目是 React 技术栈且框架在上述支持列表内本机已装 Node.js能用npx即可npm/yarn/pnpm/bun 均可项目已能在浏览器里正常跑起来npm run dev之类。如果想在仓库源码里折腾可先克隆git clone https://gitcode.com/GitHub_Trending/re/react-grab关键操作步骤打开项目根目录的终端运行安装命令它会自动识别你的框架并写好开发环境的接入代码npx grablatest init按提示确认过程中可以选择激活快捷键默认即可激活模式可选“按住触发”hold或“开关触发”toggle启动你的开发服务器在浏览器里打开应用页面按设置的快捷键进入抓取模式页面会被“冻结”动画、状态更新、悬停变色全部暂停画面定格方便你精确瞄准元素上会浮现高亮框和组件名标签悬停到目标元素上按 ⌘CMac或 CtrlCWindows/Linux复制把剪贴板内容粘贴给 Agent。如何验证安装生效复制成功后剪贴板里应是一行类似这样的引用[a classml-auto inline-block text-sm href#Forgot your password?/a in LoginForm (at components/login-form.tsx:46:19)]其中components/login-form.tsx:46:19就是编辑器可以直接跳转的源文件位置。如果你看到这段格式的输出说明整条链路——元素识别、组件栈解析、源码映射——都正常工作了。若只想看效果不想改项目也可以直接用仓库里的 Web 扩展在支持页面的浏览器里手动注入。三、再理解它是怎么把屏幕上的元素变回代码位置的可以把整个过程想象成一次“反向导航”。你在页面上点中的是一个 DOM 节点而 React 内部为每个节点都挂着一份叫 fiber 的内部数据结构可以理解为 React 的“户籍档案”记录这个节点由哪个组件、在哪个文件哪一行渲染出来。React Grab 的工作就是从 DOM 节点出发借助 bippy 这个依赖找到最近的 fiber再沿着 fiber 的归属链一路向上还原出“这个元素属于 LoginForm它的父级是 Page各自定义在哪个文件”。难点在于组件栈里给出的文件位置往往还是打包后的 URL比如/_next/static/chunks/app.js直接给 Agent 没法用。所以工具会顺着 bundle 尾部的 source map 注释去下载并解码源码映射把行号换回你写的真实文件。Next.js 的 Server Component 更特殊它的堆栈是rsc://虚拟地址React Grab 会把这些帧批量发给 Next.js 开发服务器的符号化接口让服务端把它们还原成真实路径。这一段管线就写在 core/context.ts 里。源码组织上各职责分得很清楚src/core/核心编排index.tsx负责初始化与交互生命周期context.ts负责“DOM 到源码”的解析管线store.ts用有限状态机管理“空闲 → 按住 → 激活 → 复制”等状态src/core/plugins/复制、添加注释、在编辑器中打开这三个动作都以插件形式注册复制内容在写入剪贴板前会流经插件的转换管线你可以插进自己的步骤而不用 fork 项目src/utils/一堆小而专的工具比如freeze-updates.ts冻结 React 状态更新、freeze-animations.ts冻结 CSS/SVG/动画帧循环、open-file.ts借开发服务器的 open-in-editor 接口直接打开编辑器packages/cli/独立 CLI 包init/configure等命令负责检测框架、安装依赖、改写入口文件。“冻结页面”是它最吃技术的一块React 没有暂停渲染的公开 API于是它改写 React 内部 dispatcher把暂停期间的状态更新全部暂存解冻后按“外部 store → transition → 状态更新”的顺序回放避免画面跳变。细节都写在 docs/architecture.md 里值得一读。正因为这些手法改 dispatcher、补 KeyboardEvent、拦截动画系统都贴着 React 内部结构走官方也明说这是“脆弱”的。当 React 或构建工具升级、内部结构变化后维护者通常只需要修src/utils/freeze-*.ts这类适配文件和context.ts里的解析分支核心的状态机和插件机制不用动——这就是“编排集中、工具下沉”这个设计原则带来的好处。四、排错手册高频问题按“现象 → 原因 → 动作”对照现象装了之后页面没有任何高亮提示快捷键没反应可能原因React Grab 只在开发模式加载你跑的是npm run build后的生产包或者项目框架不在支持列表Remix、Astro、SvelteKit、Gatsby 目前不支持自动接入。 处理动作确认用的是 dev server不支持的框架可参考 README 里“Manual Installation”一节的思路手动引入。现象复制出来的内容里全是_n.P、Anonymous这类匿名组件没有文件路径可能原因source map 没生成或路径解析被过滤掉了框架内部帧。 处理动作确认 dev server 正常产出 source map若组件栈太浅可用npx grablatest configure调大上下文行数--context-lines上限 50匿名帧属于正常过滤行为真正有用的特征帧会优先占用预算。现象Next.js 项目里出现水合hydration报错可能原因注入方式与 Next 的渲染时序冲突例如在html下挂 DOM、或生产环境也加载了脚本。 处理动作确保只在process.env.NODE_ENV development分支注入并优先用 CLI 生成的接入代码而不是手改。现象快捷键触发了但 App 自己的键盘逻辑也被带跑了可能原因某些页面全局监听按键事件。 处理动作用npx grablatest configure --key MetaK之类命令换一个少用的组合键支持如MetaK、CtrlShiftG的写法工具对已认领的按键会做遮蔽处理但极端的全局监听仍可能受波及。现象点“在编辑器中打开”没反应可能原因项目用的框架没有 open-in-editor 中间件或开发服务器没在跑。 处理动作Vite 和 Next.js 会自动走各自的 dev 端点/__open-in-editor、/__nextjs_launch-editor其他构建工具则回退到协议链接唤起 VS Code需要本机装有 VS Code 并已配置vscode://处理器。现象想自动化让 Agent 自动消费我复制的内容这不是故障而是进阶玩法仓库里的 skills/react-grab/SKILL.md 描述了一条“无人值守”循环——在终端跑npx react-grablatest pull --max-age 0它会阻塞等待你下一次抓取并打印成 JSON复制的内容里若带了注释注释就是任务指令。适合放在长驻 Agent 里跑。五、边界与提醒适合谁不适合谁适合日常用 AI 改 React 界面、反复在“截图 → 描述 → 定位”之间浪费时间的开发者团队里多人共享同一套“指给 Agent 看”的协作习惯的项目。不适合 / 注意它不改动生产构建线上页面装上也看不到期望把它当线上调试探针的请换个工具冻结与解析手法依赖 React 内部结构升级 React 大版本后若行为异常建议先升到最新 react-grab 再排查本地问题pull类监听剪贴板的自动化命令务必与浏览器跑在同一台机器上剪贴板不跨 SSH 和容器复制的内容可能包含界面里呈现的他人数据表单内容、用户名等粘贴进 Agent 或提交到外部服务前建议先扫一眼有没有敏感信息项目采用 MIT 协议可放心商用若你基于 react-grab/primitives 自研选择器界面命中测试的过滤规则和data-react-grab-ignore属性需要自行处理避免工具栏挡住应用元素。一句话总结一条npx grablatest init装好浏览器里选中、复制、粘贴从此你和 Agent 之间关于“到底是哪行代码”的沟通成本归零。【免费下载链接】react-grabCopy any UI element for your agent项目地址: https://gitcode.com/GitHub_Trending/re/react-grab创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考