JS - console命令使用详解(Chrome控制台日志技巧)
通过 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);