Developer essentials: JavaScript console methods title. A vibrant gradient behind artwork of a terminal with some example commands and a keyboard.

开发者必备：JavaScript 控制台方法

作者头像Brian Smith7 分钟阅读

在之前关于 grep 的“开发者必备”文章 "开发者必备：使用 grep 搜索代码" 的基础上，我们将探讨一个你在构建 Web 应用时始终依赖的 API：谦逊的 控制台。控制台是你见证 JavaScript 代码运行的喜悦，以及在只看到神秘错误信息时的悲伤之处。

人们使用控制台记录输出，例如计算结果、REST API 的返回值、字符串操作的结果，以及提醒自己重新审视程序的某个特定部分（例如：TODO: fix）。可能性是无限的。你可以使用控制台输出任何你喜欢的类型的信息。在浏览器中运行 JavaScript 时，控制台日志会显示在浏览器的开发者控制台中。

在本文中，我们将深入了解控制台的功能，以及一些你可能觉得有用或有趣的不为人知的方法。无论你是 Web 开发新手，想学习控制台的用途，还是经验丰富的开发者，你可能都会发现一些你以前不知道存在的方法。让我们从最常用的方法开始，然后逐一探讨其他方法，并提供示例。

登录到控制台

如果你已经熟悉 console.log()，你可以跳到 日志级别，因为我们很快就会介绍基本知识。如果你还在，让我们来学习控制台是什么以及如何使用它。大多数人使用 console.log() 将有关其代码的通用信息发送到控制台，你可以在浏览器的开发者工具中找到它（例如，Firefox 开发者工具）。

**注意：**你可以将下面的所有示例复制粘贴到浏览器的控制台中，亲自尝试一下。

log() 方法是控制台对象的核心：你向 log() 提供一些内容，然后它就会被记录到控制台

js
const hello = "Hi there, welcome to MDN Web Docs!";
console.log(hello);
// Hi there, welcome to MDN Web Docs!

通过使输出可见，可以很好地检查你的代码是否按预期工作，例如，在这个示例中，我正在检查是否正确使用了 DateTimeFormat

js
const currentDate = new Date();
const formattedDate = new Intl.DateTimeFormat("en-US").format(currentDate);
console.log("Current date:", formattedDate);
// "Current date:" "11/28/2023"

你可以在日志中提供多个项目，并应用一些精美的格式化（更多详细信息，请参阅 输出文本到控制台）

js
const currentDate = new Date();
const formattedDate = new Intl.DateTimeFormat("en-US").format(currentDate);

console.log("Today's date is %s", formattedDate);
// Today's date is: 11/29/2023

