console
第一印象便是console.log
,通过它在浏览器控制台进行调试输出。但除此之外还有许多方法。
比如在访问百度首页时候的控制台,会有以下的内容。但是仔细一看,你会发现,它有颜色。怎么做到的呢?
其实不难发现,输入console
,可知它是一个对象,里面有着高达14个方法,而我们最常用只有一个log()
,可怕。
通过文档我们清晰的知道各个方法的作用,以及使用方法。
通过占位符,可以改变输出的内容和样式。其中%c
被称为 CSS占位符。
详解
console.log()
首先,除了console.log(object)
这种语法,还有console.log(object, otherObject, string)
将所有东西都整齐的打印出来。另外,还有console.log(msg, value)
,通过占位符来输出,执行方式与 C 语言的输出类似。
对于%c
,输出样式。
一个%c
是将此后所有内容都进行渲染
console.log('I am a %cbutton', 'color: white; background-color: orange; padding:2px 5px; border-radius: 2px');
两个%c
则是对其中间内容渲染。
console.log('I am a %cbutton%c not a div', 'color: white; background-color:orange; padding: 2px 5px; border-radius: 2px','color: "auto"');
当然渲染的只是样式,没有实质性的功能(按钮,点击事件等)
如果想%c
展示出来呢? 与\
类似,写两个即可,比如将上述的语句展示出来。
console.log('I am a %cbutton%%c not a div', 'color: white; background-color:orange; padding: 2px 5px; border-radius: 2px','color: "auto"');
console.dir()
通常看,它与log()
的功能非常类似,但也有略微不同,主要在对文档结构的输出方面。
展开来看,log
只是输出了文档结构的内容,怎么写的怎么输出。清晰展示DOM节点,当我们选中时候,还可以跳转子DOM节点。
而dir
却是一种更对象化的输出方式观察元素节点,在监测元素节点方面,这种结果无疑是最好的。
console.warn()
它可能是log()
最直接明显的替换产生的方法,它的级别是warn级别而不是一个info级别,你可以将所有的console.log()
过滤掉只留下console.warn()
。
在Vue的部分源码中也是使用console.warn()
来操作的。
//vue.js
tip = function (msg, vm) {
if (hasConsole && (!config.silent)) {
console.warn("[Vue tip]: " + msg + (vm ? generateComponentTrace(vm) : ''));
}
};
console.table()
这个,就是将对象数组展示为列表的数据方法,变得更加简洁可观。例如对一个对象数组使用此方法。
对于log()
输出结果是一个小箭头的省略形式,展开来看,可以清晰的查看对象。
而table()
的输出更加简洁,更直观展示。并且值得一提的是,可以通过第一行的右上角箭头可以进行排序。table()
最多只处理1000行的数据能力,不适用所有数据集合。
当然如果只想要某一列展示,可以通过第二个参数进行传递
console.table(transactions,["id","price"])
console.assert()
它的第一个参数是falsey
时,与log()
函数无异。当第一个参数是真值的时候什么都不做。
牢记,它的作用是判断,而不是过滤。
它的使用场景与 循环时候要显示特殊的 数据相似。
if(obj.num === 3){
console.log(obj)
}
假设我们上面的值在时间戳里有一个 null 或者 0,这会破坏代码日期格式。
当和任何有效的事物对象一起使用时会跳过。但是有一个触发了我们的日志记录,因为时间戳在 0 和 null 时为假值。
有时候,想实现更加复杂的场景,举例,对于上述表格中看到了关于用户WAL2025的数据,并想展示来自它们的事务。
console.assert(transactions.buyer === 'WAL2025', transactions);
看起来没毛病,但是并没有用,牢记,场景必须是否定态,它的作用是判断,而不是过滤。
console.assert(transactions.buyer !== 'WAL2025', transactions);
结语
剩下的方法,演示过于困难或者简单,还是看文档理解比较好。
其他方法的存在,让我们可以得到比log()
的信息更多一些,并且不需要调试器的情况下,这些工具还是很有用的。
附图
简洁直观的理解使用 console