JS30 - 09 Dev Tools Tricks

🚀 Demo Link

在開發時，console 是我們最常用的除錯工具之一，本次挑戰是學習如何使用 console 技巧，來幫助開發者更有效率地除錯和開發程式 🪄

在 Demo 頁面中，先開啟 F12 > Console，接著按下頁面中 "Run in Console" 按鈕，就可以看到對應的 console 結果。

這次的內容都呈現在網頁上了，所以就拿比較常用的方法介紹一下。

console.log

console.log() 是最常用的 console 方法，可以印出訊息到 console 中，方便開發者除錯。

可以利用下列進行格式化輸出：

• %s 字串
• %d 數字
• %o 物件
• %c 設定印出的文字樣式

console.clear

console.clear() 可以清除 console 中的所有訊息。

console.table

console.table() 可以將陣列或物件以表格的方式印出。

console.dir

console.dir() 可以印出物件的屬性。適合用來檢視 DOM 元素的屬性，會比 console.log() 更直覺

console.log(document.body)
console.dir(document.body)

• console.log() 會印出 DOM 元素的 HTML 結構
• console.dir() 會印出 DOM 元素的屬性

console.warn、console.error、console.info

console.warn()、console.error()、console.info() 可以分別印出不同類型的訊息，並且會有不同的樣式，方便開發者區分。

console.warn('This is a warning message')
console.error('This is an error message')
console.info('This is an info message')

• console.warn() 會印出黃色的警告訊息，通常用來提醒開發者
• console.error() 會印出紅色的錯誤訊息，通常用來顯示錯誤訊息
• console.info() 會印出藍色的資訊訊息，通常用來顯示一般訊息

參考資料

• console