给 AI 用的 React 调试小工具：选中节点即可精准定位源码行号复制给 AI
最近在用 AI 改前端时，我反复遇到一个问题：
页面上“想改的区域”很难一次说清楚，
经常需要多轮确认“到底是哪个节点、哪个组件、哪一行”。
所以我做了一个小工具：
https://github.com/linhay/react-debug-inspector
它解决什么问题？
把“视觉区域描述”变成“可执行的源码定位信息”。
选中页面元素后，可以直接拿到：
例如：
这样你把这串信息丢给 AI ，它就能更快、更准地改到你要的位置。
使用流程
1. 开启检查模式（右下角按钮）
2. 鼠标悬停/点击目标节点
3. 一键复制定位信息（或文案/图片/完整上下文）
4. 粘贴给 AI ，开始定向修改
流程：
适用场景
● UI 微调（间距、颜色、字体、对齐）
● 交互修复（按钮状态、弹窗层级、点击区域）
● 多人协作时的“精确定位”沟通
● 给 AI 提需求时减少来回确认成本
设计原则
● 开发环境可用，生产构建可剔除
● 尽量零侵入（通过插件注入调试标识）
● 面向真实协作链路，不是“只看不改”的演示型工具
在线体验：
https://linhay.github.io/react-debug-inspector/
欢迎拍砖，尤其想听听大家在“AI + 前端协作定位”这块还有哪些痛点。
via V2EX - 技术 (author: linhey)
最近在用 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 + 前端协作定位”这块还有哪些痛点。
via V2EX - 技术 (author: linhey)
