带你重拾JavaScript之console的你所不知道的功能

Posted 2020-09-26

 

javascript最常用的调试工具就是console.info()了。console是浏览器中window对象的属性之一，由浏览器对象模型（BOM）提供，作用是访问浏览器控制台，你可以通过console输出有助于调试代码的字符串、数组、对象。console还附带了一些你平时不了解的好用方法，本文可以丰富你的调试工具。

我们一般通过

window.console.info(‘hello world‘);

或者

console.info(‘hello world‘);

由于window可以省略所以我们使用后者以精简代码。

输出信息到控制台的四种方式：

1. console.log();

2. console.info();

3. console.warn();

4. console.error();

我们唯一要做的就是给它们（方法）传递一个或者多个参数。控制台会显示不同的图标和颜色来表示其记录级别。见下图：

不同级别的记录打印代码

不同级别的记录打印效果

你会注意到error日志消息比其他消息更显眼。视觉上区分有助于开发者在控制台快速查看错误或警告信息等。你应该确保什么时候应该警示什么类别的日志信息。

也许上面的功能你已经很熟悉了，那么真正有价值的内容现在开始，请往下看。

字符串替换

这个技术可以使用字符串中的占位符来替换你向方法中传入的其他参数。

输入： console.info(‘hello %s‘, ‘world‘);

输出： hello world

代码

效果

%s是第二个参数‘world’的占位符。任何的字符串、整数、数组都可以被转换成字符串并替换%s。如果你传入一个对象，它将显示为[object Object] 或 Object。

Firefox

chrome

如果你想传入对象，你需要使用 %o 或者 %O ,而不是 %s。

console.info(‘this is an object %o‘, {obj : ‘object‘});

传入对象

数字

字符串替换可以与整数和浮点数一起使用：

• 整数 %i 或 %d

• 浮点数 %f

输入： console.info(‘int: %d, float: %f‘, 1, 1.5);

输出： int: 1, float: 1.500000;

可以使用%.1f来格式化浮点数，这样就只显示一位小数， %nf ，你懂得（显示n为小数）。

总结一下格式化说明符：

1. %s 使用字符串替换占位符

2. %(d or i) 使用整数替换占位符

3. %f ，%nf 使用浮点数替换占位符

4. %o or %O 占位符显示为一个对象

5. %c 应用提供css （PS： 可以自己尝试一下，或者看看下面的`彩蛋`吧）

字符串模板

ECMAScript6的出现，模板字符串是替换或连接的替代品。语法是使用反引号(``)来代替引号，变量包裹在 ${ } 中：

const a = ‘world‘;

console.info(` hello: ${a} `);

// hello: world

对象在模板字符串中显示为[object Object]或 Object，所以你仍然可以使用 %o 或 %O 替换。

与你之前使用字符串拼接： console.info(‘hello: ‘ + str + ‘!‘);，使用替换或者模板创建是不是代码更易读呢！

彩蛋（*&……&*）

现在，我们来实现一个丰富多彩的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样式，并且因浏览器而异。

其他可用的方法

下面几个方法都不是API标准，所以你需要在高版本浏览器下使用。

1、 console.assert(boolean, param); 如果第一个参数计算为FALSE，那么返回第二个参数。如果为TRUE，那么不显示日志。

断言

2、 console.dir()；显示一个传入对象的可交互属性列表，节省点开Object对象操作，还不错。

3、 console.table( [‘javascript‘, ‘php‘, ‘java‘] ); 用一个表格显示数组或对象

请点击此处输入图片描述

chrome用户请注意，table()是不能工作的，你可以通过将项目放入数组或对象来解决这个问题。

console.table( [[‘javascript‘, ‘php‘, ‘java‘]] );

4、 console.group(); 由至少3个console调用组成，它将输出多个层级，显示效果如下：

请点击此处输入图片描述

5、 console.time(id) 和 console.timeEnd(id) 启动id的定时器和停止id的定时器。

它可以同时运行多达10,000个定时器。

最后

console的有些方法虽然实用，但是因为它们的API依然在变动，具体可以访问

https://developer.mozilla.org/en/docs/Web/API/console

结尾

如果你喜欢我的内容请关注吧，共同学习共同进步！

感谢浏览~~