开篇

想象一下这个场景：

你正在和 AI 助手愉快地结对编程，突然想让它帮你改一下页面上那个"有点丑"的按钮。

于是你输入：

"帮我把右上角那个蓝色的按钮改成圆角的"

AI 回复：

"好的，请问是哪个文件？叫什么组件？我需要更多信息..."

你翻了个白眼，开始在项目里一个个文件夹找那个按钮到底藏在哪里...

这种痛，React Grab 懂。

它是谁？

React Grab 是一个开源的开发者工具，做的事情很简单------让你点一下页面元素，就能把它的"身份证"复制给 AI。

什么是"身份证"？就是这个元素的：

住在哪个文件、第几行代码

它爸爸是谁（父组件）

它长什么样（DOM 结构、CSS 选择器）

它的完整家谱（组件层级）

有了这些信息，AI 就不会再迷路了。

项目名片：

🏠 官网：react-grab.com

📦 GitHub：github.com/aidenybai/r...

👨‍💻 作者：Aiden Bai（Million.js 的作者，React 性能优化大佬）

📜 许可证：MIT（完全免费，放心用）

为什么需要它？

没有它之前

让 AI 帮你改 UI，你需要：

当侦探 🔍 - 在项目里翻箱倒柜找组件文件

当翻译 📝 - 费尽口舌描述"就是那个...页面中间偏右...有个图标的...按钮"

当复读机 🔄 - AI 理解错了？再解释一遍...

当搬运工 📋 - 手动复制代码，粘贴，再复制，再粘贴...

有了它之后

按住 ⌘C（Mac）或 Ctrl+C（Windows）

点一下你想改的元素

粘贴给 AI

完事

就这么简单。

它能做什么？

🎯 精准抓取

按住快捷键，鼠标移到元素上，它会贴心地帮你高亮显示：

"你要的是这个吗？它叫 ，住在 MyComponent 里"

点一下，信息就到剪贴板了。

📦 区域选择

想一次改好几个元素？没问题。

按住快捷键，拖个框把它们圈起来，所有元素的信息打包带走。

🧬 完整信息

复制的内容长这样：

xml

复制代码

- selector: [data-lov-name="img"]

- width: 187

- height: 40

HTML snippet:

data-component-line="157" ...>

AI 看到这个，立马就知道：

这是个 img 标签

在 src/page/login/index.tsx 文件的第 157 行

它的父组件是 Main，定义在 page.tsx 的第 22 行

尺寸是 187×40

零歧义，零迷路，零废话。

谁能用？

好消息：不是 Cursor 专属！

AI 助手

能用吗？

Cursor

✅ 当然可以

Claude Code

✅ 完全支持

OpenCode

✅ 没问题

Windsurf

✅ 理论上都行

任何能粘贴的工具

✅ 只要支持剪贴板就行

本质上，React Grab 只是把信息复制到剪贴板。所以只要你的 AI 工具能接收粘贴内容，就能用。

使用场景

场景一：改样式

"帮我把这个按钮改成渐变背景，加个 hover 动效"

以前：找文件 → 描述位置 → 可能还找错了 现在：点一下 → 粘贴 → 搞定

场景二：Debug

"这个卡片显示有问题，帮我看看"

直接点击有问题的元素，AI 立刻知道去哪个文件找。

场景三：重构

"把这几个按钮抽成一个通用组件"

框选多个元素，AI 能看到它们的共同模式。

场景四：学习

"这个动画效果是怎么实现的？"

点一下，AI 就能定位到源码给你讲解。

它的脾气

了解一下 React Grab 的特点，能让你们相处得更愉快：

😊 它喜欢

React 项目 - 这是它的主场

开发模式 - Source Map 开着，它才能准确定位

现代浏览器 - Chrome、Edge、Firefox 都 OK

😕 它不太行

Vue / Angular / Svelte - 抱歉，只认 React

生产环境 - 代码压缩后它就迷路了

远古浏览器 - IE？那是什么？

💡 小贴士

它不会影响你的应用性能（只在按快捷键时激活）

它不会出现在生产环境（只要你配置正确）

它不会和 React DevTools 冲突（它们是好朋友）

和 React DevTools 的区别

经常有人问：有 React DevTools 了，还要这个干嘛？

它们是不同物种：

React Grab

React DevTools

服务对象

AI 助手

人类开发者

交互方式

点击复制

面板浏览

输出格式

文本信息

可视化界面

使用场景

喂给 AI

自己看着调试

React DevTools 是给你看的，React Grab 是给 AI 看的。

总结

React Grab 解决的问题很纯粹：

让 AI 能"看见"你页面上的元素。

不需要你当翻译、当侦探、当搬运工。

点一下，粘贴，然后你就可以专注于描述你想要什么 ，而不是解释那是什么。

这就是它存在的意义。

怎么装？

放心，安装比泡面还简单。

方式一：一行脚本搞定（推荐新手）

在你的 HTML 文件里加一行：

ini

复制代码

src="//unpkg.com/react-grab/dist/index.global.js"

crossorigin="anonymous"

data-enabled="true"

>

就这样，没了。刷新页面就能用。

方式二：Next.js App Router

在 app/layout.tsx 里加：

javascript

复制代码

import Script from 'next/script';

​

export default function RootLayout({

children,

}: {

children: React.ReactNode;

}) {

return (

{process.env.NODE_ENV === 'development' && (

src="//unpkg.com/react-grab/dist/index.global.js"

crossOrigin="anonymous"

data-enabled="true"

strategy="afterInteractive"

/>

)}

{children}

);

}

注意那个 process.env.NODE_ENV === 'development'------只在开发环境加载，生产环境自动消失。

方式三：Next.js Pages Router

在 pages/_document.tsx 里加：

javascript

复制代码

import { Html, Head, Main, NextScript } from 'next/document';

​

export default function Document() {

return (

{process.env.NODE_ENV === 'development' && (

src="//unpkg.com/react-grab/dist/index.global.js"

crossOrigin="anonymous"

data-enabled="true"

/>

)}

);

}

方式四：Vite 项目

先装包：

csharp

复制代码

npm install react-grab

# 或者

pnpm add react-grab

# 或者

yarn add react-grab

然后在 index.html 里加：

xml

复制代码

同样，import.meta.env.DEV 确保只在开发时加载。

装完怎么用？

启动项目 - npm run dev

打开浏览器 - 访问你的应用

按住快捷键 - ⌘C（Mac）或 Ctrl+C（Windows）

移动鼠标 - 你会看到元素被高亮

点击 - 信息自动复制

粘贴给 AI - 开始愉快地改代码