theORQL

theORQL是一款专为前端开发设计的AI编程工具，核心功能是打通浏览器与开发环境的实时数据流，通过视觉感知技术捕获DOM结构、CSS样式、网络请求及控制台日志等运行时状态，实现“UI元素到源码”的精准映射。其核心创新在于提供“自动复现-修复-验证”闭环：AI可脚本化复现前端Bug，注入修复方案后直接在浏览器中验证效果，并生成可直接提交的代码差异（diff），显著降低调试成本，尤其适合解决交互类问题及样式异常。

功能特点

1. 运行时全景捕获：实时同步浏览器中的DOM树、计算样式、网络请求及控制台日志，AI可“看见”页面真实渲染结果。
2. UI-代码精准映射：点击界面元素可直接定位到对应组件源码，无需手动搜索文件树，支持Vue/React等主流框架。
3. 自动复现与修复：AI自动生成复现Bug的操作序列，注入修复代码后循环验证，直至问题解决。
4. IDE实时同步：与VS Code/Cursor双向联动，修复方案自动生成可审查的diff，减少上下文切换。
5. 生产环境监控：聚合浏览器崩溃、部署失败、CI报错等信息，提供全链路问题追踪视图。

优缺点

优点：

• 调试效率高：告别“盲调”，AI直接定位问题根源，减少重复尝试。
• 闭环验证：修复方案在真实浏览器中验证，避免逻辑错误。
• 学习成本低：可视化操作降低前端调试门槛，适合新手。

缺点：

• 依赖浏览器环境：需配合Chrome DevTools使用，无法直接调试移动端或服务端代码。
• 复杂交互限制：对涉及多页面跳转或外部API的Bug，复现脚本可能需手动调整。
• 社区生态待完善：作为新兴工具，插件和模板数量较少。

主要应用场景

1. UI样式调试：快速定位元素显示异常（如布局错乱、样式冲突），AI直接建议CSS修复方案。
2. 交互Bug修复：解决用户点击无响应、状态未更新等问题，自动复现操作序列并修复事件逻辑。
3. 生产问题排查：聚合浏览器崩溃日志、Vercel部署错误等信息，快速追溯跨环节故障。
4. 代码教学演示：可视化展示“代码修改→运行时变化”的因果关系，辅助编程教学。
5. 跨设备适配：捕获不同视口下的渲染结果，验证响应式布局兼容性。

使用方法

1. 安装插件：根据编辑器选择VS Code或Cursor版本，完成账号注册。
2. 连接浏览器：在Chrome中打开目标应用（如本地开发服务器），theORQL自动捕获运行时状态。
3. 调试元素：点击页面任意元素，IDE自动跳转到对应组件代码，AI分析潜在问题。
4. 自动修复：通过“Auto Repro→Fix”循环生成修复方案，在浏览器中验证效果。
5. 同步代码：验证通过的修复方案自动生成diff，一键提交至代码仓库。

收费标准

theORQL目前提供免费版本，支持基础调试功能，无请求次数限制。企业版或高级功能（如私有化部署、高级安全扫描）的定价需通过官网联系销售团队获取，暂未公开具体套餐。