前言
在如今的 Web 開發中，console 命令是我們最得力的助手之一。它不僅僅是一個簡單的日誌輸出工具，更是一個強大的除錯和分析工具，能夠幫助我們深入理解程式碼的執行機制，最佳化效能，以及快速定位問題。
console 物件是瀏覽器提供的全域性物件，它提供了一系列的方法來輸出資訊到瀏覽器的控制檯。然而，我們大多數人可能僅僅熟悉使用 console.log 來輸出資訊或者 vscode 的 debuger，而忽略了其他同樣強大但較少為人所知的命令。其實 console 物件為我們提供了很多列印的方法：
接下來我將帶大家一起嘗試 console 物件的各種方法，讓大家在之後的除錯過程中，更加得心應手。
正文 🔥🔥🔥
1. 列印除錯資訊
console.debug()
這個方法是用來列印除錯資訊的，並且在瀏覽器中只有你配置了debug纔可以顯示（瀏覽器預設不顯示）。
只有當我們開啟除錯模式，我們才能看見這個除錯資訊。
其實這個資訊和我們的 console.log() 沒有什麼本質上的區別，不過瀏覽器將它歸類到了 Verbose(詳細) 型別裡面去。在 Verbose 這個型別裡面顯示的訊息，一般級別很低，比如你的頁面有個迴圈，它卡的時間比較長，它就會顯示到 Verbose 型別中去
2. 列印訊息
2.1 普通訊息（console.log）
console.log() 是最基本、最實用的用法了。它用於將資訊輸出到瀏覽器的控制檯，可以幫助我們瞭解程式在執行時的狀態和資料。
console.log("Ywis") // Ywis
除了這個，它也有一些比較高階的用法：
let name = "Ywis"
console.log(`The value of name is ${name}`) // The value of name is Ywis
這裏使用了模板字串來輸出變數的值。
let name = "Ywis"
let age = 18
console.log("Name: %s, Age: %d", name, age); // Name: Ywis, Age: 18
這裏使用了格式化佔位符 %s %d，將後面的變數賦值給了佔位符，並且是一一對應的。使用格式化佔位符可以提高輸出的可讀性和靈活性，讓我們能夠更精確地控制控制檯輸出的格式。以下是一些常用的佔位符：
字串：%s
整數：%d 或 %i
浮點數：%f
物件： %o 或 %O
%o用於原始物件格式，%O用於美化的格式。CSS 樣式： %c
百分號： %%
%s 和其他型別混合使用：可以同時使用多個佔位符來輸出不同型別的資料。
這裏我們可以發現 console.log() 還支援定義 CSS 的格式：
每個 %c 只負責它之後的文字，直到遇到下一個 %c，當然我們也可以將樣式定義成變數。
除此之外，還有物件中的 %o 用於原始物件格式，%O 用於美化的格式。這兩者之間有什麼區別呢？對於普通的object物件時：
就是單獨的以不同的方式展示物件的內容，但是對於 DOM 節點，那就有區別了，來看下面這個場景：
可以看到，使用 %o 列印的是DOM節點的內容，包含其子節點，這種方式不會展示 DOM 元素的內部結構。而 %O 列印的是該DOM節點的物件屬性，不過在一些舊的瀏覽器中，兩者並不會有區別。
2.2 資訊（console.info)
console.info() 可以用來列印資訊類說明資訊，它和 console.log() 的用法一致，在谷歌瀏覽器中他們幾乎是完全一樣的：
在其他的瀏覽器中，就是訊息展示出來的樣式不一樣，便於我們去做一個區分（這裏以火狐瀏覽器為例子）：
2.3 表格（console.table）
它允許你以表格的形式列印陣列或物件的集合。這對於除錯和展示資料集非常有用，特別是當你需要檢視多個物件或陣列項的屬性時。console.table() 方法有兩個引數，第一個引數是必須引數即需要列印的物件，第二個引數是可選引數。來看下面的例子：
列印陣列
列印物件
列印陣列物件
除此之外，列印其他如物件陣列、陣列陣列都是類似的
2.4 分組（console.group）
有時候我們的訊息比較多，比如在一個計時器中列印很多的訊息，那麼我們可以把一些同類的訊息，把它分成一個組。用法還是比較簡單的，一個完整的資訊分組以 console.group() 開始，console.groupEnd() 結束：
其中，分組也是允許巢狀的：
在列印分組的時候，預設是展開的，如果我們想摺疊起來的話，我們可以使用 console.groupCollapsed() 開始分組：
2.5 物件結構（console.dir）
console.dir() 方法可以在控制檯中顯示指定 JavaScript 物件的屬性，包括其原型鏈上的屬性，並透過類似檔案樹樣式的互動列表顯示。大多數的情況下，console.log() 和 console.dir() 的效果是差不多的，但在列印 DOM 結構的時候卻是完全不同的。
在這個場景可以看見，console.log() 只是列印元素的 DOM 結構，如果我們想要它的物件結構，元素的屬性，就要使用 console.dir()。
2.6 計時（console.time）
當我們需要計算一段程式碼它的耗時時間，我們可以使用 console.time() 啟動一個計時器，並呼叫 console.timeEnd() 來停止定時器，輸出耗時時間。
這兩個方法都可以接受一個引數，該引數為字串，用來標記唯一的計時器（當只有一個計時器時，就可以不用傳參）。除了使用 console.timeEnd() 作為結尾，我們還可以使用 console.timeLog() 作為結尾，這兩者的用法是一樣的，不過 console.timeEnd() 是列印計時器，直到結束的時間。console.timeLog() 是列印計時器當前的時間，來個場景理解一下：
除了列印的時間不同以外，console.timeEnd() 還會終止當前計時器的計時，console.timeLog() 並不會。
2.7 計數（console.count）
這個計數方法其實很簡單，每當 console.count() 呼叫一次，它的次數就 +1。
當然這個方法也接受一個引數，該引數為字串，作用也是用來標記，這樣列印就變為：
且針對不同的引數，count() 是分別計數的，那當我們想重置一個計數時，我們可以使用 console.countReset() 方法。該方法也是可選引數，如果提供了引數label，此函式會重置與label相關聯的計數，將count重置為0。如果省略了引數label，此函式會重置預設的計數器，將count重置為0。
2.8 堆疊（console.trace）
console.trace() 方法可以用於輸出呼叫該方法時的呼叫棧跟蹤，這個方法還是很實用的，幫助你瞭解程式碼在哪個地方被呼叫以及呼叫的順序。
trace() 的作用： 當我們程式碼數量比較多了，特別是在寫框架時，分成了許多的檔案，分成了很多的模組和子函式。有時候一個函式，它可能在多個地方被呼叫，當這個函式執行的過程中出了一些問題，它沒有報錯，但它達不到我們的預期，我們就可以使用 trace() 去找到是誰呼叫的這個函式，那麼這就是堆疊資訊了。
2.9 斷言（console.assert）
有的時候，我們要做一些簡單的測試我們就可以使用 console.assert()。它的語法為：
console.assert(expression, message...)
它接受兩個引數，一個為表示式和一個可選的訊息。如果表示式結果為 false，則控制檯會顯示一條錯誤資訊。正確則什麼也不顯示。
3. 列印警告
console.warn()
這個一般寫框架、寫庫的人用的比較多，該方法用於在控制檯輸出警告資訊，它的用法和 console.log() 是完全一樣的，只是顯示的樣式不太一樣。
4. 列印錯誤
console.error()
這個也是寫框架或者寫庫的人用的比較多的方法，用於在控制檯輸出錯誤資訊。用法也和 console.log() 和 console.warn() 一樣的，只是顯示的樣式不太一樣。
5. 清空訊息
console.clear()
該方法就是把之前列印的資訊全部清空。
for(let i = 0; i<5; i++){
console.count()
}
console.clear()
console.log("Ywis")
輸出為：
結尾 🌸🌸🌸
看完這篇文章，小夥伴們已經瞭解到 console 物件在前端開發中扮演著至關重要的角色。從基礎的 console.log() 到高階的 console.table() 和 console.dir()，每一個命令都是我們除錯工具箱中的利器。相信大家在之後的除錯之路將會越走越順，最後祝你也祝我在今後日子裏能夠登高望遠，心向彼岸。
