相信大家在使用 javascript 開發時一定都有用過 console.log() 來檢查開發過程中的資訊，其實除了 console.log() 外還有很多相關的方法可以讓我們在開發時更方便檢查資訊喔，以下就來列舉一些好用的 console 方法。

console.warn()

console.warn() 可以讓你在訊息前面加上黃色的驚嘆號。

console.warn("warning..")

使用後會像這樣：

有些比較嚴重的訊息可以用這樣來表示。

 

console.error()

相較於 concole.warn()，console.error() 可以用來顯示更嚴重的問題。

console.error("error!!")

顯示會像這樣：

 

console.log() 自訂樣式

console.log() 也可以自訂樣式，只要在要 console 的內容前面加上 %c，後面就可以自訂 css 樣式，像是：

console.log(`%c 漂亮的顏色`, 'color: rgb(189, 39, 66); font-size: 18px');

顯示的結果就會長這樣：

 

console.table()

當我們要檢查陣列或物件如果是用 console.log() 時會是像這樣：

let users=[{
            name: "Joe",
            age: 12,
            gender: "male"
        },{
            name: "May",
            age: 13,
            gender: "female"
        },{
            name: "Tom",
            age: 12,
            gender: "male"
}]
console.log(users)

結果會長這樣：

雖然也是清楚，但如果我們使用 console.table() 去顯示這份資料，就會變這樣：

console.table(users)

 

是不是就更清楚了？

 

console.group() console.groupEnd()

如果要 console 的資訊很多，可以藉由 console.group() 和 console.groupEnd() 群組起來可以更好閱讀：

console.group();
console.log("Joe")
console.log("May")
console.groupEnd()

 

console.clear()

如果要把 console 的資訊清掉，可以使用 console.clear()，當然也是可以透過瀏覽器的介面清除。