如何用好 console

发表于   |   分类于

原文链接：How to get the most out of the JavaScript console

在JavaScript中，最基本的调试工具就是console.log()。console中有还很多其他的实用方法可以成为开发者调试的好帮手。

使用console，你可以做到：

  • 输出一个计时器来简单地测试 benchmarking

  • 以更可读的表格方式展示数组数据或对象

  • 在输出对象中应用CSS添加色彩或其他样式

Console对象

使用console对象，你能够操作浏览器的控制台，你可以输出字符串、数组和对象这类数据，并且帮助你调试代码。console是浏览器对象的一部分，是一种BOM方法。

我们可以以两种方式使用console：

  1. window.console.log(This works)
  2. console.log('So does this')

我们通常使用第二种方法。

BOM小提示：它并没有提供一套标准，所以每个浏览器工具中使用都会有些许不同。我分别在Chrome和Firefox上测试我的代码，但你基于你的浏览器，你的输出可能不太一样。

输出文本

console对象最基本的元素就是console.log，大多数时候你都会使用它。

console中有四中不同的输出方式：

  1. log
  2. info
  3. warn
  4. error

四种方式方式的工作原理是一样的。你所需要做的是在你选择的方法中传入参数。接着它便会按照提示等级来显示不同的图标，在下面的示例中，你会看到info的输出和warn或者error的不一样。

Markdown

Markdown

你可能注意到了error的提示信息，它相比其他的更为显眼。它展示了一个红色的背景和一个堆栈路径，而info和warn则没有。然而warn在Chrome中也有一个黄色的背景框。

这些视觉上的不同可以让你一下子就找出那里出了错误、而哪里仅仅只是一个警告，在你准备发布代码之前要确保他们都被移除。

字符替换

这一功能是在字符串当中使用占位符，然后再用其他你输入的变量作为替换，例如：

Input: console.log('string%s', 'substitutions')

Output: string substitution

%s作为一个占位符，在输出的时候被第二个变量'substitution'替换。任何字符串、整数、或者数组都会转换成字符串并且把%s替换，如果你传入的是对象，则会输出[object Object]。

如果你想正确输出对象，那你就要使用%o或者%O而不是%s。

console.log('this is an object %o', {obj: {objective : 'hello'}})

Markdown

数字

在字符替换的功能中还可以使用整数和浮点数：

  • %i或者%d代表整数
  • %f代表浮点数

Input: console.log('int: %d, floating-point: %f', 1, 1.5)

Output:
int: 1, floating-point: 1.500000

你还可以改变浮点数输出的格式，%.1f结果只保留小数后面一位，同理%.nf可以保留小数后面的 n 位数。

还是上面的例子：

Input: console.log('int: %d, floating-point: %.1f', 1, 1.5)

Output: int: 1, floating-point: 1.5

格式化说明符

  1. %s 替换字符串元素
  2. %(d|i) 替换整型
  3. %f 替换浮点型数据
  4. %(o|O) 替换对象
  5. %c 应用所传入的CSS元素

模板字符串

随着ES6的出现，模板字符串是拼接字符串的一个替代方法，他使用反引号( ` ` )而不是引号(“”)，而变量则用 ${}括起来：

1
2
3
const a = 'substitutions';
console.log(`bear: ${a}`);
// bear: substitutions

对象元素将会被隐藏为[object Object]在模板字符串当中，所以你需要使用%o或者%O。

相比拼接字符串，使用模板字符串可读性更高：console.log('hello' + str + '!');

漂亮的色彩

现在是时候展示一些更有趣的东西了。

现在我们让console弹出的时候带有不同的色彩。

我将使用 mocked Ajax 示例，显示成功（绿色）和失败（红色），下面是输出代码：

Markdown

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
const success = [
 'background: green',
 'color: white',
 'display: block',
 'text-align: center'
].join(';');
const failure = [
 'background: red',
 'color: white',
 'display: block',
 'text-align: center'
].join(';');
console.info('%c /dancing/bears was Successful!', success);
console.log({data: {
 name: 'Bob',
 age: 'unknown'
}}); // "mocked" data response
console.error('%c /dancing/bats failed!', failure);
console.log('/dancing/bats Does not exist');

