/

使用開發工具控制台和控制台 API

使用開發工具控制台和控制台 API

每個瀏覽器都提供了一個控制台,讓您可以與 Web 平台 API 進行交互,並通過打印由網頁中運行的 JavaScript 代碼生成的消息來查看代碼的內部結構。

瀏覽器控制台

控制台概述

控制台工具欄很簡單。有一個按鈕可以清除控制台消息,您還可以在 macOS 上單擊 cmd-K ,或在 Windows 上單擊 ctrl-K 以清除控制台消息,第二個按鈕可以激活一個側邊欄,讓您可以按照文本或消息類型進行過濾,例如錯誤、警告、信息、日誌或調試消息。

您還可以選擇隱藏網絡生成的消息,只關注 JavaScript 日誌消息。

控制台不僅是您可以查看消息的地方,還是與 JavaScript 代碼和 DOM 進行交互的最佳方式,並且有許多時候還用於從頁面上獲取信息。

讓我們輸入我們的第一條消息。請注意 > ,讓我們在此處點擊並輸入

1
console.log('test')

控制台充當了一個 REPL(Read-Eval-Print-Loop) ,這意味著它解釋我們的 JavaScript 代碼並打印一些東西。

使用控制台日誌格式化

正如您所見,console.log('test') 在控制台中打印了 ‘test’。

在您的 JavaScript 代碼中使用 console.log 可以幫助您調試,例如打印靜態字符串,但您還可以將變量作為參數傳遞給它,該變量可以是 JavaScript 原生類型(例如整數)或對象。

您可以將多個變量傳遞給 console.log ,例如:

1
console.log('test1', 'test2')

您還可以通過傳遞變量和格式指定符來格式化漂亮的短語。

例如:

1
console.log('我的 %s 有 %d 歲', '貓', 2)
  • %s 將變量格式化為字符串
  • %d%i 將變量格式化為整數
  • %f 將變量格式化為浮點數
  • %o 用於打印 DOM 元素
  • %O 用於打印對象表示形式

示例:

1
console.log('%o, %O', document.body, document.body)

在控制台中打印對象

另一個有用的格式指定符是 %c ,它允許您傳遞 CSS 格式化字符串。例如:

1
2
3
4
5
6
console.log(
'%c 我的 %s 有 %d 歲',
'color: yellow; background:black; font-size: 16pt',
'貓',
2
)

使用 CSS 格式在控制台中格式化

清除控制台

在編輯控制台時,有三種清除控制台的方法。

第一種方式是單擊控制台工具欄上的 清除控制台日誌 按鈕。

第二種方法是在控制台中輸入 console.clear() ,或者在您的應用程式/site 中運行的 JavaScript 函數中輸入 console.clear()

您也可以直接輸入 clear()

第三種方法是使用鍵盤快捷鍵,cmd-k(mac)或ctrl + l(Win)

計算元素的數量

console.count() 是一個很方便的方法。

請考慮以下代碼:

1
2
3
4
5
6
7
8
9
10
11
12
const x = 1
const y = 2
const z = 3
console.count(
'x 的值是 ' + x + ' 被檢查了幾次?'
)
console.count(
'x 的值是 ' + x + ' 被檢查了幾次?'
)
console.count(
'y 的值是 ' + y + ' 被檢查了幾次?'
)

count 會計算打印字符串的次數,並在其旁邊打印計數:

計算字符串打印的次數

您也可以計算蘋果和橙子的數量:

1
2
3
4
5
6
7
8
const oranges = ['orange', 'orange']
const apples = ['just one apple']
oranges.forEach(fruit => {
console.count(fruit)
})
apples.forEach(fruit => {
console.count(fruit)
})

計算水果的數量

記錄複雜對象

console.log 對於檢查變量非常棒。您還可以將對象作為參數傳遞給它,它將盡力以可讀的方式打印出來。大多數情況下,這意味著它會打印對象的字符串表示形式。

例如,嘗試一下:

1
console.log([1, 2])

打印對象的另一種選擇是使用 console.dir

1
console.dir([1, 2])

正如您所看到的,此方法使用 JSON 格式打印變量,以便您可以檢查其所有屬性。

同樣,還可以通過執行以下操作完成與 console.dir 相同的輸出:

1
console.log('%O', [1, 2])

使用 dir 打印控制台日誌

哪一種方法要使用取決於您要調試的內容,兩者都可以為您提供最佳的調試功能。

另一個函數是 console.table() ,它打印一張漂亮的表格。

您只需要將一個元素的數組傳遞給它,它將在新的行中打印每個元素。

例如

1
console.table([[1, 2], ['x', 'y']])

或者您也可以通過傳遞對象文字而不是數組,設置列名,這樣它將使用對象的屬性作為列名

1
2
3
4
console.table([
{ x: 1, y: 2, z: 3 },
{ x: '第一列', y: '第二列', z: null }
])

使用 table 打印控制台日誌

console.table 還可以更強大,如果您將一個包含對象的對象的對象文字傳遞給它,並且您傳遞一個包含列名的數組,它將打印一個表,其中的行索引從對象文字中取到。例如

1
2
3
4
5
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 提供了一個非常方便的功能:分組控制台消息。

讓我們先舉個例子。

1
2
3
4
5
console.group('測試位置')
console.log('位置哈希', location.hash)
console.log('位置主機名', location.hostname)
console.log('位置協議', location.protocol)
console.groupEnd()

打印消息組

如您所見,控制台創建了一個組,並在其中顯示了日誌消息。

您可以做同樣的事情,但輸出一個折疊的消息,您可以按需打開,以進一步限制噪音:

1
2
3
4
5
console.groupCollapsed('測試位置')
console.log('位置哈希', location.hash)
console.log('位置主機名', location.hostname)
console.log('位置協議', location.protocol)
console.groupEnd()

另一個打印消息組的例子

好處是這些組可以嵌套,因此您可以進一步進行以下操作:

1
2
3
4
5
6
7
8
9
10
11
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() 這樣做:

1
2
3
const function2 = () => console.trace()
const function1 = () => function2()
function1()

打印堆棧跟蹤

計算所花費的時間

您可以使用 time()timeEnd() 輕鬆地計算函數運行的時間。

1
2
3
4
5
6
7
8
const doSomething = () => console.log('test')
const measureDoingSomething = () => {
console.time('doSomething()')
// 做一些事情並測量它所需的時間
doSomething()
console.timeEnd('doSomething()')
}
measureDoingSomething()

使用 console.time

生成 CPU 配置文件

開發工具允許您分析任何函數的 CPU 配置文件性能。

您可以手動啟動它,但最準確的方式是將要監視的內容包裝在 profile()profileEnd() 命令之間。它們類似於 time()timeEnd(),但它們不僅僅是測量時間,還創建了一個更詳細的報告。

1
2
3
4
5
6
7
8
const doSomething = () => console.log('test')
const measureDoingSomething = () => {
console.profile('doSomething()')
// 做某事,並測量它的性能
doSomething()
console.profileEnd()
}
measureDoingSomething()

生成 CPU 配置文件

tags: [“JavaScript”, “Console”, “Debugging”, “Web Development”]