Vibe Coding 快速定位源码新方式

传统方法

之前我们用截图给 AI 看 UI 界面来定位 bug，虽然能用，但效率不高：

1. AI 要先理解图片内容
2. 再根据关键词在代码库里搜索
3. 最后才能修改代码

整个过程可能要花好几分钟，而且还容易找错位置。

更好的解决方案：code-inspector-plugin

这是一个能直接定位 UI 源代码位置的插件，支持几乎所有主流前端框架：

• ✅ Vue2 / Vue3 / Nuxt
• ✅ React / Next.js / UmiJS
• ✅ Svelte / Solid / Qwik 等

快速上手

以 React + Vite 项目为例：

1. 安装插件

npm i code-inspector-plugin -D

2. 配置 vite.config.js

import { defineConfig } from 'vite';
import { codeInspectorPlugin } from 'code-inspector-plugin';

export default defineConfig({
    plugins: [
        codeInspectorPlugin({
            bundler: 'vite',
        }),
    ],
});

3. 开始使用

按住 Option + Shift（Mac）或 Alt + Shift（Windows），鼠标悬浮在页面元素上，点击就能跳转到对应的源代码位置！

原理很简单

插件会在生成的网页代码里给每个元素加上 data-insp-path 属性，记录源代码的文件路径和行列号。点击时就用默认编辑器打开对应文件。

Claude Code 专属增强版

考虑到很多人现在用 Claude Code 做 Vibe Coding，不需要打开编辑器，这里有一个增强版：

新增功能：

• 悬浮球切换模式：在 IDE 中打开 / 复制路径
• 一键复制文件路径，直接 @ 给 AI

安装方式：

npm i @neurora/code-inspector -D

// vite.config.js
import { defineConfig } from 'vite';
import { CodeInspectorPlugin } from '@neurora/code-inspector';

export default defineConfig({
    plugins: [
        CodeInspectorPlugin({
            bundler: 'vite',
            showSwitch: true, // 显示切换按钮
            copy: true, // 默认启用复制模式
        }),
    ],
});

项目地址：MarkShawn2020/code-inspector

注意事项

这个插件仅适用于前端项目，而且需要基于打包器（如 Vite、Webpack 等）。纯 HTML 项目无法使用。