检查模式
点击单个组件，自动附带源码和 DOM 上下文，然后交给当前配置的 AI 链路。
Inspecto点击 UI，直达源码，让 AI 修改。
从浏览器里的真实问题出发，捕获准确组件上下文，交给 AI 助手或 MCP Agent，触发自定义工作流，并在页面里跟进处理进度。
Skip to content
看一看实际效果
为什么选择 Inspecto？
常见前端修复场景
修一个肉眼可见的 UI bug
点击出问题的组件，把准确源码上下文交给 AI，不再手动解释代码在哪里。
处理设计走查意见
一次圈选多个元素，分别写下修改意见，然后创建一个 Agent 任务。
让 MCP Agent 后台处理
在浏览器里创建任务，让 Agent 领取，并在侧边栏查看回复、进度和完成状态。
执行自定义工作流
通过 prompts.json 增加 Deploy Preview 或 Review & PR 按钮，让 Agent 调用自身 skill、MCP server 和 tool 完成任务。
核心工作流
检查模式
点击组件，附带准确上下文，然后交给 AI 助手处理。
标注模式
收集多条 UI 批注，创建一个任务，并在浏览器里跟进 Agent 进度。
快速跳转
按住 Alt + 点击 页面元素，瞬间在编辑器中打开准确的源码位置，告别手动搜索。
丰富的生态集成
什么时候最适合用 Inspecto
- 问题已经出现在浏览器里
- 你想用最短路径进入源码或 AI
- 你希望 Agent 处理 UI 批注，同时能在浏览器里跟进进度
- 你希望把 deploy、review、PR 或 release 变成项目专属按钮
- 你不想继续在多个工具之间复制粘贴
- 你需要准确的上下文但不想手动查代码
第一次使用怎么选
- 先选你正在用的编辑器 / AI 助手，比如 VS Code + Copilot、Cursor 或 Trae。
- 在项目根目录运行一条安装命令，不用先理解 MCP 或 IDE route。
- 重启开发服务并打开浏览器，开始使用检查模式、标注模式或 Alt + Click。
只想源码跳转或只用独立 MCP Agent？进入 快速开始 查看更具体的选择。