如何像资深开发者一样调试 JavaScript
不要再用 console.log 解决所有问题了。你每周都在浪费大量时间。
我花了 8 年时间修复生产环境问题。这套工作流可以将调试时间缩短 60%。
| 工具 | 使用场景 | 节省的时间 |
|---|---|---|
| Chrome DevTools Sources | 单步调试 (Step-through debugging) | 40% |
| Conditional Breakpoints | 在循环中缩小 Bug 范围 | 25% |
| Performance Panel | 查找渲染瓶颈 | 35% |
| Network Panel | API 时序问题 | 30% |
| Console.assert | 及早捕获逻辑错误 | 15% |
不要到处乱撒日志。改用以下方法。
使用条件断点 (Conditional Breakpoints) 打开 DevTools 的 Sources 面板。点击行号设置断点。右键点击该断点并选择 Edit breakpoint。添加一个条件。只有当条件为真时，调试器才会停止。这在处理大型循环时可以节省数小时。
研究调用栈 (Call Stack) 当调试器暂停时，查看 Call Stack 面板。它会显示导致 Bug 的调用路径。右键点击一个堆栈帧 (frame) 并选择 Copy stack trace 以将其保存。
使用日志点 (Log Points) 如果你想在不停止代码运行的情况下输出信息，请使用 Log points。右键点击行号并选择 Add log point。这不会修改你的源代码。关闭 DevTools 后，它们会自动消失。
使用 Performance 面板修复应用卡顿 打开 Performance 标签页。点击 Record。在页面上操作 5 秒钟。停止录制。在 Main 线程中寻找超过 50ms 的长任务 (long tasks)。这能揭示布局 (layout) 和绘制 (painting) 问题。
检查 Network 面板 检查 Waterfall 视图。红色或紫色的条表示请求被阻塞。较大的间隙意味着 JavaScript 正在阻塞主线程。右键点击一个请求并选择 Copy as cURL，以便在终端中测试 API 问题。
你的调试清单：
- 设置条件断点
- 查看 Call Stack 以了解执行路径
- 使用 Scope 面板查看局部变量
- 添加日志点以监控数值
- 录制 Performance profile 以排查耗时问题
- 检查 Network 面板以排查 API 问题
掌握这套工作流大约需要两周时间。这是你职业生涯中提升生产力的最佳升级。你的浏览器已经内置了这些工具。请充分利用它们。
Source: https://dev.to/kui_luo/how-to-debug-javascript-like-a-senior-developer-in-2025-3d0p