控制台 API。

花更少的时间在代码中查找错误的能力是每个开发人员都应该具备的必要技能。

控制台 API 是浏览器的一部分，它是一个调试工具，它为开发人员提供了一些可以发现这些错误的功能。

我写这篇文章的目的是向 Web 开发者展示控制台对象自带的一些函数及其用途。希望它能帮你在调试代码时有所帮助。

控制台.log()

这是最流行的控制台方法。它将参数（以逗号分隔）转换为字符串，并将其记录到 Web 控制台。在控制台中，它会在参数之间插入空格，并在输出所有参数后另起一行。

其他类似功能包括：

控制台.debug()
Console.info()

通常情况下，浏览器不会显示调试语句，并且会返回 undefined。这是因为 console.debug() 是为开发环境创建的，不应向用户显示。不过，可以通过在默认级别启用“verbose”来更改此设置。

注意：当从 IDE 将对象记录到控制台时，记录的是该对象的引用，而不是console.log调用时对象的值，而是打开控制台后对象的值。

控制台.warn()

该console.warn()方法向 Web 控制台输出一条警告消息。它通常以感叹号图标开头。

let x = 3;
if (x == 3) {
    console.warn("This value might be too low");
}

console.warn用于显示一些不一定会导致应用程序崩溃，但需要用户注意的消息。例如，如果某个 API 已被弃用，console.warn则可以用来向用户发送消息。

控制台.error()

该console.error()函数向控制台输出一条错误消息（我们都遇到过这种情况）。

let x = "3";
if (!Number.isInteger(x)) {
    console.error(`${x} is not a number`);
};

console.error()用于构建库，以便用户了解其代码可能无法按预期工作的原因。

控制台.assert()

该console.assert函数接受两个参数。第一个参数是一段代码块，其值为 true 或 false；第二个参数是要打印到控制台的消息。

如果第一个参数为真，则函数不执行任何操作，但如果为假，则第二个参数将以“断言失败”前缀打印到控制台。

const numbers = [1,"2",3,"4",5,"6"];
for (element in numbers) {
    console.assert(Number.isInteger(numbers[element]), `${numbers[element]} is not a number`);
}

控制台.clear()

console.clear用于清除控制台。当你想在显示新语句之前清除其他控制台语句时，这很有用。

function show() {
    console.clear();
    console.log("...checking line 2");
    console.log("...checking line 5");
    console.log("...checking line 6");
}

function clear() {
    console.clear();
    console.log("...checking line 13");
}

show();
clear();

控制台.table()

console.table接受一个对象或数组作为参数，并以表格形式显示它。

如果其参数是一个数组，则第一列将代表数组的索引，第二列将是值。

const color = ["blue", "red", "yellow","green", "purple"];
console.table(color);

如果其参数是一个对象，则第一列将表示该对象的属性，第二列表示值。

const color = {
    primary : "red",
    secondary : "purple",
    tertiary : "violet"
}
console.table(color);

如果它的参数是一个对象数组，则第一列将代表每个对象的索引，其余列将是该对象的属性。

const members = [
    {
        name: "Micheal",
        age : 21,
        isPresent : true
    },
    {
        name : "David",
        age : 18,
        isPresent : false
    },
    {
        name : "Linda",
        age : 22,
        isPresent : true
    },
    {
        name : "Philip",
        age : 27,
        isPresent : false
    }
];
console.table(members);

您还可以通过传递第二个参数（该参数是一个仅包含要显示的属性的数组）来限制要显示的列数。

console.table(members, ["name","age"]);

控制台.trace()

当一个函数被调用时，它会被添加到调用栈中。如果这个函数调用了另一个函数，那么该函数也会被添加到调用栈中，直到有返回值为止。

console.trace只是用于追踪函数是如何被调用的（即导致该函数的其他函数）。

function factorial(number) {
    if (number == 1) {
        console.trace("Base case");
        return 1
    }else{
        return number * factorial(number - 1);
    }
}
factorial(4);

我们可以看到，在函数被调用四次之后，我们达到了基准条件。“Anonymous”只是一个全局命名空间，在任何其他函数添加到调用栈之前，它会被挂载到调用栈上。

Console.count()

此函数接受一个字符串作为参数，并将使用该字符串调用的次数记录到控制台。如果没有传入字符串，则其行为如同使用字符串值“default”调用一样。

function increaseCount(user) {
    console.count(user);
}
increaseCount("Ben");
increaseCount();
increaseCount("Ben");
increaseCount();
increaseCount("Jane");

console.count对于跟踪事件处理程序被触发的次数也很有用。

还可以使用来反转计数console.countReset()。

function increaseCount(user) {
    console.count(user);
}
increaseCount("Ben");
increaseCount("Ben");
increaseCount("Jane");
console.countReset("Ben");
increaseCount("Ben");

注意：尝试重置计数时，请确保 console.count() 和 console.countReset 具有相同的参数。

控制台.group()

console.group()将所有后续控制台消息分组，直到console.groupEnd()调用。参数console.grouptake 用于为该组提供一个解释性名称。

for (let i =0; i <= 2; i++) {
    console.group(`Group ${i+1}`)
    console.log(i)
    console.log(i + 1)
    console.log(i + 2)
    console.log(i + 3)
    console.groupEnd()
}

控制台.time()

console.time()接受一个代表其唯一名称的参数，并以此名称启动一个计时器。为了检查代码块的运行时间，console.time()在代码上方调用，然后console.timeEnd()在末尾调用另一个函数，并将相同的参数传递给console.time()。console.timeEnd()停止计时器，并将代码运行的时间（以毫秒为单位）记录到控制台。

console.time(loop-time);
for (let i =0; i <= 2; i++) {
    console.log(i + 2)
}
console.timeEnd(loop-time);

另外，为了检查自调用 console.time() 以来的时间，console.timeLog()在 console.time 和 console.timeEnd() 之间调用一个采用与 console.time 相同参数的函数。

console.time("loop-time");
for (let i =0; i <= 2; i++) {
    for (let j=0; j<=2; j++) {
    console.log(i + 2)
    }
    console.timeLog("loop-time");
}
console.timeEnd("loop-time");

注意：console.time()它本身不会产生任何输出，并且一旦console.timeEnd()被调用就不适合再调用，console.timeLog直到console.time()再次被调用为止。

使用控制台格式化输出。

当类似于 console.log() 的 Console 函数接受两个参数时，第一个参数包含 %s、%i、%d、%f、%o、%O 或 %c。第一个参数将被视为格式字符串，后续参数的值将替换为字符串中两个字符的 % 序列。

%s——格式化为字符串。
%i——格式化为整数。
%f——格式化为浮点值。
%O——格式化为 javascript 对象。
%o——格式化为 DOM 元素。
%c——格式化为 CSS 规则。

const a = {name:"Cindy"};
console.log("The first user is : %O", a);
console.log("Here are the elements in the DOM : ", document.documentElement);
console.log("%cThis is a text", "color:red;font-size:2rem");

解构控制台对象。

为了节省时间，您可以从控制台对象中解构控制台功能。

const { log } = console;
const { error } = console;

log("This also works !");
error("This is wrong");

结论。

即使控制台 API 提供了所有可用的功能，一些开发人员在尝试查找代码中的错误时也只使用 console.log()。

有时，使用 console.log() 就可以了，但有时其他函数可能会提供有关要修复的错误的更好信息，从而节省您的时间。

感谢阅读本文。希望您学到了一些新知识，并准备好将所学付诸实践。

文章来源：https://dev.to/chucks1093/the-console-api-ce8