每個瀏覽器都提供了一個控制台，讓您可以與 Web 平台 API 進行交互，並通過打印由網頁中運行的 JavaScript 代碼生成的消息來查看代碼的內部結構。
控制台概述
控制台工具欄很簡單。有一個按鈕可以清除控制台消息，您還可以在 macOS 上單擊 cmd-K ，或在 Windows 上單擊 ctrl-K 以清除控制台消息，第二個按鈕可以激活一個側邊欄，讓您可以按照文本或消息類型進行過濾，例如錯誤、警告、信息、日誌或調試消息。
您還可以選擇隱藏網絡生成的消息，只關注 JavaScript 日誌消息。
控制台不僅是您可以查看消息的地方，還是與 JavaScript 代碼和 DOM 進行交互的最佳方式，並且有許多時候還用於從頁面上獲取信息。
讓我們輸入我們的第一條消息。請注意 > ，讓我們在此處點擊並輸入
console.log('test')
控制台充當了一個 REPL（Read-Eval-Print-Loop） ，這意味著它解釋我們的 JavaScript 代碼並打印一些東西。
使用控制台日誌格式化
正如您所見，console.log('test') 在控制台中打印了 ’test’。
在您的 JavaScript 代碼中使用 console.log 可以幫助您調試，例如打印靜態字符串，但您還可以將變量作為參數傳遞給它，該變量可以是 JavaScript 原生類型（例如整數）或對象。
您可以將多個變量傳遞給 console.log ，例如：
console.log('test1', 'test2')
您還可以通過傳遞變量和格式指定符來格式化漂亮的短語。
例如：
console.log('我的 %s 有 %d 歲', '貓', 2)
%s將變量格式化為字符串%d或%i將變量格式化為整數%f將變量格式化為浮點數%o用於打印 DOM 元素%O用於打印對象表示形式
示例：
console.log('%o, %O', document.body, document.body)
另一個有用的格式指定符是 %c ，它允許您傳遞 CSS 格式化字符串。例如：
console.log(
'%c 我的 %s 有 %d 歲',
'color: yellow; background:black; font-size: 16pt',
'貓',
2
)
清除控制台
在編輯控制台時，有三種清除控制台的方法。
第一種方式是單擊控制台工具欄上的 清除控制台日誌 按鈕。
第二種方法是在控制台中輸入 console.clear() ，或者在您的應用程式/site 中運行的 JavaScript 函數中輸入 console.clear() 。
您也可以直接輸入 clear() 。
第三種方法是使用鍵盤快捷鍵，cmd-k（mac）或ctrl + l（Win）
計算元素的數量
console.count() 是一個很方便的方法。
請考慮以下代碼：
const x = 1
const y = 2
const z = 3
console.count(
'x 的值是 ' + x + ' 被檢查了幾次？'
)
console.count(
'x 的值是 ' + x + ' 被檢查了幾次？'
)
console.count(
'y 的值是 ' + y + ' 被檢查了幾次？'
)
count 會計算打印字符串的次數，並在其旁邊打印計數：
您也可以計算蘋果和橙子的數量：
const oranges = ['orange', 'orange']
const apples = ['just one apple']
oranges.forEach(fruit => {
console.count(fruit)
})
apples.forEach(fruit => {
console.count(fruit)
})
記錄複雜對象
console.log 對於檢查變量非常棒。您還可以將對象作為參數傳遞給它，它將盡力以可讀的方式打印出來。大多數情況下，這意味著它會打印對象的字符串表示形式。
例如，嘗試一下：
console.log([1, 2])
打印對象的另一種選擇是使用 console.dir ：
console.dir([1, 2])
正如您所看到的，此方法使用 JSON 格式打印變量，以便您可以檢查其所有屬性。
同樣，還可以通過執行以下操作完成與 console.dir 相同的輸出：
console.log('%O', [1, 2])
哪一種方法要使用取決於您要調試的內容，兩者都可以為您提供最佳的調試功能。
另一個函數是 console.table() ，它打印一張漂亮的表格。
您只需要將一個元素的數組傳遞給它，它將在新的行中打印每個元素。
例如
console.table([[1, 2], ['x', 'y']])
或者您也可以通過傳遞對象文字而不是數組，設置列名，這樣它將使用對象的屬性作為列名
console.table([
{ x: 1, y: 2, z: 3 },
{ x: '第一列', y: '第二列', z: null }
])
console.table 還可以更強大，如果您將一個包含對象的對象的對象文字傳遞給它，並且您傳遞一個包含列名的數組，它將打印一個表，其中的行索引從對象文字中取到。例如
const shoppingCart = {}
shoppingCart.firstItem = { color: '黑色', size: 'L' }
shoppingCart.secondItem = { color: '紅色', size: 'L' }
shoppingCart.thirdItem = { color: '白色', size: 'M' }
console.table(shoppingCart, ['color', 'size'])
記錄不同級別的錯誤
正如我們所看到的，console.log 對於在控制台中打印消息非常有用。
現在我們將發現另外三個方便的方法，它們將幫助我們調試，因為它們隱含地指示了各種級別的錯誤。
首先，console.info()
如您所見，在其旁邊打印了一個小 ‘i’ ，清楚地表示該日誌消息僅為信息。
第二個是console.warn()
打印了一個黃色的感嘆號。
如果您啟用了控制台過濾工具欄，您可以看到控制台允許您根據類型來過濾消息，這樣便於區分消息，因為例如如果我們現在點擊“警告”，所有打印消息中不是警告的消息將被隱藏。
第三個函數是console.error()
這個函數與其他函數有些不同，因為它除了打印一個紅色的 X 外，還會打印生成錯誤的函數的完整堆棧跟踪，因此我們可以去修復它。
在導航期間保留日誌
控制台消息每次頁面導航時都會被清除，除非您在控制台設置中勾選了 保留日誌 。
分組控制台消息
控制台消息可能會變得很大，當您嘗試調試錯誤時，噪聲可能會很多。
為了解決這個問題，控制台 API 提供了一個非常方便的功能：分組控制台消息。
讓我們先舉個例子。
console.group('測試位置')
console.log('位置哈希', location.hash)
console.log('位置主機名', location.hostname)
console.log('位置協議', location.protocol)
console.groupEnd()
如您所見，控制台創建了一個組，並在其中顯示了日誌消息。
您可以做同樣的事情，但輸出一個折疊的消息，您可以按需打開，以進一步限制噪音：
console.groupCollapsed('測試位置')
console.log('位置哈希', location.hash)
console.log('位置主機名', location.hostname)
console.log('位置協議', location.protocol)
console.groupEnd()
好處是這些組可以嵌套，因此您可以進一步進行以下操作：
console.group('主要')
console.log('測試')
console.group('1')
console.log('1 文本')
console.group('1a')
console.log('1a 文本')
console.groupEnd()
console.groupCollapsed('1b')
console.log('1b 文本')
console.groupEnd()
console.groupEnd()
打印堆棧跟蹤
在某些情況下，打印一個函數的呼叫堆棧跟蹤可能很有用，也許是為了回答這個問題 “您是如何到達代碼的這部分的呢？”
您可以使用 console.trace() 這樣做：
const function2 = () => console.trace()
const function1 = () => function2()
function1()
計算所花費的時間
您可以使用 time() 和 timeEnd() 輕鬆地計算函數運行的時間。
const doSomething = () => console.log('test')
const measureDoingSomething = () => {
console.time('doSomething()')
// 做一些事情並測量它所需的時間
doSomething()
console.timeEnd('doSomething()')
}
measureDoingSomething()
生成 CPU 配置文件
開發工具允許您分析任何函數的 CPU 配置文件性能。
您可以手動啟動它，但最準確的方式是將要監視的內容包裝在 profile() 和 profileEnd() 命令之間。它們類似於 time() 和 timeEnd()，但它們不僅僅是測量時間，還創建了一個更詳細的報告。
const doSomething = () => console.log('test')
const measureDoingSomething = () => {
console.profile('doSomething()')
// 做某事，並測量它的性能
doSomething()
console.profileEnd()
}
measureDoingSomething()
