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

请不要在回答技术问题时复制粘贴 AI 生成的内容

This topic created in 55 days ago, the information mentioned may be changed or developed.

最近在用 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 + 前端协作定位”这块还有哪些痛点。

调试

定位

9 replies 2026-03-20 10:07:46 +08:00

aojunhao123

Mar 18

你造的这个轮子有什么是它不能满足或者你做的更好的吗： https://github.com/aidenybai/react-grab

linhey

Mar 18 via iPhone

@aojunhao123 哈哈，之前不知道有这个库，我试试先

Chuckle

Mar 19

最近刚好也需要个从页面元素定位到源码的方案，为的也是 AI 能知道要改哪里、影响范围评估等等。
umi+qiankun 微前端，要改的东西都在独立包里，app 工程就是个页面入口，有时候套快 5 层包人找起来很麻烦，本地只跑 app 的 source map 也没用，安装的包产物都是服务器构建出来的，构建时在节点上注入大量信息也不太行，除非每个包都构建两个版本，构建生产 app 用的和开发时带信息的产物。
我现在做法是提取 dom 特征节点（还是有注入一些特殊属性的）、url 路径等元信息，克隆所有的几百个包到本地，让 AI 自己先暴力找，确实能找到，就是慢，也费 token 。优化的话，找到了就把信息落向量数据库里，类似 RAG 一样，特征信息变动还是少的，特征节点嵌套结构也稳定，下次找就快了，至少能快速找到对应包工程，再去定位具体代码。
不过，如果从 React 本身入手，模仿 React Scan 运行时注入应该更好？
另外 AI 写代码确实好用，就是测试起来太麻烦了，很难自闭环，业务链路长又大，e2e 测试的时候没数据，或者接口报错，AI 能自己 call 后端，或者自己造、自己修（

Chuckle

Mar 19

@Chuckle 只改 app 的构建，能做到给安装的依赖包产物里的组件加上 data-***的额外信息么

linhey

Mar 19 via iPhone

@Chuckle 我这个原理就是在编译时给节点注入 debug-data 属性，是作为 vite 或者 babel 插件来执行注入的

linhey

Mar 19 via iPhone

@Chuckle 我的场景是不看 AI 写的代码，只验收(纯 vibe)

Chuckle

Mar 19

@linhey #5 组件在依赖包里怎么办，发到生产包的总不能编译时注入 debug-data 属性吧

linhey

Mar 19

@Chuckle https://github.com/linhay/react-debug-inspector/blob/main/docs-dev/dev/dependency-components-debug-locate.md
把这个丢给 AI 试试

Chuckle

Mar 20

@linhey #8 看了，我们一个微前端 app 入口 50 多个依赖包，依赖包还有依赖包，业务组件都是封装抽离的，构建注入这套不现实，在看 bippy 动态注入的方案了