为啥会突然想起写一篇关于console的文章?笔者接触JS也不少时间了,除了用vscode的debuger,其实大部分时间都在使用console.log()方法来输出一些或者调试程序,我相信很多刚开始接触JS的同志,应该也都习惯使用console.log()。但是log的能力是有限的,并不能满足所有的场景。比如我们相用表格数据对象。
下面这张图,纯粹是看了扫黑风暴想到的!!!
[](()console.log()
大家最常用的应该就是这个属性了,不过你有没有使用这个方法输出console对象。
console.log(console)
[](()语法
[](()console.log(常见JS数据)
console.log(123)
123
[](()console.log( %s %d %f %o 等占位符写法(类似C的print))
console.log(‘我是 %s’,‘前端picker’)
我是 前端picker
[](()console.log(ES6 模板字符串)
const nickName = “前端picker”
console.log(`我是 ${nickName}``)
我是 前端picker
[](()数组/对象会显示在一行
console.log({object: ‘object’}, {object: ‘object’});
console.log([‘array’, ‘array’], [‘array’, ‘array’]);
[](()CSS样式美化输出
在上面我们介绍了占位符输出,其实还有占位符%c,可以用来接收css样式。
console.log(‘我是红色 %c 文字’, ‘color: red;’);
每个%c只负责它之后的文字,知道遇到下一个%c;
console.log(‘This is %cred text %c 我没颜色 %c 我是绿色.’, ‘color: red;’, ‘’, ‘color: green;’);
当然你也可以选择把样式定义成变量。
let style=“background: white;border: 3px solid red;color: red;font-size: 50px;margin: 40px;padding: 20px;”
undefined
console.log(‘%c我是log!’, style);
[](()console.clear()
大部分的浏览器在开发者工具都内置了清除控制条的方法。
其实console对象也提供了clear方法来清空控制台。
当你执行console.clear()之后
[](()cosole.debug()
输出“调试”级别的消息,并且在浏览器中只有你配置了debug才可以显示。
例如在火狐浏览器中:
当你没有勾选调试的时候:是无法显示debug的信息的。
只有你勾选调试的时候,才会显示。
[](()error()
向 Web 控制台输出一条错误消息,并且只有才浏览器配置了errors才可以显示。
下图是在火狐浏览器的效果
下图是在chrome的效果
两个浏览器都会在error的前面加上一个小图标。
[](()info()
向web控制台输出一个通知信息,并且只有在浏览器配置info可见的时可以显示。
下图是在火狐浏览器的效果
下图是在chrome的效果
在火狐浏览器中会在前面加上小图标,而chrome没有
[](()warn()
向 Web 控制台输出一条警告信息,并且只有在浏览器配置warning可见的时可以显示。
下图是在火狐浏览器的效果
下图是在chrome的效果
两个浏览器都会在warn的前面加上一个小图标。
[](()console.count()
输出 count() 被调用的次数。此函数接受一个可选参数 label,如果你不设置参数的话,这个参数默认名叫**“default”**。
[](()用来统计
console.count(‘我是’);
console.count(‘前端picker’);
console.count(‘我是’);
console.count(‘前端picker’);
console.count(‘我是’);
console.count(‘前端picker’);
通过下图可以看到,针对不同的参数,count()是分别累计的。
[](()console.countReset()
用来重启计数器的.同样也接收一个label参数,
如果提供了参数label,此函数会重置与label关联的计数。
如果省略了参数label,此函数会重置默认的default计数器。
[](()console.dir()
在控制台中显示指定JavaScript对象的属性,并通过类似文件树样式的交互列表显示。
也就是语法是:
console.dir(object)
const auther = {
name: ‘前端picker’,
age: ‘18’,
};
console.log(auther);
console.dir(auther);
在chrome浏览器中,是支持这个属性的,下图可以看出与log的不同
但是在火狐浏览器中,log和dir的输出一致,不同的是火狐会默认展开dir的结果。
当然log和dir在输出dom结构的时候是完全不同的。不过这个我们放在dirxml方法中学习。
[](()console.dirxml()
显示一个明确的XML/HTML元素的包括所有后代元素的交互树。 如果无法作为一个element被显示,那么会以JavaScript对象的形式作为替代。 它的输出是一个继承的扩展的节点列表,可以让你看到子节点的内容。
同时也支持object。
在dir中我们把DOM留到了这里。
创建一个DOM对象
var childNode = document.createElement(‘p’);
childNode.innerHTML = ‘这里是提示信息〜〜’;
使用log/dir/dirxml输出
log
dir
dirxml
可以看出log和dirxml的输出效果是一致的,是以DOM的形式输出的,dir则输出的是属性的值。
[](()group()、groupCollapsed() 和 groupEnd()
将不同的控制台输出组合在一起以显示它们之间的一种关系形式。通常是组合在一起使用的。
group接收一个参数,表示组名,如果不设置的话,在不同的浏览器表现不一致,浏览器默认展开组。
groupCollapsed()与group的不同在于groupCollapsed会自动折叠组。
groupEnd()表示组的结束。
[](()group+groupEnd
console.group();
console.log(‘name:’);
console.log(‘前端picker’);
console.groupEnd();
console.group(‘参数’);
console.log(‘age’);
console.log(‘18’);
console.groupEnd();
下面是chrome的效果。不设置组名的话,默认是console.group,同时一组的输出会缩进。
下面是火狐的效果不设置组名的话,默认是<无组标签>
[](()groupCollapsed+grounEnd
console.groupCollapsed();
console.log(‘name:’);
console.log(‘前端picker’);
console.groupEnd();
console.group(‘参数’);
console.log(‘age’);
console.log(‘18’);
console.groupEnd(‘参数’);
[](()嵌套
console.group(‘下面是作者信息’);
console.log(‘第1项’);
console.group(‘name’);
console.log(‘前端picker’);
console.groupEnd();
console.log(‘第2项’);
console.group(‘age’);
console.log(‘18’);
console.groupEnd();
console.groupEnd();
[](()CSS样式美化-%c
console.group(‘%c下面是作者信息’,‘color:red;’);
console.log(‘第1项’);
console.group(‘name’);
console.log(‘前端picker’);
console.groupEnd();
console.log(‘第2项’);
console.group(‘age’);
console.log(‘18’);
console.groupEnd();
console.groupEnd();
[](()console.table()
这个方法需要一个必须参数,参数 必须是一个数组或者是一个对象;还可以使用一个可选参数 columns。
它会参数以表格的形式打印出来。数组中的每一个元素(或对象中可枚举的属性)将会以行的形式显示在表格中。
表格的第一列是 index。如果数据 data 是一个数组,那么这一列的单元格的值就是数组的索引。 如果数据是一个对象。
[](()数组
let ary = [