当你看到你的JavaScript在工作时,控制台会给你带来快乐,当你发现一个神秘的错误信息时,你会感到悲伤。

人们使用控制台记录输出,例如计算结果、RESTAPI的返回值、字符串操作的结果、重新访问程序某一部分的提醒(例如)。,TODO: fix )。可能性是无穷的。您可以使用控制台输出任何类型的信息。当你在浏览器中运行javaSIRT时,在你的浏览器的开发者控制台中可以看到控制台日志。

在本文中,我们将讨论控制台能够做什么,以及一些不太为人所知的方法,您可能会发现这些方法是有用的,或者仅仅是简单的乐趣。无论您是Web开发的初学者,还是寻求了解控制台的用途或有经验的开发人员,您都可能发现一些您不知道存在的方法。让我们从最常见的方法开始,然后看看其他方法,在所有的例子中。

Logging to the console

如果你知道console.log() ,你可以跳到 logging levels 因为我们很快就会先讨论基本问题。如果你还在这里,让我们来了解一下控制台是什么以及它是如何使用的。大多数人使用console.log() 将关于他们代码的一般信息发送到控制台,您可以在浏览器的开发人员工具中找到这些信息(例如。, 火狐的开发工具 ).

注: 您可以复制和粘贴以下所有示例到浏览器的控制台,并为自己尝试它们。

…log() 方法是控制台对象的面包和黄油:你提供一些东西log() ,和视频-它登录到控制台:

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

很高兴能够通过使输出可见性来发现您的代码是否按预期工作,比如这个示例,我正在检查是否正确地使用了代码DateTimeFormat :

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

您可以在日志中提供多个项目,并应用一些花哨的格式(详情请参见 向控制台发送文本 ):

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

交互式使用控制台也是很有趣的,因为大多数浏览器都支持"自动完成",让您可以通过建议浏览标签。如果你不知道要记录什么,请输入console.log(window. (或任何其他对象),让浏览器提出一些有趣的功能,比如navigator :

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

别忘了扔掉剩下的console.log() 不过,在你公开你的代码之前先打个电话!从生产应用程序中删除开发日志是一个良好的实践。

记录信息、警告和错误级别

你可以添加更有意义的日志info ,warn ,以及error 使用的水平console.info() ,console.warn() ,以及console.error() 方法。

其效果类似于console.log() 但是输出格式不同(取决于浏览器),通常可以通过日志级别过滤输出。如果您只希望看到错误,例如:

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 信息非常有用。

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() .这很有意义,因为通常你在浏览器中运行代码,浏览器已经可以很好地处理呈现表:

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

console.table(dogs);

看看这个数组在格式化得很漂亮的时候是怎样的:

计算使用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() takes 200ms:

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

如果您发现您需要添加一些细节的时间,您也可以添加笔记使用console.timeLog() .如果你的应用程序中有不同的阶段,比如设置应用程序的不同部分,这是很有用的:

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

如果您有兴趣在内部计时器之外测量您的代码,您可能需要查看 性能指数 ,这有助于深入了解基于各种标准和测量的应用程序性能。

使用分组日志console.group()

使用分组日志console.group() 和console.groupCollapsed() 如果您正在创建大量日志,这是组织输出的一个很好的方法。如果您的代码经历了不同的阶段,例如安装步骤或不同的处理任务,分组日志可能非常方便。

组是可折叠的,这意味着如果你想显示或隐藏日志,你可以在控制台中扩展和崩溃一个组,特别是如果有很多信息需要筛选:

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() 会调用我们感兴趣的功能:

// 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 在里面执行example() 第23行
2. example() 是在one() 第6行的功能
3. 他的追踪以randomChoice() 第16行

如果您有具有复杂逻辑或非确定性行为的代码,console.trace() 对于重新处理堆栈和找出问题的潜在来源很有帮助。

使用Cleaning up ：console.clear()

您是否正在使用一个应用程序,该应用程序将太多的信息记录到控制台上,使您无法专注于特定区域或消息?您可以方便地清除控制台并将其恢复到原始状态console.clear() :

JS复制到剪贴板

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

完美、清晰的控制台的禅宗似乎是结束本文的一个好地方。