“程序员最常用的调试语句是什么？
console.log('here')。” —— 每个Debug到崩溃的开发者
大家好，相信各位在掘金社区看过无数深入原理的硬核文章。今天，我们来点“实用主义”的，分享几个能立刻上手、极大提升你日常Debug效率的JavaScript调试技巧。告别console.log海战术，让你的调试过程更优雅、更专业！
一、浏览器DevTools：你的最强盟友，不止于断点
1. 条件断点（Conditional Breakpoint）：精准打击Bug
当你循环1000次，但Bug只在第599次出现时，难道要手动跳过598次？不！
- 怎么做： 在源代码行号上右键 -> “Add conditional breakpoint...”。
- 示例： 在循环体内设置条件
i === 599。 - 效果： 程序会自动在第599次循环时暂停，实现精准拦截。
2. 日志点（Logpoint）：无侵入式打印
既想看到变量值，又不想污染代码（写一堆console.log再删掉）？日志点完美解决。
- 怎么做： 行号右键 -> “Add logpoint...”。直接输入你想打印的表达式，如
"current value:", x。 - 效果： 程序执行到该行时，值会直接打印到控制台，但源代码纹丝不动！非常适合生产环境调试。
大厂机会
想选一个大厂作为跳板，作为自己镀金机会的，尤其是看【上海】【深圳】等→机会的朋友，前端-测试-后端！待遇薪酬还不错，尽管来！
二、console对象の逆天操作，你还在用.log吗？
console对象的能力远超你的想象。
1. console.table()：可视化打印对象数组
遇到结构复杂的数组或对象，.log的输出简直没法看。
- 示例：
console.table(usersArray); - 效果： 数据会自动以清晰、可排序的表格形式呈现，一目了然。
2. console.time() 和 console.timeEnd()：性能分析利器
快速测量一段代码的执行时间，定位性能瓶颈。
-
示例：
javascript
console.time('myFunction'); myExpensiveFunction(); // 你要测量的函数 console.timeEnd('myFunction'); // 控制台输出: myFunction: 256.5ms
3. console.assert()：条件断言打印
只在条件为假时打印错误信息，避免无效输出刷屏。
- 示例：
console.assert(result.status === 200, 'Request failed!', result);
三、debugger语句：代码里的“陷阱”
在代码中直接插入debugger;语句。
- 效果： 当浏览器DevTools打开时，代码执行到这一行会自动暂停，就像在那里打了一个断点。
- 场景： 非常适合在你不方便直接到DevTools中找到源文件打断点时使用（例如，在动态生成的代码或第三方库中）。
总结与建议
| 场景 | 推荐方法 | 优点 |
|---|---|---|
| 查看简单值 | console.log | 简单粗暴 |
| 精准暂停调查 | 条件断点 | 精准、高效 |
| 无侵入打印 | 日志点（Logpoint） | 不污染代码 |
| 查看结构化数据 | console.table() | 清晰直观 |
| 测量代码性能 | console.time() | 快速定位瓶颈 |
调试是程序员的核心技能之一。掌握这些现代、高效的调试方法，不仅能帮你更快地解决Bug，更能体现你的专业素养。从现在开始，尝试在你的下一个项目中运用它们吧！
讨论：
你还有什么私藏的、能极大提升开发效率的“神技”吗？欢迎在评论区分享交流！
——转载自：抹茶酸奶