JS - console命令使用详解（Chrome控制台日志技巧）

作者：hangge | 2017-09-22 08:10

通过 console 命令打印日志进行调试大家肯定不陌生。我们只要在 JavaScript 代码中使用 console.log() 方法，就可以将内容输出到 Chrome 的控制台中显示。

当然 console 命令的功能远不止这些，本文对其做个总结。

1，清空控制台信息

如果想要清空控制台里的日志信息，除了可以点击控制台面板左上角的清空按钮，还可以在 js 代码中执行如下命令：

console.clear()

2，各种类型信息的输出

console 提供了如下几种方法，用来输出不同类型级别的信息：

console.log：用于输出普通信息
console.info：用于输出提示性信息
console.warn：用于输出告警信息
console.error：用于输出错误信息

各类型信息显示效果如下：

3，格式化输出

上面提到的几种 console 对象输出方法都是支持格式化输出的，具体支持如下四种占位符：

字符（%s）
整数（%d 或 %i）
浮点数（%f）
对象（%o）

（1）下面是一个简单的样例

console.log("%d年%d月%d日",2017,7,26);
console.log("圆周率是%f",3.1415926);
var dog = {};
dog.name = "大黄";
dog.color = "黄色";
console.log("这是我家的小狗：%o", dog);

（2）效果图

4，格式化输出 CSS 样式

控制台还可以直接输出带有样式的内容。

console.log("%c欢迎访问 hangge.com", "background:blue; color:white; font-size:16px");

5，消息分组

为了让消息日志看起来更清晰，我们可以对消息进行分组，将同一类的输出信息放在一个分组中，具体操作如下：

console.group：输出一组信息的开头
console.groupEnd：结束一组输出信息

（1）下面是一个简单的样例

console.group("业务组织数据");
console.log("业务组织数据请求成功!");
console.log("业务组织数据处理成功!");
console.log("业务组织数据缓存成功!");
console.groupEnd();

（2）效果图

6，断言

console.assert() 可以对输入的表达式进行断言，只有表达式为 false 时，才输出相应的信息到控制台。

注意：输出断言,不影响后续的函数执行。

console.assert(1>2, "1不可能大于2!");

7,输出对象的详细信息

使用 console.dir() 方法可以 dump 对象的详细信息，包括对象里的属性和方法。

var hangge = {
  name: "航歌",
  method: function() {
    alert("欢迎访问 hangge.com");
  }
};

console.dir(hangge);

8，输出 DOM 节点信息

使用 console.dirxml() 方法可以显示网页的某个节点（node）所包含的 html/xml 代码。

var container = document.getElementById("container");
console.dirxml(container);

9，执行次数统计

console.count() 方法可以输出执行到该行的次数，可带一个描述参数用于在次数前显示。

for(var i = 0; i < 8; i++){
  console.count("当前执行次数：");
}

10，计时

通过 console.time（计时开始）和 console.timeEnd（计时结束）这两个方法，可以自动统计并显示一段代码的执行时间。

console.time("循环100万次");
var array= new Array(1000000);
for (var i = array.length - 1; i >= 0; i--) {
    array[i] = new Object();
};
console.timeEnd("循环100万次");

11，使用表格形式输出

对于一些数组对象，我们可以通过 console.table() 方法将其以表格的形式输出显示，使得结果更加容易阅读。

var languages = [
  {name:"JavaScript", fileExtension:".js"},
  {name:"Swift", fileExtension:".swift"},
  {name:"PHP", fileExtension:".php"},
];
console.table(languages);

其他