资深前端都在用的 9 个调试偏方 #416
Description
资深前端都在用的 9 个调试偏方
1. 技巧 1：计算属性名
不要这样写 ❌ ：
const user = { name: "Alice", age: 30 };
const product = { id: 123, price: 49.99 };
console.log("user", user);
console.log("product", product);现在这样写 ✅ ：
console.log({ user, product });使用 ES6 简写对象语法会将你的变量包装在一个对象中，这样你可以在控制台中立即看到变量名和它的值。当你有 20 个日志时，不用再猜测哪个日志对应哪个变量。
2. 技巧 2：console.table()
当你处理对象数组时，console.log 几乎毫无用处。
试试这个 ✅：
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()
当你发现一个函数被多处调用，却不知道具体执行路径时：
function processPayment(amount) {
function innerFn() {
console.trace("Payment processing started");
}
innerFn();
}
processPayment(20);console.trace() 会打印完整的调用堆栈，向你展示代码到达该点的确切路径。
当调试一个可能从 5 个不同地方调用的函数时，这很有用。
4. 技巧 4：条件断点 console.assert()
不要这样写 ❌ ：
if (user.age < 18) {
console.log("Underage user detected!");
}现在这样写 ✅ ：
console.assert(user.age >= 18, "Underage user detected!", user);只有当断言失败（条件为 false）时，它才会记录日志。
代码更简洁，控制台噪音更少，而且它会自动包含实际数据。
5. 技巧 5：性能监控器 console.time()
想知道操作花了多少时间，这样写：
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() 之间经过了多少毫秒。我经常用它来比较不同的实现或寻找性能瓶颈。
输出：
API Call: 342.87ms
6. 技巧 6：样式化日志
让你重要的日志无法被忽视：
console.log("%c CRITICAL ERROR", "color: red; font-size: 20px; font-weight: bold; background: yellow; padding: 10px;");你可以使用 %c 为控制台日志添加 CSS 样式。这非常适合：
-
需要立即关注的错误状态
-
开发中的成功消息
-
分隔复杂的调试输出
7. 技巧 7：分组整理 console.group()
调试信息太多太乱？你可以将它们分组：
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 元素或具有特殊属性的对象：
const element = document.querySelector("#myButton");
console.log(element); // 显示 HTML 结构
console.dir(element); // 显示对象的属性和方法console.dir() 显示对象属性的交互式列表，
当你想要检查方法和属性而不是 HTML 结构时，这特别适用于 DOM 元素。
9. 技巧 9：日志级别
别再所有事情都用 console.log()。
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 干货。