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

Aperta
  • Qualcosa non va?
#416 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
5/5
Tempo stimato
Più di una settimana
Idoneità per principianti
25/100
Tipo di issue
Documentazione
Chiarezza
Da chiarire
Stato di attività
Ferma
Stack tecnologico
javascript
Ambito
content

Direzione di ricerca

The issue body is a Chinese article about JavaScript debugging techniques, but it names no repository file, test, or requested change. Start by confirming whether the article should be published and where; done requires an agreed destination and editorial scope.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

资深前端都在用的 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 个日志时，不用再猜测哪个日志对应哪个变量。

console.log 输出示例

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);

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

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

console.table 输出示例

3. 技巧 3：console.trace()

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

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

  innerFn();
}

processPayment(20);

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

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

console.trace 输出示例

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

不要这样写 ❌ ：

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

现在这样写 ✅ ：

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

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

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

console.assert 输出示例

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()。

console.group 输出示例

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

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

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

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

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

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

console.dir 输出示例

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 干货。

Lingua principale
Nessun dato sulla lingua
Stelle
31.1k
Fork
4.6k
Nessuna PR unita negli ultimi 30g

Preparare l'ambiente

Questo progetto non fornisce container di sviluppo, Dockerfile né guida per i contributori, quindi l'ambiente è a tuo carico: parti dal suo README e consulta la nostra guida al primo contributo per i passaggi generali.

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di mqyqingfeng/Blog

Tutte le issue di mqyqingfeng/Blog

Issue simili

Altre issue su Content

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.