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()。对于大多数场景，你将使用它来完成工作。
有四种不同的方式输出一条消息到控制台：
loginfowarnerror
四种方式的工作方式都是相同的。你要做的就是通过一个或多个参数选择方法。然后，它显示一个没的图标来区分日志的级别。在下面的例子中，你可以看到一个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.html