前言

console对象是浏览器内置的一个全局对象，提供了多种方法，用于将各种信息输出到浏览器的控制台中。然而，在日常应用中，许多人可能只熟悉基本的console.log方法，而对console提供的其他强大且鲜为人知的命令了解甚少。

实际上，console对象为我们打开了多种打印信息的新途径，每种方式都有其独特之处，能够满足不同场景下的调试需求。除了广为人知的console.log之外，还有许多宝藏命令等待我们去探索和利用。

使用

一、 打印调试信息

console.debug('调试信息')

打印调试信息，需要在浏览器的 console -> All levels 里面配置了 Verbose 才会显示（浏览器默认不显示）

其实，这条信息和我们用console.log()打印出来的信息差不多，没有太大的差别。但是，浏览器为了让我们更方便地查看和管理这些信息，就给它们分了个类。其中，有一类叫做“Verbose（详细）”，就是专门用来放那些不太重要、但是又想让我们知道的信息。

比如，你的网页上有个循环在不停地转，如果这个循环转得太久了，浏览器就会觉得“嗯，这个事儿得告诉你一下，虽然不是什么大问题，但你知道一下比较好”。于是，它就会把这个循环的相关信息放到“Verbose”这个类别里面，让我们能够看到。

这样，当我们查看日志的时候，就可以根据信息的类别来筛选和查找，更容易地找到我们想要的信息，也更容易地定位和解决网页上的问题。

二、打印普通信息

普通打印

console.log("普通信息")

console.log() 是最基本的用法，它用于将信息输出到浏览器的控制台，可以帮助我们了解程序在运行时的状态和数据。

使用模板字符串打印

let name = "tom"

console.log(`my name is ${name}`) // my name is tom

使用占位符打印

let name = "tom"

let age = 8

console.log("name: %s, age: %d", name, age); // name: tom, age: 8

这里使用了格式化占位符 %s %d，将后面的变量赋值给了占位符，并且是一一对应的。使用格式化占位符可以提高输出的可读性和灵活性，让我们能够更精确地控制控制台输出的格式。

下面是一些常用的占位符：

字符串：%s整数：%d 或 %i浮点数：%f对象： %o 或 %O %o 用于原始对象格式，%O 用于美化的格式。CSS 样式： %c百分号： %%%s 和其他类型混合使用：可以同时使用多个占位符来输出不同类型的数据。

打印消息加样式

console.log("%c这是一个带样式的文本", "color: red;");

可以给打印的信息添加一些样式方便查看。但一般只用于调试的时候。

三、打印警告

console.warn("这是一个警告信息")

打印警告信息，调试的时候常用。

四、打印错误信息

console.error("这是一个错误信息")

打印错误信息，调试的时候常用。

五 、打印表格

console.table([

{name: "Alice", age: 25},

{name: "Bob", age: 30},

{name: "Tom", age: 27}

])

控制台打印效果：一个表格形式的数据，一个未展开显示的数据

六、分组打印

console.group("人员名单")

console.table([

{name: "Alice", age: 25},

{name: "Bob", age: 30},

{name: "Tom", age: 27}

])

console.groupEnd()

console.group("人员分组")

console.table([

{id: 1, team: 'Alice，Tom', num: 2},

{id: 2, team: 'Bob', age: 1}

])

console.groupEnd()

这是分组打印的效果：

适用于需要区分打印不同的信息的场景，这样打印每个分组还有各自的标题，互不干扰。

console.group默认不折叠的，如果要折叠的话可以用 console.groupCollapsed()

七、打印对象结构

console.dir(document.body)

用 console.log(document) 只会打印dom的元素结构，看不到dom对象的属性、方法。

console.dir(document.body) 用来打印一些dom元素对象结构非常有用,通过这种方式我们可以看到dom对象的所有属性和方法。

八、打印计时信息

console.time("业务逻辑")

setTimeout(()=>{

console.timeEnd("业务逻辑");

},1000)

控制台输出：

常用来计算执行某段代码所需要的时间，在性能测试优化这段起很大的作用。

九、打印计数信息

const startTime = Date.now();

while (Date.now() - startTime < 2000) {

console.count("计数")

}

console.countReset("计数")

控制台输出：

可以用来记录某段代码执行了多少次。

十、打印堆栈信息

function funA() {

console.trace();

}

function funB() {

funA()

}

funB();

控制台输出：

打印堆栈信息可以用来查找一个方法被哪些方法调用了。这个在我们开发公共组件、库的经常使用。比如我们用别人的第三方库开发的时候，遇到第三方库报错的时候，浏览器控制台会打印异常的函数，以及被哪些函数调用了这个报错的函数。使用 console.trace() 打印堆栈信息,就能很清晰的看到方法的调用堆栈了。

十一、断言打印

console.assert(1.1 === 1)

控制台输出：

断言为false的时候才会打印；

node 环境下断言为false会中断程序，浏览器环境下不会

十二、清空消息

console.clear()

清空之前的所有信息

结语

在Web开发的过程中，合理且巧妙地运用console方法，就如同为我们的开发之旅点亮了一盏明灯，能让我们在复杂多变的代码世界中拥有更好的调试体验。通过充分利用console提供的各种功能，我们能够更加深入、细致地观察程序的运行状态，及时发现并解决潜在的问题，从而提升开发效率，优化代码质量，为打造更加优质、稳定的Web应用奠定坚实的基础。