使用控制台进行交互也很有趣，因为大多数浏览器都支持自动完成功能，可以让你使用 Tab 键遍历建议。如果你不知道要记录什么，请键入 console.log(window.（或任何其他对象），并让浏览器建议一些有趣的功能，例如 navigator

js
console.log(window.navigator.oscpu);
// Intel Mac OS X 10.15

不过，不要忘记在发布代码之前从代码中删除多余的 console.log() 调用！从生产应用程序中删除开发日志是良好的实践。

使用 info、warn 和 error 记录日志级别

你可以使用 console.info()、console.warn() 和 console.error() 方法，添加更多有意义的日志，并使用 info、warn 和 error 级别。

效果与 console.log() 相似，但输出格式不同（取决于浏览器），通常你可以按日志级别过滤输出。例如，这在您只想查看错误时很有用

js
const browser = window.navigator.userAgent;
console.info(browser);
// Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:121.0) Gecko/20100101 Firefox/121.0

如果你知道在运行代码时其他人可能会遇到问题，warn 和 error 消息会非常有用。

js
console.warn("Unknown device - there may be compatibility issues.");
// ⚠️ Unknown device - there may be compatibility issues.
console.error("Unsupported device. See <docs url> for more details.");
// 🛑 Unsupported device. See <docs url> for more details.
//    <stack trace>

一些浏览器会显示 error 消息的堆栈跟踪，但你也可以使用控制台直接调用此功能。我们将在本文后面 使用 console.trace() 创建跟踪 中介绍如何执行此操作。

使用 console.table() 显示表格

这是我最喜欢的方法之一，因为我经常发现需要获取代码的输出，将其复制粘贴到编辑器中，然后花费一些时间对其进行格式化，使其可读，然后才能理解发生了什么。控制台的妙处在于，你可以使用 console.table() 直接在控制台中创建表格。这很有道理，因为你通常是在浏览器中运行代码，而浏览器已经非常擅长渲染表格了

js
const dogs = [
  { name: "Yoshi", color: "Black", personality: "Calm" },
  { name: "Melanie", color: "Brown", personality: "Hyperactive" },
  { name: "Peppers", color: "white", personality: "Unpredictable" },
];

console.table(dogs);

看看这个数组作为表格格式化后的漂亮效果

A JavaScript array formatted as an HTML table using the console.table() method. The data is a list of dogs along with their corresponding colors and personalities.

使用 console.count() 计数

为什么不在日志中添加一个计数器，以了解事件发生的频率？console.count() 是一个很棒的内置方法，你可以用它来尽情地计算事件

js
function postBoostClicked() {
  // My post has been boosted, do something here
  console.count("Boost count");
}

postBoostClicked();
// Boost count: 1
postBoostClicked();
// Boost count: 2

使用 console.time() 和 console.timer() 添加计时器

两种在许多情况下都适用的有用方法是 console.time() 和 console.timeEnd()，它们可以在你的程序中启动和停止计时器。你可以使用这些方法来衡量你的代码中某个操作需要多长时间，例如，你想查看执行一个函数需要多长时间。在这个示例中，名为 myFunction() 的函数需要 200 毫秒

js
console.time("timerName");
// call myFunction()
console.timeEnd("timerName");
// timerName: 200ms - timer ended

如果你发现需要添加与时间相关的详细信息，还可以使用 console.timeLog() 添加注释。这在应用程序中有独立的阶段时很有用，例如，设置应用程序的不同部分

js
console.time("MyTimer");
console.timeLog("MyTimer", "Starting application up…");
// MyTimer: 0ms Starting application up…
// call myFunction(), for example

console.timeLog("MyTimer", "UI is setup, making API calls now");
// MyTimer: 200ms UI is setup, making API calls now
// call otherFunction(), for example

console.timeEnd("MyTimer");
// MyTimer: 300ms - timer ended

如果你有兴趣除了内部计时器以外还对代码进行测量，你可能想看看 Performance API，它可以帮助根据各种标准和指标深入了解应用程序的性能。

使用 console.group() 对日志进行分组

使用 console.group() 和 console.groupCollapsed() 对日志进行分组，是在你创建大量日志时组织输出的好方法。如果你有代码要经历的阶段，例如，设置步骤或不同的处理任务，对日志进行分组会非常方便。

分组是可以折叠的，这意味着你可以展开和折叠控制台中的分组，如果你想显示或隐藏日志，这尤其有用，特别是当有很多信息需要筛选时

js
console.group("Grouped Logs");
console.log("Log 1");
console.log("Log 2");
console.groupEnd();
// Grouped Logs
//     Log 1
//     Log 2

console.groupCollapsed("Collapsed Group");
console.log("Log 3");
console.log("Log 4");
console.groupEnd();
// > Collapsed Group

使用 console.trace() 创建跟踪

此方法非常适合需要探索代码运行方式的情况。当你使用 console.trace() 时，你就踏入了调试领域，需要调查代码在哪里执行。如果存在复杂的条件，仅仅通过阅读代码很难在脑海中跟踪它们，那么跟踪功能非常有用。

下面的示例演示了如何将跟踪添加到示例函数（example()）中，以找出它是从 one() 还是 two() 调用的。有一个条件会根据时间在 true 和 false 之间切换，因此无法确定 one() 还是 two() 会调用我们感兴趣的函数

js
// Is the "currentSeconds" value odd or even?
const currentSeconds = new Date().getSeconds();
const condition = currentSeconds % 2 === 0;

function one() {
  example();
}
function two() {
  example();
}
function randomChoice() {
  if (!condition) {
    // OK, I'm lost!
    one();
  } else {
    two();
  }
}

function example() {
  // Where is this function called?
  console.trace("Trace from example() function");
}

randomChoice();
//  console.trace() Trace from example function
//     example debugger eval code:23
//     one debugger eval code:6
//     randomChoice debugger eval code:16

从跟踪中，我们可以看到

  1. trace 在第 23 行的 example() 中执行
  2. example() 在第 6 行的 one() 函数中被调用
  3. 跟踪以第 16 行的 randomChoice() 调用结束

如果你有包含复杂逻辑或非确定性行为的代码，使用 console.trace() 可以帮助你回溯堆栈，找出问题的潜在来源。

使用 console.clear() 清理

你是否正在使用一个应用程序，它向控制台记录了太多信息，以至于你无法关注特定的区域或消息？你可以使用 console.clear() 方便地清除控制台，使其恢复到原始状态

js
// Too much information!
console.clear();
// Console was cleared.

一个干净整洁的控制台，仿佛是禅宗的境界，这似乎是一个结束本文的好地方。所以，让我们在此结束。

总结

我们已经了解了在 JavaScript 中使用控制台的几种不同方法。我希望你学到了一些新东西，无论你是开始你的 Web 开发之旅还是一位经验丰富的 console.timer() 用户。如果你认为我遗漏了一些值得一提的内容，或者你对这篇文章有其他反馈，请随时在 Mastodon 或 Discord 上告知我们。感谢你的阅读，祝你记录愉快。📒

关注 MDN 最新动态

订阅 MDN 时事通讯，不错过关于最新 Web 开发趋势、技巧和最佳实践的任何更新。