这是我参与更文挑战的第10天，活动详情查看 更文挑战
对于我们前端开发者来说，Chrome自带的控制台绝对是经常用到的，除了console.log命令，其实还有很多实用的命令，一起来看看吧！
以下调试使用版本Chrome 91.0.4472.114（正式版本） （64 位）
在控制台输出样式
在控制台输出的时候，除了直接显示，我们还可以自定义样式显示，比如放大字体，改为红色
console.log('%cThis is large red text', 'color: red; font-size: 30px;');
关键点就是%c
本质上发生的是 %c读取参数中的字符串以确定要应用的样式。
所以，假设有第二个样式被传递，%c移动到下一个参数，就像字符串替换一样。
参数列表中的空字符串会将样式重置为默认值。
console.log('This is %cred text %cand this is %cgreen text.', 'color: red;', '', 'color: green;');
更加丰富的样式
const style=`
background: white;
border: 3px solid red;
color: red;
font-size: 50px;
margin: 40px;
padding: 20px;
`
console.log('%cHello there!',style );
更复杂一点的示例
const clearStyles = '';
const largeText = 'font-size: 20px;';
const blueText = 'color: blue;';
const largeRedText = 'font-size: 20px; color: red;';
const largeGreenText = 'font-size: 20px; color: green;';
console.log(`This is %clarge red text.
%cThis is %clarge green text.
%cThis is %clarge blue text.`,
largeRedText,
clearStyles,
largeGreenText,
clearStyles,
largeText + blueText
);
对打印进行分组：group()、groupCollapsed() 和 groupEnd()
如果把group换成groupCollapsed，则默认是收起的;
console.group如果不写内容，会输出自己；
console.group();
console.log('one');
console.log('two');
console.log('three');
console.groupEnd();
console.group('this is a label');
console.log('one');
console.log('two');
console.log('three');
console.groupEnd();
console.groupCollapsed();
console.log('one');
console.log('two');
console.log('three');
console.groupEnd();
分组还可以结合前面的样式进行使用
console.group('%cstyled group', 'font-size: 20px; color: red;');
console.log('one');
console.log('two');
console.log('three');
console.groupEnd();
结构化显示：table()
table可以让你更加结构化的显示出你的数据，你可以在打印数组或对象的时候使用它
let basicArray = [
'one',
'two',
'three'
];
console.table(basicArray);
计时：time()和 timeEnd()
可以用这些方法来记录完成某件事所需的时间
// 启动计时器
console.time('testForEach');
// (写一些测试用代码)
for (let i=0;i<5;i++){
console.log(i)
}
// 停止计时，输出时间
console.timeEnd('testForEach');
复制console.log打印的对象
最常用的console.log命令相信大家都已经很熟悉，不需要在介绍了；
在这里想扩展一下的是，怎么复制console.log打印出来的对象；
我们现在在控制台输出一个对象
直接ctrl+C复制粘贴到记事本是这样的
很明显可以看到不是我们想的要的格式，我们可以这样做；
鼠标移到红框圈的位置，点击copy object，然后打开记事本粘贴即可
注意：点击位置不同，显示出来的内容也不同
debug()、error()、info()、log()、warn()
这五个命令可以说是控制台打印五兄弟了，他们都可以在控制台输出信息，但是显示上会有一些不一样；
从下图可以看到：
error代表错误，会显示为红色，并且可以扩展显示出有关输出的附加信息；
warn代表警告，也会显示出不同的颜色，和输出附加的信息；
小技巧1： 点开All levels，可以选择想要显示的打印方式
小技巧2： 一个语句同时输出多个数据时，控制台会内联显示，如果是要进行数据对比时，这用起来会很方便
console.log({year: '2020',month:'01',date:'01'}, {year: '2021',month:'02',date:'01'});
清空：clear()
清空控制台的命令
console.clear();
或直接
clear();
有的时候，我们打开控制台的时候，会看到很多警告信息，这样不利于我们看到我们想看的信息，这个时候就需要清空一下控制台了。
引用参考A Guide to Console Commands 小可爱看完就点个赞再走吧！🤞🤞🤞
