资深前端都在用的 9 个调试偏方

1. 技巧 1：计算属性名

不要这样写 ❌ ：

javascript 复制代码

const user = { name: "Alice", age: 30 };
const product = { id: 123, price: 49.99 };

console.log("user", user);
console.log("product", product);

现在这样写 ✅ ：

javascript 复制代码

console.log({ user, product });

使用 ES6 简写对象语法会将你的变量包装在一个对象中，这样你可以在控制台中立即看到变量名和它的值。当你有 20 个日志时，不用再猜测哪个日志对应哪个变量。

2. 技巧 2：console.table()

当你处理对象数组时，console.log 几乎毫无用处。

试试这个 ✅：

javascript 复制代码

const users = [
  { name: "Alice", age: 30, role: "Admin" },
  { name: "Bob", age: 25, role: "User" },
  { name: "Charlie", age: 35, role: "Moderator" },
];

console.table(users);

这会在浏览器控制台中渲染一个漂亮的、可排序的表格。

你可以点击列标题进行排序，它比嵌套对象更易读。

3. 技巧 3：console.trace()

当你发现一个函数被多处调用，却不知道具体执行路径时：

javascript 复制代码

function processPayment(amount) {
  function innerFn() {
    console.trace("Payment processing started");
  }

  innerFn();
}

processPayment(20);

console.trace() 会打印完整的调用堆栈，向你展示代码到达该点的确切路径。

当调试一个可能从 5 个不同地方调用的函数时，这很有用。

4. 技巧 4：条件断点 console.assert()

不要这样写 ❌ ：

javascript 复制代码

if (user.age < 18) {
  console.log("Underage user detected!");
}

现在这样写 ✅ ：

javascript 复制代码

console.assert(user.age >= 18, "Underage user detected!", user);

只有当断言失败（条件为 false）时，它才会记录日志。

代码更简洁，控制台噪音更少，而且它会自动包含实际数据。

5. 技巧 5：性能监控器 console.time()

想知道操作花了多少时间，这样写：

javascript 复制代码

console.time("API Call");

fetch("https://api.example.com/data")
  .then((response) => response.json())
  .then((data) => {
    console.timeEnd("API Call");
    return data;
  });

console.timeEnd("API Call");

这能告诉你 console.time() 和 console.timeEnd() 之间经过了多少毫秒。我经常用它来比较不同的实现或寻找性能瓶颈。

输出：

plaintext 复制代码

API Call: 342.87ms

6. 技巧 6：样式化日志

让你重要的日志无法被忽视：

javascript 复制代码

console.log("%c CRITICAL ERROR", "color: red; font-size: 20px; font-weight: bold; background: yellow; padding: 10px;");

你可以使用 %c 为控制台日志添加 CSS 样式。这非常适合：

需要立即关注的错误状态
开发中的成功消息
分隔复杂的调试输出

7. 技巧 7：分组整理 console.group()

调试信息太多太乱？你可以将它们分组：

javascript 复制代码

console.group("User Authentication");
console.log("Checking credentials...");
console.log("Token:", token);
console.log("Validating...");
console.groupEnd();

console.group("API Response");
console.log("Status:", response.status);
console.log("Data:", response.data);
console.groupEnd();

这会在控制台中创建可折叠的分组，让你在大量调试输出中导航变得更加容易。

如果希望分组默认收起，可以使用 console.groupCollapsed()。

8. 技巧 8：对象深度探索 console.dir()

对于 DOM 元素或具有特殊属性的对象：

javascript 复制代码

const element = document.querySelector("#myButton");

console.log(element); // 显示 HTML 结构
console.dir(element); // 显示对象的属性和方法

console.dir() 显示对象属性的交互式列表，

当你想要检查方法和属性而不是 HTML 结构时，这特别适用于 DOM 元素。

9. 技巧 9：日志级别

别再所有事情都用 console.log()。

JavaScript 给你不同的日志级别是有原因的：

javascript 复制代码

console.log("Regular information"); // 普通信息
console.info("ℹ️ User logged in"); // 信息提示
console.warn("⚠️ API rate limit at 80%"); // 警告
console.error("❌ Payment failed"); // 错误
console.debug(" Variable state:", x); // 调试信息

现代浏览器的 DevTools 允许你按日志级别过滤。

在生产环境调试时，你可以隐藏所有的 console.log 和 console.debug 语句，只查看警告和错误。

这样能让关键问题在大量的调试输出中不会被忽略。

最后

正确的调试技巧可以为你节省数小时的试错时间。

掌握这些工具，你将减少添加日志的时间，增加实际修复 bug 的时间。

我是冴羽，10 年笔耕不辍，专注前端领域，更新了 10+ 系列、300+ 篇原创技术文章，翻译过 Svelte、Solid.js、TypeScript 文档，著有小册《Next.js 开发指南》、《Svelte 开发指南》、《Astro 实战指南》。

欢迎围观我的"网页版朋友圈"，关注我的公众号：冴羽（或搜索 yayujs），每天分享前端知识、AI 干货。