1. 需求分析

一般情況下，我們?cè)陧?xiàng)目中進(jìn)行代碼調(diào)試時(shí)，往往只會(huì)在邏輯中使用console.log進(jìn)行控制臺(tái)打印調(diào)試。

這種方式雖然比較常規(guī)直接，但是如果打印數(shù)據(jù)多了，就會(huì)導(dǎo)致你的控制臺(tái)消息變得異常混亂。

所以，我們有了更好的選擇，那就是console對(duì)象提供的其它API，來(lái)讓我們能夠更清晰的區(qū)分打印信息。

2. 實(shí)現(xiàn)步驟

（1）console.warn

當(dāng)我們需要區(qū)分一些比較重要的打印信息時(shí)，可以使用warn進(jìn)行警告提示。

（2）console.error

當(dāng)我們需要區(qū)分一些異常錯(cuò)誤的打印信息時(shí)，可以使用error進(jìn)行錯(cuò)誤提示。

（3）console.time/timeEnd

想看看一段代碼運(yùn)行需要多長(zhǎng)時(shí)間，可以使用time。

這對(duì)于需要一些時(shí)間的CPU密集型應(yīng)用程序非常有用，例如神經(jīng)網(wǎng)絡(luò)或HTML Canvas讀取。

下面執(zhí)行這段代碼：

console.time("Loop timer")
for(let i = 0; i < 10000; i++){
// Some code here
}
console.timeEnd("Loop timer")

結(jié)果如下：

（4）console.trace

想看看函數(shù)的調(diào)用順序是怎樣的嗎？可以使用trace。

下面執(zhí)行這段代碼：

<script setup>
function trace(){
console.trace()
}
function randomFunction(){
trace();
}
randomFunction()
</script>

在setup中，randomFunction 調(diào)用trace，然后又調(diào)用console.trace。

因此，當(dāng)您調(diào)用 randomFunction 時(shí)，您將得到類(lèi)似的輸出，結(jié)果如下：

（5）console.group/groupEnd

當(dāng)我們需要將一類(lèi)打印信息進(jìn)行分組時(shí)，可以使用group。

下面執(zhí)行這段代碼：

console.group("My message group");

console.log("Test2!");
console.log("Test2!");
console.log("Test2!");

console.groupEnd()

結(jié)果如下：

（6）console.table

在控制臺(tái)中打印表格信息，可以使用table。

對(duì)！你沒(méi)聽(tīng)錯(cuò)，就是讓我們以表格形式展示打印信息。

如果使用log打印：

var person1 = {name: "Weirdo", age : "-23", hobby: "singing"}
var person2 = {name: "SomeName", age : "Infinity", hobby: "programming"}

console.log(person1, person2);

結(jié)果如下：

這樣做是不是讓數(shù)據(jù)看起來(lái)很混亂。

反之，如果我們使用table輸出：

var person1 = {name: "Weirdo", age : "-23", hobby: "singing"}
var person2 = {name: "SomeName", age : "Infinity", hobby: "programming"}

console.table({person1, person2})

結(jié)果如下：

怎么樣！從來(lái)不知道控制臺(tái)可以看起來(lái)如此干凈，對(duì)吧！

（7）console.clear

最后，使用clear把控制臺(tái)清空吧！

3. 問(wèn)題詳解

（1）可以自定義log的樣式嗎？

答案當(dāng)然是可以的，只需要借助%c這個(gè)占位符。

%c 是console的占位符，用于指定輸出樣式或應(yīng)用 CSS 樣式到特定的輸出文本。

但請(qǐng)注意，%c 占位符只在部分瀏覽器中支持，如 Chrome、Firefox 等。

通過(guò)使用 %c 占位符，可以在 console.log 中為特定的文本應(yīng)用自定義的 CSS 樣式。這樣可以改變輸出文本的顏色、字體、背景等樣式屬性，以便在控制臺(tái)中以不同的樣式突出顯示特定的信息。

以下是使用%c 占位符應(yīng)用樣式的示例：

console.log("%c Hello, World!", 
"color: red; font-weight: bold;border: 1px solid red;");

結(jié)果如下：

通過(guò)使用 %c 占位符和自定義的樣式規(guī)則，可以在控制臺(tái)輸出中以不同的樣式突出顯示特定的文本，使得輸出更加清晰和易于識(shí)別。

這在調(diào)試和日志記錄過(guò)程中非常有用，特別是當(dāng)需要突出顯示特定類(lèi)型的信息或錯(cuò)誤時(shí)。