探索更多 JavaScript 中可用的控制台方法，并学习如何设置它们的样式。

探索更多 JavaScript 中可用的控制台方法，并学习如何设置它们的样式。

本文最初发布在我的博客上。访问inspiredwebdev.com查看更多文章和教程。欢迎查看我在Educative上的JavaScript 课程，学习从 ES6 到 ES2019 的所有内容。

大家好，我是 Alberto Montalesi，一名自学成才的全栈开发者。我在我的网站inspiredwebdev.com上创建 JavaScript 教程和课程，旨在激励其他开发者成长并建立他们理想的职业生涯。

探索更多 JavaScript 中可用的控制台方法，并学习如何设置它们的样式。

新程序员最先学习的内容之一JavaScript就是如何使用console.log打印语句和查看代码输出。

虽然了解这一点无疑很有用，但console实际上对象还有许多其他方法可以使用，在本文中，我们将介绍其中一些更有趣的方法。

console.log()

我们快速回顾一下这个功能。顾名思义，它用于记录值，无论是字符串、数字等基本类型，还是函数的结果。

console.log(5);
// 5
const sayHello = () => {
    return 'hello'
}
console.log(sayHello());
// hello

console.info()

本质上，它与 `<login>` 相同console.log()，区别仅在于其含义，并且它用于区分信息性日志和调试日志。您可能希望console.info()在代码中保留 `<login>`，但最好在推送之前删除所有 `<login>`，console.log()因为它们是在调试期间添加的。

在 Firefox 浏览器中，会显示一个小的“i”图标，表示这是一个console.info输出。

console.warn()

console.warn()用于向控制台输出警告，在 Firefox 中，输出消息旁边会显示一个黄色警告图标。

console.error()

这个命令用于将错误记录到控制台，在 Firefox 中，输出消息旁边会显示一个红色警告图标，而在 Chrome 中，它会在红色圆圈内显示一个白色十字。

与之前版本不同的是，此版本还会记录堆栈跟踪，以便查看错误来源。

function sayHello() {
    console.error('Error!!!')
}

sayHello()

console.trace()

如果您想知道方法的堆栈跟踪，即使没有错误，那么您应该使用该方法console.trace()。

const func = () => {
    const nestedFunction = () => {
        console.trace()
    };
    nestedFunction()
}

func()

如您所见，这记录了我们方法的堆栈跟踪，由于这不是错误，因此不会以红色显示。

console.time()，，timeEnd()​timeLog()

您console.time()可以启动计时器来跟踪操作所需的时间。

您可以给计时器起一个唯一的名字，然后调用console.timeEnd(nameOfYourTimer)该函数停止计时器并将持续时间记录到控制台。

console.time('countToTen');

setTimeout(function(){
    console.timeEnd('countToTen')
},10000)

// countToTen: 10000.5087890625ms

10 秒后，您将在控制台中看到计时器的记录，如果您想监控方法的性能，这将非常有用。

您最多可以同时拥有 10,000 个不同的计时器，因此请根据需要创建任意数量的计时器。

如果您只想记录当前计时器，但不想立即停止它，请使用console.timeLog()计时器名称的方法，它将在控制台中记录，而不会停止它。

如果您正在监控方法的不同代码块，并且想要查看性能问题可能出现在哪里，这将非常有用。

console.dir()，dirxml()

console.dir()打印对象属性的交互式列表。如今，像 Chrome 和 Firefox 这样的浏览器即使在使用 .NET Framework 时也能显示交互式对象，console.log()因此使用此功能的需求有限。

console.dirxml()打印 DOM 元素的交互式树状标记，例如，如果您console.dirxml(console.body);在此页面上运行该命令，您将看到此页面主体内所有 DOM 元素的交互式树状图。

console.assert()

此方法用于运行断言。如果第一个参数失败，则后续参数将被打印到控制台。

console.assert(1 > 2, '1 is not more than 2');
// Assertion failed: 1 is not more than 2
console.assert(1 < 2,' 1 is less than 2');
// nothing is printed

控制台记录的第一行是我们自定义的消息“1 不大于 2”，以及堆栈跟踪。

第二个语句console.assert()没有输出任何内容，因为断言没有失败。你不能设置在断言成功时输出消息，只能在断言失败时输出消息。

console.clear()

顾名思义，这种方法用于清除控制台，简单易用。每个浏览器都有专门的按钮和快捷键来清除控制台，所以你可能很少会用到这种方法，但了解一下还是很有必要的。

既然你已经知道如何使用更多方法console.log()，那么让我们来看看如何设置它们的样式，使它们更容易被识别。

其实设置邮件样式非常简单，你可以这样做：

console.log("%cThis is red", "color:red");

我们在要应用样式的字符串前面添加了“%c”，并向该方法添加了第二个参数，以便对其应用一些 CSS 样式。

您不仅限于颜色，还可以应用任何类型的字体样式，例如字体粗细、字体系列等……使用与 CSS 相同的语法，用分号分隔每个样式。

console.log("%cThis is red", "color:red; font-size:30px");

以上就是consoleAPI 方法的介绍。JavaScript如果您想学习所有方法，可以前往MDN查看我在这里没有提到的方法。

非常感谢您的阅读。欢迎在DevTo、我的博客inspiredwebdev或Twitter上关注我。也欢迎访问Educative.io，那里有互动式编程课程。

免责声明：文中链接指向亚马逊和Educative网站，均为联盟链接。您通过这些链接购买商品，我将获得额外佣金。谢谢！

我的电子书已在亚马逊和Leanpub上架。