2024年最新Console 3000字完整指南，让你不只会用console(1)，2024年最新掌握了这些C C++高级工程师必备知识-CSDN博客

本文链接：https://blog.csdn.net/2401_84973631/article/details/138828371

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上C C++开发知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

如果你需要这些资料，可以戳这里获取

但是在火狐浏览器中，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的追踪记录");
}


![img](https://img-blog.csdnimg.cn/img_convert/c37922ec358b8e6ec37f1c883c816080.png)
![img](https://img-blog.csdnimg.cn/img_convert/fe53be08d5bb44ce5591577b91f1f788.png)

**既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上C C++开发知识点，真正体系化！**

**由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新**

**[如果你需要这些资料，可以戳这里获取](https://bbs.csdn.net/topics/618668825)**

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


[外链图片转存中...(img-dERlPGfN-1715624314850)]
[外链图片转存中...(img-9x5INrWk-1715624314851)]

**既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上C C++开发知识点，真正体系化！**

**由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新**

**[如果你需要这些资料，可以戳这里获取](https://bbs.csdn.net/topics/618668825)**