给 AI 用的 React 调试小工具：选中节点即可精准定位源码行号复制给 AI

最近在用 AI 改前端时，我反复遇到一个问题：

页面上“想改的区域”很难一次说清楚，
经常需要多轮确认“到底是哪个节点、哪个组件、哪一行”。

所以我做了一个小工具：
https://github.com/linhay/react-debug-inspector

它解决什么问题？

把“视觉区域描述”变成“可执行的源码定位信息”。

选中页面元素后，可以直接拿到： 文件路径:组件名:标签:行号

例如： src/components/Button.tsx:Button:button:42

这样你把这串信息丢给 AI ，它就能更快、更准地改到你要的位置。

使用流程

1. 开启检查模式（右下角按钮）
2. 鼠标悬停/点击目标节点
3. 一键复制定位信息（或文案/图片/完整上下文）
4. 粘贴给 AI ，开始定向修改

流程：开启 bug 模式 -> 选节点 -> 丢给 AI 开始定向许愿

适用场景

• UI 微调（间距、颜色、字体、对齐）
• 交互修复（按钮状态、弹窗层级、点击区域）
• 多人协作时的“精确定位”沟通
• 给 AI 提需求时减少来回确认成本

设计原则

• 开发环境可用，生产构建可剔除
• 尽量零侵入（通过插件注入调试标识）
• 面向真实协作链路，不是“只看不改”的演示型工具

在线体验：
https://linhay.github.io/react-debug-inspector/

欢迎拍砖，尤其想听听大家在“AI + 前端协作定位”这块还有哪些痛点。