如何有效的使用JavaScript Console

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

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

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

控制台对象

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

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

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

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

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

输出文本

如何有效的使用JavaScript Console

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

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

  • log
  • info
  • warn
  • error

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

如何有效的使用JavaScript Console

简单易读的输出

如何有效的使用JavaScript Console

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

你可能已经注意到错误日志消息 —— 这比其他的更艳丽。它显示一个红色背景和跟踪信息和警告的堆栈方式。在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' }})

如何有效的使用JavaScript Console

数字

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

  • %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来举例,给我们提供两个颜色,一个是绿色,表示成功;另一个是红色,表示失败:

如何有效的使用JavaScript Console

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;')

这将输出的单词redbluewhite,对应是颜色。

有相当多的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);

如何有效的使用JavaScript Console

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

Table()

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

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

如何有效的使用JavaScript Console

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

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

如何有效的使用JavaScript Console

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显示效果如下:

如何有效的使用JavaScript Console

Chrome显示效果如下:

如何有效的使用JavaScript Console

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

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

你可以在group中传一个参数Header,将创建一个名叫Headerconsole.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的相关文档。

原文链接:https://medium.freecodecamp.com/how-to-get-the-most-out-of-the-javascript-console-b57ca9db3e6d

发表评论

登录后才能评论

评论列表(1条)