最近在用 AI 改前端时，我反复遇到一个问题：
页面上“想改的区域”很难一次说清楚，
经常需要多轮确认“到底是哪个节点、哪个组件、哪一行”。
所以我做了一个小工具：
https://github.com/linhay/react-debug-inspector
它解决什么问题？
把“视觉区域描述”变成“可执行的源码定位信息”。
选中页面元素后，可以直接拿到：
文件路径:组件名:标签:行号
例如：
src/components/Button.tsx:Button:button:42
这样你把这串信息丢给 AI ，它就能更快、更准地改到你要的位置。
使用流程
- 开启检查模式（右下角按钮）
- 鼠标悬停/点击目标节点
- 一键复制定位信息（或文案/图片/完整上下文）
- 粘贴给 AI ，开始定向修改
流程：开启 bug 模式 -> 选节点 -> 丢给 AI 开始定向许愿
适用场景
- UI 微调（间距、颜色、字体、对齐）
- 交互修复（按钮状态、弹窗层级、点击区域）
- 多人协作时的“精确定位”沟通
- 给 AI 提需求时减少来回确认成本
设计原则
- 开发环境可用，生产构建可剔除
- 尽量零侵入（通过插件注入调试标识）
- 面向真实协作链路，不是“只看不改”的演示型工具
在线体验：
https://linhay.github.io/react-debug-inspector/
欢迎拍砖，尤其想听听大家在“AI + 前端协作定位”这块还有哪些痛点。
4 条回复 • 2026-03-19 00:05:31 +08:00
 |
1
aojunhao123 8 小时 43 分钟前
你造的这个轮子有什么是它不能满足或者你做的更好的吗： https://github.com/aidenybai/react-grab
|
 |
2
linhey OP @aojunhao123 哈哈，之前不知道有这个库，我试试先
|
 |
3
Chuckle 3 小时 57 分钟前
最近刚好也需要个从页面元素定位到源码的方案，为的也是 AI 能知道要改哪里、影响范围评估等等。
umi+qiankun 微前端，要改的东西都在独立包里，app 工程就是个页面入口，有时候套快 5 层包人找起来很麻烦，本地只跑 app 的 source map 也没用，安装的包产物都是服务器构建出来的，构建时在节点上注入大量信息也不太行，除非每个包都构建两个版本，构建生产 app 用的 和 开发时带信息的产物。 我现在做法是提取 dom 特征节点（还是有注入一些特殊属性的）、url 路径等元信息，克隆所有的几百个包到本地，让 AI 自己先暴力找，确实能找到，就是慢，也费 token 。优化的话，找到了就把信息落向量数据库里，类似 RAG 一样，特征信息变动还是少的，特征节点嵌套结构也稳定，下次找就快了，至少能快速找到对应包工程，再去定位具体代码。 不过，如果从 React 本身入手，模仿 React Scan 运行时注入应该更好？ 另外 AI 写代码确实好用，就是测试起来太麻烦了，很难自闭环，业务链路长又大，e2e 测试的时候没数据，或者接口报错，AI 能自己 call 后端，或者自己造、自己修（ |
Select Language