夜雨聆风
能看见浏览器运行时的 AI 前端调试工具
能看见浏览器运行时的 AI 前端调试工具
写前端最痛苦的事情是什么？
不是写代码，而是 调 bug。
明明代码看起来没问题，但页面就是不对劲。最近发现一个挺有意思的工具 —— theORQL，它试图用 AI 彻底解决前端调试的老大难问题。
今天就来聊聊这个号称 “能看见浏览器运行时的 AI 前端调试工具”。
软件简介
theORQL 是一款面向前端开发者的 AI 调试工具，它可以直接读取浏览器运行时的数据，包括：
-
• DOM 结构 -
• CSS 样式 -
• JavaScript 状态 -
• Console 日志 -
• Network 请求 -
• 页面截图
然后通过 AI 自动完成：
-
• Bug复现 -
• 问题定位 -
• 自动修复 -
• 验证结果
简单来说就是：
不只是帮你写代码，而是帮你 找到 bug 并修好它。
theORQL 可以直接集成到开发流程中，比如：
-
• VS Code -
• Cursor -
• Chrome DevTools -
• CI/CD
让前端开发不再需要在多个工具之间反复切换。
软件特点
theORQL 最大的卖点只有一句话：
让 AI 看见浏览器运行时。
传统 AI（比如 Copilot）只能看到代码，但前端问题很多发生在 运行时。
theORQL 的设计就是围绕这个核心。
下面看看它的几个关键能力。
1. UI → 代码精准定位
很多时候你会遇到这种情况：
页面上有个按钮坏了。
但代码里可能有：
-
• 多层组件 -
• 各种 wrapper -
• HOC -
• hooks
想找到真正的组件文件可能要翻十几分钟。
theORQL 的做法很简单：
直接点击 UI 元素。
系统会自动：
-
• 识别 DOM -
• 映射到组件 -
• 定位到源码
相当于：
页面元素
↓
React组件
↓
源码文件定位 bug 速度直接起飞。
2. 捕获浏览器真实运行状态
很多前端 bug 的本质是：
代码没问题，但运行时状态错了。
比如：
-
• state 没更新 -
• CSS 覆盖冲突 -
• DOM 结构变化 -
• 异步请求顺序问题
theORQL 会收集完整运行时信息，包括：
-
• DOM -
• Computed CSS -
• JS 状态 -
• console -
• network
也就是说 AI 分析的不是“猜测”，而是 真实运行环境。
3. 自动复现 Bug（Auto Repro）
调 bug 最烦的一句话就是：
“我这里复现不了。”
theORQL 会自动记录用户操作，比如：
-
• 点击 -
• 输入 -
• 页面跳转 -
• 滚动
然后生成一段自动复现脚本。
例如：
click(button)
type(input)
submit(form)这样每次都可以 稳定复现 bug。
4. 自动修复 Bug
复现 bug 之后，theORQL 会开始干一件很“AI”的事情：
自动尝试修复。
流程大概是：
发现错误
↓
分析原因
↓
生成修复代码
↓
注入浏览器测试
↓
重新执行复现流程如果 bug 还在，它会继续尝试新的方案。
直到问题解决。
5. 自动验证修复
传统 AI 写代码有个问题：
写完就不管了。
theORQL 不一样，它会 反复验证。
完整流程类似这样：
捕获错误
↓
复现问题
↓
生成修复
↓
重新执行
↓
验证是否成功只有当复现流程 完全通过，才会输出最终 patch。
使用流程
theORQL 的使用流程其实非常简单。
第一步：启动你的项目
例如：
http://localhost:3000把地址提供给 theORQL。
第二步：在浏览器调试
在 Chrome 中：
-
• 选择问题元素 -
• 查看 runtime 信息
第三步：自动修复
theORQL 会：
-
• 自动复现 bug -
• 生成修复代码 -
• 同步到 VS Code
开发者只需要 review diff。
总结
简单总结一下 theORQL 的定位：
一个能“看见浏览器”的 AI 前端调试工具。
它解决的核心问题其实只有一个：
前端 bug 发生在运行时，但 AI 只能看到代码。
theORQL 做的事情就是：
把浏览器运行时数据喂给 AI。
于是 AI 才真正能：
-
• 理解 UI -
• 复现问题 -
• 修复 bug
对于经常调 UI 的前端来说，这种工具确实有点香。
毕竟谁不想：
20 分钟的 bug，2 分钟修好。
如果你是前端开发者，可以去试试这个工具：
https://theorql.com说不定以后调 bug 的方式真的会变。