使用字符串替换%c将CSS应用：

1
console.error('%c /dancing/bats failed!', failure);

然后将CSS元素作为参数传入：

1
console.log('%cred %cblue %cwhite','color:red;','color:blue;', 'color: white;')

这将会输出三个单词并且以它们各自的颜色所展示。

console支持诸多CSS属性，我建议你去试试看哪些是有效的，那些行不通，而且你的结果也将因浏览器的不同而不同。

其他可用的方法

下面介绍一些其他的console可用的方法。请注意，以下某些项目没有将API标准化，因此浏览器之间可能存在不兼容性。 下面的示例使用的是Firefox 51.0.1创建。

Assert()

Assert可以传入两个参数—— 如果第一个参数的计算结果是否定的，则展示第二个参数

1
2
3
4
let isTrue = false;
console.assert(isTrue, 'This will display');
isTrue = true;
console.assert(isTrue, 'This will not');

如果判断为false，则将其输出到控制台。 它如上所述显示为错误级日志，同时提供一个红色错误消息和堆栈跟踪。

Dir()

Dir()方法可以将传入的对象参数展示为一个交互列表。

1
console.dir(document.body);

Markdown

以这样的方式展示会给你节省一些时间。

Table()

table方法可以将一个数组数据或是对象展示为一张表格。

1
console.table(['Javascript', 'PHP', 'Perl', 'C++']);

Markdown

数组的索引或对象属性名称位于左侧索引列下。 而值将显示在右侧列中。

1
2
3
4
5
const superhero = { 
    firstname: 'Peter',
    lastname: 'Parker',
}
console.table(superhero);

Markdown

Chrome 用户请看这里：
同事的提醒，上述表格方法的示例在Chrome中似乎不起作用。 你可以通过将项目放入数组或数组对象来解决此问题。

1
2
3
4
5
6
console.table([['Javascript', 'PHP', 'Perl', 'C++']]);
const superhero = { 
    firstname: 'Peter',
    lastname: 'Parker',
}
console.table([superhero]);

Group()

console.group()由至少三个控制台调用组成，可能是在需要大量键入时使用的方法。 但它也是非常有用的（特别是对于使用Redux Logger的开发人员）。

基本的使用就像这样：

1
2
3
4
5
6
7
console.group();
console.log('I will output');
console.group();
console.log('more indents')
console.groupEnd();
console.log('ohh look a bear');
console.groupEnd();

这样会输出一个多层级的展示并且在不同的浏览器之间可能会有差异。

在Firefox上是这样的：

Markdown

而Chrome中则是这样的：

Markdown

每次调用console.group()将启动一个新组，如果在一个组内调用新组，则创建一个新的级别。 每次调用console.groupEnd()时，它将结束当前组级别并向上移动一级。

我觉得Chrome输出样式更容易阅读，因为它看起来更像是可折叠对象。

在group中你可以传入头文件参数，该参数将显示在console.group上：

1
console.group('Header');

如果您调用console.groupCollapsed()，你可以从一开始就将该组显示为折叠。但这似乎只适用于Chrome。

Time()

与上面的group类似，time方法也是由两部分组成。

一个方法是开始计时，还有一个则用来结束。

定时器完成后，它将以毫秒为单位输出总运行时间。

要启动计时器，您可以使用console.time('id for timer')，结束则使用console.timeEnd('id for timer')的计时器。 你最多可以同时运行10,000个定时器。

输出将看起来有点像这样：0.57ms

当你需要做一个快速的基准测试时，这是非常有用的。

总结

现在我们对控制台对象和其中附带的一些其他方法有了更深入的了解了。当你需要调试代码时，这些方法都是很好的工具。

不过还有几种方法，我没有涉及到，因为他们的API仍在变化。你可以在MDN上阅读有关控制台的更多信息。