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

查看 11|回复 0
作者:linhey   
最近在用 AI 改前端时,我反复遇到一个问题:
页面上“想改的区域”很难一次说清楚,
经常需要多轮确认“到底是哪个节点、哪个组件、哪一行”。
所以我做了一个小工具:
https://github.com/linhay/react-debug-inspector
它解决什么问题?
把“视觉区域描述”变成“可执行的源码定位信息”。
选中页面元素后,可以直接拿到:
文件路径:组件名:标签:行号
例如:
src/components/Button.tsx:Button:button:42
这样你把这串信息丢给 AI ,它就能更快、更准地改到你要的位置。
使用流程
[ol]
  • 开启检查模式(右下角按钮)
  • 鼠标悬停/点击目标节点
  • 一键复制定位信息(或文案/图片/完整上下文)
  • 粘贴给 AI ,开始定向修改
    [/ol]
    流程:开启 bug 模式 -> 选节点 -> 丢给 AI 开始定向许愿
    适用场景
  • UI 微调(间距、颜色、字体、对齐)
  • 交互修复(按钮状态、弹窗层级、点击区域)
  • 多人协作时的“精确定位”沟通
  • 给 AI 提需求时减少来回确认成本

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

    在线体验:
    https://linhay.github.io/react-debug-inspector/
    欢迎拍砖,尤其想听听大家在“AI + 前端协作定位”这块还有哪些痛点。
  • 您需要登录后才可以回帖 登录 | 立即注册

    返回顶部