调试 5 个真实世界的 Bug：不使用 Console.log 的实用演练

Source: Dev.to

介绍

作为前端开发者，我不断与两类 bug 作斗争：

• 运行时可见的 bug – 它们会在控制台弹出并破坏 UI。
• 静默 bug – 它们不抛出错误，但应用表现异常。

这两者都是噩梦。正因如此，我与 theORQL 团队合作，尝试他们的 AI 驱动运行时调试器。在与创始人进行了一次精彩的交流（更多信息请见此处）后，我录制了一段逐步演示视频，展示该工具的实际工作方式。

在 AI 时代，你如何进行调试？
在 YouTube 上观看完整视频指南（含创始人提示）：[实用视频指南 – 使用 theORQL 调试]

theORQL 的功能

• 在 Chrome 中运行 – 无需切换标签页。
• 将修复同步回 VS Code – 一键差异应用。
• 关联错误 – 网络失败、控制台警告、DOM 异常和堆栈跟踪全部关联在一起。

下面是我在天气应用演示中探索的五个 bug。每个章节包含：

1. Bug 的表现
2. 导致应用出错的原因
3. theORQL 如何识别并修复
4. 短视频片段（点击缩略图查看具体错误）

1️⃣ 雪花纹理未加载

💡 注意: 点击视频查看具体错误。

• 症状: 雪页应该显示飘落的雪花，但页面为空。
• 根本原因: 在 Network 面板中出现对雪花纹理 (snowflake.png) 的 404 错误；控制台提示 TextureLoader.load 失败。
• theORQL 解决方案:
  1. 将空白渲染与请求失败关联。
  2. 高亮代码行 TextureLoader.load('assets/snowflake.src')。
  3. 建议将 URL 更正为正确路径。
  4. 将更改同步到 VS Code，重新加载后雪花出现。

▶️ Snowflake Bug Clip

2️⃣ CalendarPanel 运行时渲染错误

💡 注意： 点击视频查看具体错误。

• 症状： 点击任意日期会触发 React 错误；出现 Next.js 红色覆盖层。
• 根本原因： 在 formatYYYYMMDD 中使用了 null/undefined 的日期值，导致对 undefined 调用了 getFullYear。
• theORQL 解决方案：
  1. 捕获异常及堆栈跟踪。
  2. 指向 formatYYYYMMDD 中的确切行。
  3. 建议在格式化前添加空值检查。
  4. 在 VS Code 中应用差异 → 日历不再崩溃。

▶️ CalendarPanel Bug Clip

3️⃣ 天气服务未授权请求

💡 注意: 点击视频查看具体错误。

• 症状: 所有 API 请求均返回 401/403 错误；天气面板显示错误状态。
• 根本原因: 在 fetch 调用中缺少身份验证头（例如 Authorization: Bearer ）。
• theORQL 解决方案:
  1. 跟踪失败的请求并显示缺失的头部信息。
  2. 高亮 weatherService.js 中的 fetch 调用。
  3. 建议插入所需的头部。
  4. 同步后，请求成功，城市切换正常。

▶️ Auth Header Bug Clip

4️⃣ 日历日期数字不可见

💡 注意: 点击视频查看具体错误。

• 症状: 日历 UI 能渲染，但日期数字不可见（点击仍可选中日期）。没有控制台错误。
• 根本原因: 计算后的样式通过一个多余的 CSS 类将文字隐藏（color: transparent 或 opacity: 0）。
• theORQL 解决方案:
  1. 捕获 DOM 快照，显示文字实际存在但被隐藏。
  2. 指出导致问题的 CSS 规则（.day-label { color: transparent; }）。
  3. 建议删除该规则或将颜色改为可见的颜色。
  4. 应用差异 → 日期变为可见。

▶️ Invisible Dates Bug Clip

5️⃣ Planner 模态框 “Add” 按钮无响应

💡 注: 点击视频查看具体错误。

• 症状: 输入任务可以，但点击 Add（或按回车）没有任何添加。没有控制台错误。
• 根本原因: 组件内部的 draft 状态从未更新，因为 onChange 绑定失效；处理函数得到的是空字符串。
• theORQL 解决方案:
  1. 跟踪点击事件到处理函数，观察状态/值不匹配。
  2. 指出破损的绑定 (value={draft} 缺少正确的 onChange)。
  3. 建议恢复双向绑定。
  4. 同步更改 → 任务即可正确添加。

▶️ Planner Modal Bug Clip

要点

这五类 bug——资源加载失败、运行时异常、身份验证问题、隐藏的 UI，以及沉默的逻辑错误——代表了常见的运行时问题，往往没有明确的控制台输出。

theORQL 的帮助体现在：

• 直接从 Chrome 捕获证据（网络、控制台、DOM、事件）。
• 提供 AI 生成、易于阅读的解释。
• 提供一键 diff，同步到 VS Code。

结果如何？更快、更专注的调试，减少上下文切换。

🎯 想亲自尝试吗？

• 安装 theORQL 的 VS Code 扩展
• 打开 Chrome DevTools，运行调试器，让 AI 完成繁重的工作。

如果你觉得有用，请与社区分享你的 bug 故事！

调试愉快！ 🤓

注意：上面的所有视频链接都是占位符；请将其替换为实际的 YouTube URL。