JavaScript中最有效的调试工具之一就是console.log()。console提供了一些有用的方法可以帮助开发人员更好的调试你的代码。

您可以使用控制台执行以下任务：

• 输出一个计时器帮助使用一个基准
• 输出一个表格来显示一个数组或对象，输出一个更易读的格式
• 使用CSS输入适用的颜色和其他样式

控制台对象

console对象允许你访问浏览器的控制台。可以让你输出字符串、数组和对象，帮助你调试代码。console是window对象一部分，应用于浏览器对象模型（BOM）。

访问控制台有以下两种试：

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

第二个选项是前者的基本参考，所以我们将使用后者保存敲键盘的次数。

对于BOM需要注意，它没有一个标准，所以每个浏览器实现的方法都稍微不同。我在Chrome和Firefox中测试了我所有的例子，但根据你的浏览器，你的输出有可能出现不同的结果。

输出文本

console对象最常见的就是console.log()。对于大多数场景，你将使用它来完成工作。

有四种不同的方式输出一条消息到控制台：

• log
• info
• warn
• error

四种方式的工作方式都是相同的。你要做的就是通过一个或多个参数选择方法。然后，它显示一个没的图标来区分日志的级别。在下面的例子中，你可以看到一个info-level日志和warning/error-level日志间的区别。

简单易读的输出

有许多事情会变得难以阅读

你可能已经注意到错误日志消息 —— 这比其他的更艳丽。它显示一个红色背景和跟踪信息和警告的堆栈方式。在Chorme浏览器警告信息背景是黄色的。

当你想快速识别错误或警告信息时，这些差异可以快速帮到你。这些警告可以告诉其他开发人员，你的代码中做错了什么。

字符串替换

这种技术使用一个占位符字符串，取而代之的是另一个传递给方法的参数。比如：

console.log('string %s', 'substitutions'); // string substitutions

%s是第二个参数substitutions的点位符。任何字符串、整数或数组使用s%将转换为字符串。如果你传递的是一个对象，它将显示[object Object]。

如果你想对通过一个对象，你需要使用%o或%O替代%s。

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

数字

可能通过下面的方式让字符串替找整数和浮点值：

• %i或%d用于整数
• %f用于浮点值

比如：

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

可以使用%.1f格式化浮点数，只让浮点数显示小数点后一位数。你也可以使用%.nf显示n位浮点数（n指的是小数点后位数）。

比如说面的示例，如果我们想让浮点数只显示一位小数，可以像下面这样操作：

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

格式说明符

• %s：使用一个字符串替换一个元素
• %(d|i)：使用一个整数替换一个元素
• %f：使用一个浮点数替换一个元素
• %(o|O)：元素显示成一个对象
• %c：应用于提供CSS

字符串模板

随着ES6，模板文本替换字符串连接。使用撇号替代引号，同时把变量放在${}里：

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

在模板文本中对象显示为[object Object]，所以你需要使用%o或%O看到细节。

使用替换或模板创建的代码比使用字符串连接创建的代码更易读。比如：

console.log('hello' + str + '!');

好看颜色

更有趣的是丰富的颜色。是时候让我们的console对不同的字符串使用不同的颜色。

使用一个Mock的Ajax来举例，给我们提供两个颜色，一个是绿色，表示成功；另一个是红色，表示失败：

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规则。

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

然后把你的CSS元素作为一个字符串参数，你可以有CSS-styled日志。你可以在字符串中添加多个%c。

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

这将输出的单词red、blue和white，对应是颜色。

有相当多的CSS属性在控制台中得到支持。我建议你试试看，看看哪些不支持。再次，你的结果可能取决于你自己的浏览器。

其他可用的方法

这里有些可用于控制台的方法。注意，下面介绍的方法都没有他们的API规范，所以在浏览器上可能存在不兼容问题。下面的例子是使用Firefox51.0.1版本进行测试的。

Assert()

Assert接受两个参数，根据延续一个参数的真假值来显示第二个参数。

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

如果断言是假的（assert()第一个参数是false），第二个参数将会在控制台上输出。显示为一个错误的日志，并且会给出一个绝的错误消息和堆栈跟踪。

Dir()

dir方法将把发一个对象以一个列表的方式展示出来：

console.dir(document.body);

最终，dir只保存一个或两个点击。如果你需要从一个API响应中检查一个对象，然后这种结构化的显示方式可以节省一些时间。

Table()

table方法可以把一个数组或对象按表格显示。

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

数组的索引或对象属性名显示在左侧的索引列，然后他们对应的值显示在右边的列。

const superhero = { 
    firstname: 'Peter',
    lastname: 'Parker',
}
console.table(superhero);

Chrome的用户请注意：由一位同事告诉我，上面的示例方法在Chrome似乎不工作。你可以通过一个元素来表示一个数组的数组或对象数组，就可以解决这个问题。

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

Group()

console.group()方法可以一起打印出最近三次console的调用记录。比如下面这个示例：

console.group();
console.log('I will output');
console.group();
console.log('more indents')
console.groupEnd();
console.log('ohh look a bear');
console.groupEnd();

这将输出多个层面，并且根据你的浏览器显示不同。

Firefox显示效果如下：

Chrome显示效果如下：

每次调用console.group()将创建一个新组，或在一个组里创建新的级别。每次调用console.groupEnd()，它将结束当前的组或水平和返回到同一个级别。

我发现Chrome输出的风格更易阅读，因为她看起来更像一个可折叠的对象。

你可以在group中传一个参数Header，将创建一个名叫Header的console.group：

console.group('Header');

如果你使用console.groupCollapsed()，会自动将创建的group叠在一起。根据我的经验，这似乎只在Chrome下可以运行。

Time()

time方法就像上面的group方法，也有两个部分。

一个方法来启动定时器和一个方法来结束它。

一旦定时器完成，它将输出总的运行时间，单位是ms。

你可以使用console.time('id for timer')启动计时器和使用console.timeEnd('id for timer')结束计时器。你可以同时运行多达10000定时器。

输出来的结果类似这样：timer: 0.57ms。

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

总结

我们可以一点一点深入了解console和其他的一些方法。这些方法对于帮助我们调试代码是非常有用的。

有一些方法，我没有谈到他们的API仍然是变化的。你可以阅读MDN Web API以入Living 规范中有关于console的相关文档。

本文根据@Darryl Pargeter的《How to get the most out of the JavaScript console》所译，整个译文带有我们自己的理解与思想，如果译得不好或有不对之处还请同行朋友指点。如需转载此译文，需注明英文出处:https://medium.freecodecamp.com/how-to-get-the-most-out-of-the-javascript-console-b57ca9db3e6d

如需转载，烦请注明出处：https://www.w3cplus.com/javascript/how-to-get-the-most-out-of-the-javascript-console.htmlView products by sport