用途:把 lovinsp 接入现有前端项目,获得开发期点击 DOM 元素跳转源码的能力,并做迁移与验证。仅适用于浏览器渲染的前端项目;纯后端、CLI、库或无 UI 的包不适用。
主要能力:识别构建工具(vite、webpack、esbuild、turbopack、mako);幂等检查是否已集成,已集成时只做版本对比与更新;检测 code-inspector-plugin 或 @aspect/code-inspector-plugin 并迁移到 lovinspPlugin;按 bundler 类型写入构建配置;改完后静态回读并做运行期验证。
使用方式:自然语言触发,例如「装 lovinsp」「集成 lovinsp」「接入点击跳转源码」「从 code-inspector 迁移」。安装依赖使用 pnpm add -D lovinsp 或 npm install -D lovinsp。插件需放在框架插件之前;Next.js with Turbopack 写入 turbopack.rules,Webpack 场景注入 config.plugins。集成完成后 Mac 用 Option + Shift、Windows 用 Alt + Shift 激活检查器,点击 DOM 跳转源码。
验证与限制:Vite 项目在 dev server 已运行时可用 curl -s http://127.0.0.1:<port>/src/main.tsx 回读是否命中 lovinsp-component 或 lovinsp v;未启动 dev server 则跳过,不代为拉起或结束服务。非 vite dev serve 的 build --watch 架构需带 LOVINSP=1 常驻 watch 运行,否则桥服务随进程退出;monorepo 中只有含 vite.config.ts 的层会触发注入。重复执行结果一致、无副作用。文档地址为 https://inspector.fe-dev.cn/en。支持框架与版本等未在本资料中说明的信息暂未提供。