使用開發工具控制台和控制台 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 | console.log( |
清除控制台
在編輯控制台時,有三種清除控制台的方法。
第一種方式是單擊控制台工具欄上的 清除控制台日誌 按鈕。
第二種方法是在控制台中輸入 console.clear()
,或者在您的應用程式/site 中運行的 JavaScript 函數中輸入 console.clear()
。
您也可以直接輸入 clear()
。
第三種方法是使用鍵盤快捷鍵,cmd-k
(mac)或ctrl + l
(Win)
計算元素的數量
console.count()
是一個很方便的方法。
請考慮以下代碼:
1 | const x = 1 |
count 會計算打印字符串的次數,並在其旁邊打印計數:
您也可以計算蘋果和橙子的數量:
1 | const oranges = ['orange', 'orange'] |
記錄複雜對象
console.log
對於檢查變量非常棒。您還可以將對象作為參數傳遞給它,它將盡力以可讀的方式打印出來。大多數情況下,這意味著它會打印對象的字符串表示形式。
例如,嘗試一下:
1 | console.log([1, 2]) |
打印對象的另一種選擇是使用 console.dir
:
1 | console.dir([1, 2]) |
正如您所看到的,此方法使用 JSON 格式打印變量,以便您可以檢查其所有屬性。
同樣,還可以通過執行以下操作完成與 console.dir 相同的輸出:
1 | console.log('%O', [1, 2]) |
哪一種方法要使用取決於您要調試的內容,兩者都可以為您提供最佳的調試功能。
另一個函數是 console.table()
,它打印一張漂亮的表格。
您只需要將一個元素的數組傳遞給它,它將在新的行中打印每個元素。
例如
1 | console.table([[1, 2], ['x', 'y']]) |
或者您也可以通過傳遞對象文字而不是數組,設置列名,這樣它將使用對象的屬性作為列名
1 | console.table([ |
console.table
還可以更強大,如果您將一個包含對象的對象的對象文字傳遞給它,並且您傳遞一個包含列名的數組,它將打印一個表,其中的行索引從對象文字中取到。例如
1 | const shoppingCart = {} |
記錄不同級別的錯誤
正如我們所看到的,console.log
對於在控制台中打印消息非常有用。
現在我們將發現另外三個方便的方法,它們將幫助我們調試,因為它們隱含地指示了各種級別的錯誤。
首先,console.info()
如您所見,在其旁邊打印了一個小 ‘i’ ,清楚地表示該日誌消息僅為信息。
第二個是console.warn()
打印了一個黃色的感嘆號。
如果您啟用了控制台過濾工具欄,您可以看到控制台允許您根據類型來過濾消息,這樣便於區分消息,因為例如如果我們現在點擊“警告”,所有打印消息中不是警告的消息將被隱藏。
第三個函數是console.error()
這個函數與其他函數有些不同,因為它除了打印一個紅色的 X 外,還會打印生成錯誤的函數的完整堆棧跟踪,因此我們可以去修復它。
在導航期間保留日誌
控制台消息每次頁面導航時都會被清除,除非您在控制台設置中勾選了 保留日誌 。
分組控制台消息
控制台消息可能會變得很大,當您嘗試調試錯誤時,噪聲可能會很多。
為了解決這個問題,控制台 API 提供了一個非常方便的功能:分組控制台消息。
讓我們先舉個例子。
1 | console.group('測試位置') |
如您所見,控制台創建了一個組,並在其中顯示了日誌消息。
您可以做同樣的事情,但輸出一個折疊的消息,您可以按需打開,以進一步限制噪音:
1 | console.groupCollapsed('測試位置') |
好處是這些組可以嵌套,因此您可以進一步進行以下操作:
1 | console.group('主要') |
打印堆棧跟蹤
在某些情況下,打印一個函數的呼叫堆棧跟蹤可能很有用,也許是為了回答這個問題 “您是如何到達代碼的這部分的呢?”
您可以使用 console.trace()
這樣做:
1 | const function2 = () => console.trace() |
計算所花費的時間
您可以使用 time()
和 timeEnd()
輕鬆地計算函數運行的時間。
1 | const doSomething = () => console.log('test') |
生成 CPU 配置文件
開發工具允許您分析任何函數的 CPU 配置文件性能。
您可以手動啟動它,但最準確的方式是將要監視的內容包裝在 profile()
和 profileEnd()
命令之間。它們類似於 time()
和 timeEnd()
,但它們不僅僅是測量時間,還創建了一個更詳細的報告。
1 | const doSomething = () => console.log('test') |
tags: [“JavaScript”, “Console”, “Debugging”, “Web Development”]