#yyds干货盘点#Console 3000字完整指南，让你不只会用console.log !

创作不易，求一个免费的赞，谢谢啦 ！！！

。

前言

为啥会突然想起写一篇关于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 = '<span>这里是提示信息〜〜</span>';

使用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 = [
  '1',
  '2',
  '3'
];
console.table(ary);

object对象

let obj = {
  name: '前端picker',
  age: '18',
};
console.table(obj);

对象数组

let aryOfObjects = [
  {
    name: '张三',
    age: '12',

  },
  {
    name: '李四',
    age: '18',

  },
  {
    name: '王五',
    age: '19',
  }
];
console.table(aryOfObjects);

如图所示，table()为我们提供了一个很好的对象布局，其中重复键作为列标签。，每个对象中的所有键都将表示为一列，无论其他对象中是否有对应的键与数据。如果对象没有键列的数据，则它显示为空。

数组数组

let aryOfArray = [
[1,2,3],[3,4,5],[6,7,8]
];
console.table(aryOfArray);

数组数组类似于对象数组。它使用内部数组的索引作为列标签，而不是作为列标签的键。因此，如果一个数组的项目数比其他数组多，那么这些列的表中将有空白项目。就像对象数组一样。

对象数组数组

let aryOfArraysWithObject = [
  ['1', '2',  {
    name: '张三',
    age: '12',

  },],
  ['3', '4',  {
    name: '李四',
    age: '18',

  },}],
  ['5', '6',  {
    name: '王五',
    age: '19',
  }]
];

console.table(aryOfArraysWithObject);

在Chrome中，要查看第三列中这些对象中包含的内容，是无法展开的，也就是无法查看。。

不过在火狐浏览器中，会自动展开，可以清除的看到结果

time()、timeLog() 和 timeEnd()

time()

你可以启动一个计时器来跟踪某一个操作的占用时长。每一个计时器必须拥有唯一的名字，页面中最多能同时运行10,000个计时器。当以此计时器名字为参数调用 console.timeEnd() 时，浏览器将以毫秒为单位，输出对应计时器所经过的时间。

console.time(计时器名称)

timeEnd()

停止一个通过 console.time() 启动的计时器,并并输出结束的时间

console.timeEnd(计时器名称)

timeLog()

在控制台输出计时器的值，该计时器必须已经通过 console.time() 启动。

console.timeLog()(计时器名称)

使用

console.time('this is a timer');
console.timeLog('this is a timer');
console.timeEnd('this is a timer');

计算for的时间

console.time('this is a timer');
for(let  i=0; i<10000000;i++){
    
}
console.timeLog('this is a timer');
console.timeEnd('this is a timer');

console.assert()

console.assert()命令类似于前面提到的错误命令。不同之处在于断言允许使用布尔条件来确定是否应该将文本输出到控制台。 例如：你想测试一个变量的值，并且这个值不等于’前端picker’， 如果变量低于该数字并且条件解析为 true，则 assert 命令不执行任何操作。如果条件解析为 false，则显示输出文本。通过这种方式，你就不需要通过if判断是不是需要输出之后，再使用console.error()输出。

let name = '张三';
console.assert(name === '前端picker', '不是是前端picker，无法输出');
let name1 = '前端picker';
console.assert(name1 === '前端picker', '不是前端picker------1，可以输出');

在Chrome中， 还可以输出显示断言来自何处。

let value = 2;
function chackValue() {
    chackValue3();
}
function chackValue2() {
    chackValue3();
}
function chackValue3() {
  console.assert(value < 1, 'This was false.');
}
chackValue();

为了方便看，我们使用vscode标注了行数。

通过下图可以看出，Chrome告诉我们断言在9行。

console.trace

调用堆栈

在学习trace之前我们先来学习什么是调用堆栈！！！ 有这样四个函数 function1调用function2 ，function2调用function3，function3调用function4 看这张图，这几个函数呈现出堆栈的特征。最后被调用的函数出现在最上方。因此称呼这种关系为调用堆栈(call stack)。

trace可以干啥

用来记录 JavaScript 堆栈跟踪,同时我们还还可以添加参数，用来表示当前跟踪的名册灰姑娘。

function f1(){
     console.log('f1')
     f2()
}
function f2(){
     console.log('f2')
     f3()
}
function f3(){
     console.log('f3')
     f4()
}
function f4(){
     console.log('f4')
     console.trace("f4的追踪记录");
}

从图中我们可以看到：触发 console.trace 之前调用的最后一个函数是f4。所以这将是调用堆栈的顶部。然后一次是f3,f2 ,f1

后记

下面这句话是在掘金网站的某个隐蔽的地方看到的，大家可以评论区猜猜！！！！