· 开发工具 · HTML
DevLite 深度解读 - 不学 DevTools,直接改页面、诊断问题、生成 Prompt
DevLite 深度解读:无需学习浏览器开发者工具,直接在页面编辑元素、诊断问题,生成结构化 Prompt 交给 AI Agent 生成代码。
DevLite: 不学 DevTools, 直接改页面、诊断问题
Chrome 浏览器扩展。在页面上直接检查元素、实时编辑、统一诊断日志/错误/请求/性能, 然后导出结构化 Prompt 交给 AI Agent 生成代码。支持 Claude Code、Cursor、Codex、Gemini、DeepSeek 等主流 Agent。
背景
浏览器开发者工具 (DevTools) 功能强大但学习曲线陡峭。对于前端初学者、设计师、产品经理来说, 打开 Elements 面板、定位 Network 请求、分析 Performance 录制都存在较高的认知门槛。而当我们发现问题后, 想交给 AI Agent 修复时, 截图往往无法精确传达上下文, 导致 Agent 定位偏差。
DevLite 由 JASON-QWeb 开发, 于 2026 年 6 月 21 日发布 v0.1.1。项目的核心理念是: 让任何人在页面上直接完成"检查 - 编辑 - 诊断 - 导出 Prompt"的完整闭环, 无需学习传统 DevTools。
前后对比
没有 DevLite
- DevTools 学习成本高, 新手难以上手
- 无法在页面上直接编辑文本/图片/样式
- 设计问题只能通过截图传达给 Agent, 容易产生定位偏差
- 日志/网络请求/性能问题分散在多个面板, 收集线索耗时
使用 DevLite
- 打开页面即可检查元素、查看问题、获取诊断信息
- 选中页面元素实时编辑, 即时预览效果
- 自动收集页面元素/编辑记录/上下文, 导出结构化 Prompt
- 日志/错误/请求状态/Promise 异常/性能指标统一视图, 一键复制
核心功能
inspect 页面元素检查
在页面上直接点击查看任意元素的 DOM 结构、样式、位置信息, 无需打开 DevTools Elements 面板。
edit 实时可视化编辑
选中文本/图片/样式后直接修改, 页面即时预览效果。编辑记录自动收集, 可导出给 Agent。
diagnose 统一诊断面板
日志、JS 错误、网络请求状态、Promise 异常、性能指标集中在一个面板中查看, 关键信息一键复制。
export 结构化 Prompt 导出
自动整理页面元素、编辑记录、错误信息、性能数据, 生成结构化 Prompt 供 Agent 直接消费。
工作流
inspect // edit // diagnose // export // agent fix
安装
# 从源码构建
git clone https://github.com/JASON-QWeb/DevLite.git
cd DevLite
npm install
npm run build
# 在浏览器中加载 dist/ 目录为未打包扩展
# 或安装 Agent SKILL
Read https://github.com/JASON-QWeb/DevLite/blob/main/SKILL.md and install the SKILL6 类运行时证据
DevLite 导出的 Prompt 包含 6 类结构化数据, 供 Agent 精确定位问题:
Agent 集成
DevLite 导出的 Prompt 兼容所有主流编码 Agent。Agent 通过 SKILL.md 学习如何解释运行时证据并定位源码:
Agent 工作流
SKILL.md 教导 Agent 执行 6 步处理流程:
Agent SKILL 六步处理流程
使用场景
推荐
- 前端初学者快速定位和修改页面元素
- 设计师直接调整样式后导出修改给开发
- 将页面问题精确传达给 AI Agent 修复
- 统一查看日志/错误/性能, 快速诊断
- 文案/图片替换后生成修复代码
- 配合 Claude Code/Cursor 等 Agent 使用
局限
- 目前仅支持 Chrome (Edge 即将推出)
- v0.1.1 早期版本, 功能仍在迭代
- 复杂 SPA 路由追踪可能不完整
- 需要手动加载为未打包扩展 (开发模式)
- 暂不支持移动端浏览器调试
- Agent 源码定位准确性取决于项目结构
评分
局限与注意
早期版本
v0.1.1 是首个公开版本, 功能和稳定性仍在快速迭代中, 不建议用于生产环境关键调试。
浏览器限制
目前仅支持 Chrome 浏览器, Edge 版本即将推出。暂不支持 Firefox 或 Safari。
源码定位
Agent 根据浏览器证据定位源码的准确性取决于项目代码结构和命名规范, 复杂场景可能需要手动确认。
安装方式
当前需要手动构建并加载为未打包扩展, Chrome Web Store 版本即将上线。
FAQ
DevLite 能替代 DevTools 吗?
DevLite 不是 DevTools 的替代品, 而是降低入门门槛的辅助工具。它聚焦于"检查-编辑-诊断-导出"这个高频子集, 对于复杂调试 (如断点、内存分析、覆盖率) 仍需要 DevTools。
导出的 Prompt 格式是什么?
DevLite 导出结构化数据, 包含页面 URL、视口、元素编辑记录、错误信息、性能指标等。具体格式在 SKILL.md 中定义, Agent 可据此解释并定位源码。
支持哪些 AI Agent?
兼容所有主流编码 Agent: Claude Code、Cursor、Codex、Gemini、DeepSeek、Kimi、MiniMax、GLM、Qwen 等。通过安装 SKILL.md 可增强 Agent 对 DevLite 导出的理解能力。
数据会上传到云端吗?
DevLite 作为浏览器扩展运行, 所有操作在本地完成。导出的 Prompt 由用户手动复制给 Agent, 不会自动上传任何数据。