指向任意 UI 元素即拿到源码位置React Grab 完整上手教程与排查清单【免费下载链接】react-grabCopy any UI element for your agent项目地址: https://gitcode.com/GitHub_Trending/re/react-grab你是否曾在页面上盯着某个按钮看了半天却不知道它的代码到底在哪个文件第几行React Grab 是一款面向 React 项目的UI 元素源码定位工具在浏览器里悬停任意元素按一个键就能把这个元素、它的组件层级、文件路径和行号一起复制下来直接粘给编码代理使用。找 UI 源码找不到这 30 分钟花在哪了先看一个熟悉的工作流你要改登录页里忘记密码链接的文案。打开项目搜类名CSS Modules 和 Tailwind 生成的是text-sm这种共享类一搜一片。搜组件名Forgot 可能在三四个文件里都出现过。你只好打开page.tsx顺着children一层层点下去五分钟过去了还没到目标。再叠加一层你在用 AI 编码代理时只能口头描述登录页右边那个链接。代理靠猜文件路径第一次改动经常改错地方你还得反复贴代码帮它对齐。时间不是耗在改上而是耗在找上。读完这一节你会明白 React Grab 想填平的就是这道裂缝让看到 → 找到 → 交给代理变成一次复制粘贴。⚡ 3 分钟让 React Grab 生效3 步安装与首次使用安装只需一条命令而且它只碰开发环境在项目根目录运行npx grablatest init。CLI 会自动识别Next.jsApp/Pages、Vite、TanStack Start、Webpack安装react-grab包并只向一个框架入口文件注入一行仅开发时加载的代码。启动开发服务器在浏览器打开任意页面。工具进入开发态后页面上会出现一个选择工具栏。悬停到目标元素上按⌘C / CtrlC复制。剪贴板里的内容形如[a classml-auto … in LoginForm (at components/login-form.tsx:46:19)]——元素、所属组件、文件、行号一次齐了。把这行上下文粘贴给代理它就知道该动哪个文件的哪一行。两个补充快捷键与 app 自带的快捷键冲突时用npx grablatest configure更换按键如-k MetaK或切换toggle/hold激活模式。不方便用 CLI 时手动安装也很简单Vite 项目在src/main.tsx顶部加if (import.meta.env.DEV) { import(react-grab); }Next.js App Router 在app/layout.tsx里按NODE_ENV development条件加载全局脚本详见 README 的 Manual Installation 一节。读完本节你可以在 5 分钟内完成第一次指向即复制。按了复制键之后它到底复制了什么很多人担心这类工具黑盒其实它的流水线可以拆成四步每一步都不玄学。第一步找到 React fiber。入口是 core/context.ts 里的getStack()。并不是每个 DOM 节点都对应一个组件所以它会从光标下的元素沿parentElement向上找到最近的、挂着 React fiber 的节点。第二步从 fiber 还原组件栈。React 19 直接读 fiber 上的_debugStack17/18 版本则沿fiber.return走到根临时构造调用栈对比出每一层组件名。这一步拿到的是组件 A 套着组件 B的层级但文件名还是打包后的 chunk URL。第三步source map 反解。工具会抓打包产物尾部的//# sourceMappingURL引用把 chunk 里的行列翻译回components/login-form.tsx:46:19。遇到 Server Components 的rsc://虚拟路径再交给 Next.js 开发服务器的专用端点解析成真实文件。第四步过滤与预算控制。Suspense、Next 内部包装组件这类框架噪音会被过滤掉只有你写的代码才占用默认 3 行的上下文预算可用maxContextLines调大。如果实在解不出可信源码会自动补一个语义化 CSS 选择器兜底。顺带解释一个观感问题为什么选中时整页像是被暂停了utils/freeze-updates.ts 给 React 内部 dispatcher 打了补丁把状态更新暂存到队列utils/freeze-animations.ts 暂停 CSS、SVG、WAAPI 和 rAF 循环utils/freeze-pseudo-states.ts 把:hover样式固化成内联样式。相当于先把整页暂停让你从容指认松手后所有状态按顺序回放不会跳帧。打个比方过去你是在给代理说城里有个蓝顶的咖啡店现在你直接把地址 经纬度递了过去。⚠️ 使用前必看准备、注意与排查清单前置准备React Grab 只在开发环境生效。注入代码默认带NODE_ENV development或import.meta.env.DEV判断生产构建天然不包含它。确认框架受支持。CLI 明确报错unsupported-framework的有Remix、Astro、SvelteKit、Gatsby——这类项目需要照 README 手动按仅开发加载的模式注入。monorepo 里init只处理当前目录用--cwd指定目标 app别指望它自动遍历整个 workspace。使用中注意激活键会和页面自己的快捷键抢按键。工具的处理方式是把被认领的按键对 app 的 handler 伪装成空字符串见 core/keyboard-handlers.ts如果你发现某个快捷键失灵多半是撞车了换个键即可。开发自己的选择器 UI 时给它加上data-react-grab-ignore命中检测就会跳过整棵子树避免抓自己。如果你接了代理的持续监听循环grab pull在后台抓剪贴板用完记得跑grab stop停掉 watcher。常见问题排查init 后工具栏不出现确认入口文件确实被改写、开发服务器已重启CLI 报transform-failed说明它没找到可编辑的入口文件。复制出的位置是 chunk 哈希或长 URLdev 环境的 source map 不完整先修复构建配置反解才有意义。按了没反应 / 模式不合手用grab configure --mode hold --hold-duration 500改成按住才激活手一松就退出最不容易误触。不想要了grab remove卸载grab upgrade升级都有现成命令。这份清单的价值在于把 90% 的装上了却不好使提前挡掉。 仓库四大核心模块从一条 init 到一次复制想深入源码时抓住这四个位置就够了其余都是围绕它们的工具函数。packages/cli/安装与配置的前台。commands/init.ts编排整个流程utils/detect.ts 判断框架与包管理器utils/install-react-grab.ts 负责调包管理器和改写入口文件失败时抛出带code的ReactGrabInstallError错误码即原因。packages/react-grab/src/core/定位流水线的心脏。index.tsx是唯一编排入口store.ts用判别联合类型描述空闲 → 激活 → 复制中的状态机context.ts是上文说的源码解析核心core/plugin-registry.ts 则把复制 / 评论 / 打开编辑器都做成插件——外部可以替换剪贴板内容生成的任何一步无需 fork 库。packages/react-grab/src/utils/一个文件一个职责的手工业作坊冻结三件套都在此utils/open-file.ts 走 dev server 的__open-in-editor中间件Vite/Next 自带失败时回退到编辑器协议让文件带着行号直接弹进编辑器。packages/react-grab/src/components/SolidJS 写的覆盖层 UI——canvas 高亮、工具栏、选择标签、右键菜单全部挂在 Shadow DOM 里既不继承页面样式也不干扰页面事件。另外提一句 skills/react-grab/SKILL.md它定义了代理边干活边等你抓元素的自动化循环是复制给 agent这条主线的官方剧本。它动到了什么数据边界要划在哪作为会碰剪贴板和源码的工具边界问题值得单独说清楚。数据边界复制到剪贴板的只有三样东西——元素的 HTML 片段、组件名、文件路径与行号。没有账号信息不碰业务数据source map 请求也指向你本地的开发服务器资源。CLI 侧只有一条版本检查请求且识别DO_NOT_TRACK1即可关闭见 is-telemetry-enabled.ts。使用边界它是开发环境的辅助工具生产构建默认不含它打开文件也只是为了本地编辑方便。项目采用 MIT 协议商用无忧。一条容易忽略的建议复制内容里带着你真实的内部路径monorepo 目录结构、组件命名习惯。如果用的是外部代理服务心里要有数这些上下文会离开本机。敏感项目里先想清楚再贴。 从口述 UI到指给它看回到开头那个场景找忘记密码链接的源码原来要搜类名、猜组件、点三层文件现在是一次悬停、一次 ⌘C、一次粘贴——从几十分钟压回几秒钟而代理拿到的不再是描述是坐标。它的价值边界同样清晰React Grab 不替代读代码它解决的是最后一公里的定位成本它不服务于生产环境不支持的框架需要手动按开发态注入。把工具用在这道边界之内看到 → 定位 → 交付这条链路就再也卡不住你了。【免费下载链接】react-grabCopy any UI element for your agent项目地址: https://gitcode.com/GitHub_Trending/re/react-grab创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考