自从前端进入「AI 辅助编程」时代，Claude Code、Cursor、Trae 等工具让写代码的速度有了质的飞跃。但用着用着你会发现，最耗时间的不再是"写"，而是"找" 。想象一个真实场景：产品经理说「把这个按钮改成圆角，顺便调一下点击逻辑」。于是你打开 DevTools 审查元素，复制类名切回编辑器全局搜索，在搜出来的一堆同名文件里逐一排查，终于找到目标组件，再把路径和上下文复制粘贴给 AI 助手……
完成一套操作得花 2 - 3 分钟，复杂项目花费的时间更久。一天改 20 个这样的小需求，光“找代码”就得浪费将近一小时。你在浏览器、DevTools、编辑器、AI 助手这四个工具之间频繁切换，思路不断被打断。为了彻底消除这个流程，我们推出了 Inspecto 。
Inspecto 是什么
Inspecto 是一套 浏览器优先 的前端开发工作流工具。它的核心理念只有一句话：
直接从网页开始，精准识别**源码**，将上下文无缝交给你的 AI 助手。 不需要打开 DevTools，不需要手动搜索文件，不需要复制粘贴上下文。你在页面上点哪里，AI 就知道改哪里。
三大核心模式
一、Quick Jump —— 源码导航神器
这是最轻量的能力，即使你不用 AI 也值得使用。按住 Alt + 点击 网页上的任意元素，编辑器瞬间打开并精确定位到该元素对应的源码行。不需要搜索、不需要猜，告别手动找代码的时代。
适用场景：快速定位 Bug 源码、接手屎山老项目排查组件层级等。
二、Inspect Mode —— 所点即所得，直接 Ask AI
点选网页上的组件，直接呼出 AI ，支持预置指令 + 自定义指令。 开启 Inspect 模式后，直接点击网页上的任意组件，页面会弹出 Inspecto 菜单。Inspecto 会自动收集该组件的详细信息，比如源码位置、组件路径，还有页面运行时错误和 CSS 样式信息等，然后一键发送给你本地的 AI 助手。你还能使用内置指令快速完成常见操作，也可以自定义专属指令来适应团队的工作流程。
适用场景：单点 UI 微调、局部逻辑修复、高频指令处理等。
三、Annotate Mode —— 批量批注，一次性打包给 AI
在页面上圈选多个不同组件写好批注，打包一次性发给 AI 统筹修改。 有时候要改动的地方不止一处。产品一次提出了 5 个 UI 调整需求，这些需求分布在页面的不同位置。要是一个一个地进入 Inspect 模式来处理，效率还是不高。Annotate 模式能让你像在设计图上写评论一样操作：在页面上圈出多个不同的组件，给每个组件分别加上批注，最后一键把这些批注打包发给 AI，让它统一处理所有修改。
批量标注 - 普通模式
批量标注 - 快捷模式
适用场景：页面级重构、UI 走查后的集中修复、多组件联动逻辑调整。
零成本极速接入
我们深知前端工具链的复杂度，所以 Inspecto 做到了极简的 接入 体验。
第一步：进入你的项目根目录。
第二步：根据你使用的 IDE 和 AI 助手，运行对应的安装命令（以当前最热门的三种组合为例）：
🔥 场景 A：VS Code + Claude Code
npx @inspecto-dev/cli integrations install claude-code --scope project --host-ide vscode
🎯 场景 B：Cursor 内置 AI
npx @inspecto-dev/cli integrations install cursor --host-ide cursor
🎯 场景 C：Trae 内置 AI
npx @inspecto-dev/cli integrations install trae --host-ide trae-cn
💡 提示：我们也完美支持 Copilot、Codex 和 Gemini，同时兼容
pnpm/yarn/bun。详细的安装命令和其他作用域配置，请查阅 官方接入文档。
第三步：安装完成后，在 IDE 终端里启动你的应用，打开浏览器即可享用丝滑体验！
广泛的构建工具支持：
Vite、Webpack、Rspack、Rollup、esbuild、Next.js、Nuxt 等主流方案均已适配。构建时自动剥离（Tree-shaking），生产环境零代码注入，通过 Shadow DOM 隔离避免污染业务样式，接入零风险。
🌟 觉得不错？求个 Star 支持！
Inspecto 目前已完全开源，作为一群深受“找代码”折磨的前端开发者，我们希望这款工具能真正帮你每天节省一部分时间。
开源不易，如果 Inspecto 解决了你的痛点，或者你觉得这个设计思路有点意思，欢迎去 GitHub 给我们 点亮一颗 Star ✨！这是对我们最大的鼓励！
更多链接：
- 📖 官方中文文档与接入指南：inspecto-dev.github.io/inspecto/zh…
- 💬 交流反馈：如果有任何新需求、IDE 适配建议或吐槽，欢迎在评论区留言、GitHub Discussions 或者提交 Issue！
