开篇
想象一下这个场景：
你正在和 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
- 完事
就这么简单。
它能做什么？
🎯 精准抓取
按住快捷键，鼠标移到元素上，它会贴心地帮你高亮显示：
"你要的是这个吗？它叫
<button>，住在MyComponent里"
点一下，信息就到剪贴板了。
📦 区域选择
想一次改好几个元素？没问题。
按住快捷键，拖个框把它们圈起来，所有元素的信息打包带走。
🧬 完整信息
复制的内容长这样：
xml
<selected_element>
- selector: [data-lov-name="img"]
- width: 187
- height: 40
HTML snippet:
<div id="root">
<Main used-at="//localhost:3001/src/components/common/page.tsx:22:26">
<!-- 完整的组件层级... -->
<!-- IMPORTANT: selected element -->
<img class="h-10 w-auto" data-component-path="src/page/login/index..."
data-component-line="157" ...>
</img>
</Main>
</div>
</selected_element>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
<script
src="//unpkg.com/react-grab/dist/index.global.js"
crossorigin="anonymous"
data-enabled="true"
></script>就这样，没了。刷新页面就能用。
方式二：Next.js App Router
在 app/layout.tsx 里加：
javascript
import Script from 'next/script';
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<head>
{process.env.NODE_ENV === 'development' && (
<Script
src="//unpkg.com/react-grab/dist/index.global.js"
crossOrigin="anonymous"
data-enabled="true"
strategy="afterInteractive"
/>
)}
</head>
<body>{children}</body>
</html>
);
}注意那个 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 (
<Html>
<Head>
{process.env.NODE_ENV === 'development' && (
<script
src="//unpkg.com/react-grab/dist/index.global.js"
crossOrigin="anonymous"
data-enabled="true"
/>
)}
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}方式四：Vite 项目
先装包：
csharp
npm install react-grab
# 或者
pnpm add react-grab
# 或者
yarn add react-grab然后在 index.html 里加：
xml
<script type="module">
if (import.meta.env.DEV) {
import('react-grab');
}
</script>同样，import.meta.env.DEV 确保只在开发时加载。
装完怎么用？
- 启动项目 -
npm run dev - 打开浏览器 - 访问你的应用
- 按住快捷键 -
⌘C（Mac）或Ctrl+C（Windows） - 移动鼠标 - 你会看到元素被高亮
- 点击 - 信息自动复制
- 粘贴给 AI - 开始愉快地改代码