Console控制台命令指南

开发人员的调试控制台以一种或另一种形式出现在web浏览器中已有多年。作为向开发人员报告错误的一种手段，它的能力在许多方面都得到了提高;例如自动记录信息，如网络请求、网络响应、安全错误或警告。

还有一种方法可以让网站的JavaScript触发输出到控制台的各种命令，以便进行调试。这些命令包含在几乎每个浏览器中都可用的控制台对象中。尽管这些特性在不同的浏览器之间基本上是一致的，但是有一些不同之处。其中一些差异在本质上只是视觉上的，而另一些则有轻微的功能差异需要记住。

console.xxx命令

console.log命令

我们可以做的第一件事是记录控制台对象本身，以查看您所选择的浏览器实际上提供了什么。

console.clear命令

随着控制台的大量使用，文本输出变得非常拥挤。有时你只是想要清理东西，并开始一个新的控制台。

debug(), error(), info(), log(), and warn()

这5个命令似乎可以完成完全相同的任务。而且，从技术上讲，他们确实做到了。但是浏览器提供了与这五个命令相关的附加功能，使每个命令都有自己独特的优点。

console.debug();
console.error();
console.info();
console.log();
console.warn();

字符串替换

不同的控制台日志命令提供了字符串替换，允许将不同的值插入到字符串中进行输出。这对于在日志中描述一个变量来清楚地说明报告的内容是很有用的。

console.log('This is a string: %s', 'string');
console.log('This is a number: %i', 42);
console.log('This is an object: %o', {object: 'object'});

输出样式

另一个可能有用和有趣的事情是，您可以将CSS样式应用到控制台的输出中。它的工作原理与字符串替换方法类似，即插入一个%c变量，以便从参数中应用样式。

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

参考资料

1. https://css-tricks.com/a-guide-to-console-commands/