神奇的console

写在前面

启动vue工程的时候，无意之间发现了控制台的输出，随即产生了兴趣，并且发现console还有很多好玩的东西。

1.console.log

console.log相比于其他console方法使用频率应该高得多，但是可能不知道console.log也可以像C语言或者JAVA一样，可以使用格式控制输出。
比如，我可以这样写：

console.log("my name is %s !", "Jack");

最终的输出是：

下面是来自google developer的格式说明符的列表：

说明符	输出
%s	将值格式化为字符串
%i 或 %d	将值格式化为整型
%f	将值格式化为浮点值
%o	将值格式化为可扩展 DOM 元素。如同在 Elements 面板中显示的一样
%O	将值格式化为可扩展 JavaScript 对象
%c	将 CSS 样式规则应用到第二个参数指定的输出字符串

所以，开始看到的控制台输出就是使用的%c，就像这样：

console.log("%cmy name is %cJack !", "color: red", "font-size: 20px");

控制台输出：

接着再试试其他的格式符：

console.log("整型：%d，浮点型：%f", 12, 1.26);
console.log("可扩展DOM对象：%o", document);
console.log("可扩展js对象：%O", document);

可扩展的DOM对象就是跟正常console.log(document)是一样的，就是DOM结构；
可扩展的js对象就是当前元素的属性，以对象的形式展示。

控制台输出：

2.console.group & console.groupEnd

对打印出的数据进行分组，避免混乱，方便查看。如：

console.group("Jack info:");
console.log("name: %s", "Jack");
console.log("age: %d", 20);
console.groupEnd();

console.group("Tominfo:");
console.log("name: %s", "Tom");
console.log("age: %d", 22);
console.groupEnd();

控制台输出：

3.console.count

显示相同信息被打印的次数。

console.count("Jack");
console.count("Jack");
console.count("Tom");

控制台输出：

4.console.time & console.timeEnd

在控制台启动和关闭一个定时器。

console.time("timer");
for(let i=0; i<10000; i++) {
    continue;
}
console.timeEnd("timer");

启动和关闭必须是同一个label，即”timer”，否则不会停止定时器。

输出表示当前定时器运行的时间：

5.console.dir & console.dirxml

• console.dir —— 输出以 JavaScript 形式表示的指定对象(与格式符%O相同)。
• console.dirxml —— 输出 XML 形式，否则输出其 JavaScript 表示形式。

有关console.dir可以参考上文。

如果是HTML元素，console.dirxml跟console.log相同：

console.dirxml(document);

输出如下：

写在后面

善于发现生活中的细节，可以让生活变得更有乐趣！