为啥会突然想起写一篇关于console的文章？笔者接触JS也不少时间了，除了用vscode的debuger，其实大部分时间都在使用console.log()方法来输出一些或者调试程序，我相信很多刚开始接触JS的同志，应该也都习惯使用console.log()。但是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()之后
输出“调试”级别的消息,并且在浏览器中只有你配置了debug才可以显示。
例如在火狐浏览器中：
当你没有勾选调试的时候：是无法显示debug的信息的。
只有你勾选调试的时候，才会显示。
向 Web 控制台输出一条错误消息，并且只有才浏览器配置了errors才可以显示。
下图是在火狐浏览器的效果
下图是在chrome的效果
两个浏览器都会在error的前面加上一个小图标。
向web控制台输出一个通知信息，并且只有在浏览器配置info可见的时可以显示。
下图是在火狐浏览器的效果
下图是在chrome的效果
在火狐浏览器中会在前面加上小图标，而chrome没有
向 Web 控制台输出一条警告信息，并且只有在浏览器配置warning可见的时可以显示。
下图是在火狐浏览器的效果
下图是在chrome的效果
两个浏览器都会在warn的前面加上一个小图标。
输出 count() 被调用的次数。此函数接受一个可选参数 label，如果你不设置参数的话，这个参数默认名叫**“default”**。
用来统计
console.count(‘我是’);
console.count(‘前端picker’);
console.count(‘我是’);
console.count(‘前端picker’);
console.count(‘我是’);
console.count(‘前端picker’);
通过下图可以看到，针对不同的参数，count()是分别累计的。
用来重启计数器的.同样也接收一个label参数，
如果提供了参数label，此函数会重置与label关联的计数。
如果省略了参数label，此函数会重置默认的default计数器。
在控制台中显示指定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方法中学习。
显示一个明确的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();
这个方法需要一个必须参数，参数 必须是一个数组或者是一个对象；还可以使用一个可选参数 columns。
它会参数以表格的形式打印出来。数组中的每一个元素（或对象中可枚举的属性）将会以行的形式显示在表格中。
表格的第一列是 index。如果数据 data 是一个数组，那么这一列的单元格的值就是数组的索引。 如果数据是一个对象。
数组
let ary = [
‘1’,
‘2’,
‘3’
];
console.table(ary);
object对象
let obj = {
name: ‘前端picker’,
age: ‘18’,
};
console.table(obj);
对象数组
let aryOfObjects = [
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。
深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！
由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）
最后
技术是没有终点的，也是学不完的，最重要的是活着、不秃。零基础入门的时候看书还是看视频，我觉得成年人，何必做选择题呢，两个都要。喜欢看书就看书，喜欢看视频就看视频。最重要的是在自学的过程中，一定不要眼高手低，要实战，把学到的技术投入到项目当中，解决问题，之后进一步锤炼自己的技术。
技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。有需要面试题资料的朋友点击这里可以免费领取。
全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。**
[外链图片转存中…(img-UO2NCy8d-1712087303126)]
[外链图片转存中…(img-8EmAWrQB-1712087303127)]
既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！
[外链图片转存中…(img-5rMruXLp-1712087303127)]
由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）
最后
技术是没有终点的，也是学不完的，最重要的是活着、不秃。零基础入门的时候看书还是看视频，我觉得成年人，何必做选择题呢，两个都要。喜欢看书就看书，喜欢看视频就看视频。最重要的是在自学的过程中，一定不要眼高手低，要实战，把学到的技术投入到项目当中，解决问题，之后进一步锤炼自己的技术。
技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。有需要面试题资料的朋友点击这里可以免费领取。
[外链图片转存中…(img-w9D5QIxk-1712087303128)]
5056
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
