让调试变成艺术！掌握 Console.log 的 12 种花式玩法

调试代码是每个开发者的日常，而 console.log 可能是你最熟悉的工具之一。它简单好用，却也常常被我们低估。但其实，它是一个功能强大且充满潜力的“瑞士军刀”，只需稍加发掘，你就能用它解决更多问题、提升工作效率。

在本文中，我们将介绍 12 种 console.log 的花式玩法，助你从调试“小白”进阶成调试“大师”，甚至让输出日志变成一种艺术！

---

1. 巧用占位符，格式化你的输出

你是否曾为拼接字符串烦恼？console.log 的占位符让这一切变得简单。

const name = "Alice";
const age = 25;
console.log("Hello, my name is %s and I am %d years old.", name, age);
// 输出: Hello, my name is Alice and I am 25 years old.

使用 %s、%d、%o，让你的日志更加简洁明了。

---

2. 数据分组，理清输出层次

面对冗杂的日志，不妨尝试分组功能。

console.group("User Details");
console.log("Name: Alice");
console.log("Age: 25");
console.group("Address");
console.log("City: New York");
console.log("Zip: 10001");
console.groupEnd();
console.groupEnd();

输出层次分明，阅读起来清晰无比。

---

3. 玩转样式，让日志更“吸睛”

用 %c 给你的日志“穿衣打扮”，让它从一堆输出中脱颖而出！

console.log("%cStylish Text", "color: blue; font-size: 16px; background: yellow; padding: 2px 5px;");

一个简单的样式，就能让你的调试过程充满乐趣。

---

4. 表格输出，轻松查看数据

在调试数组或对象时，console.table 是你的好帮手。

const users = [
  { name: "Alice", age: 25 },
  { name: "Bob", age: 30 },
];
console.table(users);

结构化的数据一目了然，再也不用盯着乱糟糟的 JSON 发愁了！

---

5. 记录时间，优化代码性能

使用 console.time 测量代码执行时间，锁定性能瓶颈。

console.time("Loop Timer");
for (let i = 0; i < 1000000; i++) {} // 大量循环
console.timeEnd("Loop Timer");
// 输出: Loop Timer: X ms

无论是优化算法还是分析性能，这都非常实用。

6. 条件断言，精准捕捉问题

console.assert 在条件为 false 时输出日志，轻松找到潜在问题。

const value = 5;
console.assert(value > 10, "Value is less than 10!");
// 输出: Assertion failed: Value is less than 10!

省去不必要的日志干扰，调试过程更加高效。

---

7. 调用堆栈，一键追踪来源

console.trace 能显示函数的调用堆栈，是定位复杂问题的利器。

function first() {
  second();
}
function second() {
  third();
}
function third() {
  console.trace("Trace here!");
}
first();

快速定位代码执行路径，不再迷路。

---

8. 清空控制台，保持界面整洁

用 console.clear 清空历史输出，保持你的工作环境一尘不染。

---

9. 警告与错误，日志分级管理

通过 console.warn 和 console.error 标记日志的严重性，直击关键问题。

console.warn("This is a warning!");
console.error("This is an error!");

---

10. 展示对象的详细属性

console.dir 可以展示对象的完整属性，非常适合调试 DOM 节点。

console.dir(document.body);

---

11. 自定义标签，个性化日志

为你的日志添加醒目的标签，区分不同模块的输出。

const tag = "[DEBUG]";
console.log(`%c${tag}`, "color: green;", "This is a debug message.");

---

12. 计数日志，统计执行频次

用 console.count 和 console.countReset，轻松统计函数调用次数。

function test() {
  console.count("Test function called");
}
test();
test();
console.countReset("Test function called");
test();

结语：从调试到艺术，只差一个 Console.log

从基础到进阶，这些技巧是否让你对 console.log 有了全新的认识？不要再让调试变成枯燥的重复劳动，利用这些“花式玩法”，让你的日志更高效、更有趣！

快在项目中试试这些技巧吧，你一定会爱上这种调试的感觉！ 🎉