開發人員必備：JavaScript 控制檯方法

在上一篇關於 grep 的“開發者必備知識”帖子中，我們現在將目光轉向一個您在進行 Web 開發時將始終依賴的 API：不起眼的 console。Console 是您在看到 JavaScript 工作時感到欣喜的地方，也是您發現只有一條晦澀難懂的錯誤訊息時感到悲傷的地方。

人們使用 console 來輸出計算結果、REST API 的返回值、字串操作的結果，或者作為提醒，提示您需要重新審視程式的某個部分（例如，TODO: fix）。Console 的用途是無窮無盡的。您可以使用 console 輸出您喜歡的任何型別的資訊。當在瀏覽器中執行 JavaScript 時，console 日誌將顯示在瀏覽器的開發者控制檯中。

在本文中，我們將探討 console 的功能，以及一些您可能會覺得有用甚至非常有趣的鮮為人知的方法。無論您是 Web 開發初學者，正在尋找 console 的用途，還是經驗豐富的開發者，您都可能會發現一些您不知道它們存在的方法。讓我們先從最常用的方法開始，然後看看其他方法，並沿途提供示例。

日誌到控制檯

如果您已經瞭解了 console.log() 的所有知識，您可以直接跳到“包含 info、warn 和 error 的日誌級別”，因為我們將快速介紹基礎知識。如果您還在，讓我們來了解一下 console 是什麼以及它的用途。大多數人使用 console.log() 將關於他們程式碼的通用資訊傳送到控制檯，您可以在瀏覽器的開發者工具中找到它（例如，Firefox 的開發者工具）。

注意：您可以將下面所有的示例複製並貼上到您的瀏覽器控制檯中進行嘗試。

log() 方法是 console 物件的基礎：您將一些內容提供給 log()，瞧——它就被記錄到控制檯了。

const hello = "Hi there, welcome to MDN Web Docs!";
console.log(hello);
// Hi there, welcome to MDN Web Docs!

透過使輸出可見來了解程式碼是否按預期工作非常有用，就像下面的示例一樣，我正在檢查我是否正確使用了 DateTimeFormat。

const currentDate = new Date();
const formattedDate = new Intl.DateTimeFormat("en-US").format(currentDate);
console.log("Current date:", formattedDate);
// "Current date:" "11/28/2023"

您可以在 log 中提供多個專案，並應用一些精美的格式（有關更多詳細資訊，請參閱輸出文字到控制檯）。

const currentDate = new Date();
const formattedDate = new Intl.DateTimeFormat("en-US").format(currentDate);

console.log("Today's date is %s", formattedDate);
// Today's date is: 11/29/2023

在控制檯中進行互動式操作也很有趣，因為大多數瀏覽器都支援自動補全功能，讓您可以透過 Tab 鍵瀏覽建議。如果您不知道該記錄什麼，可以輸入 console.log(window.（或其他任何物件），然後讓瀏覽器建議一些有趣的功能，例如 navigator。

console.log(window.navigator.oscpu);
// Intel Mac OS X 10.15

不過，在公開發布程式碼之前，別忘了刪除其中遺留的 console.log() 呼叫！在生產應用程式中刪除開發日誌是一種良好的實踐。

包含 info、warn 和 error 的日誌級別

您可以使用 console.info()、console.warn() 和 console.error() 方法，新增更具意義的日誌，並支援 info、warn 和 error 級別。

效果與 console.log() 類似，但輸出的格式不同（取決於瀏覽器），並且通常您可以按日誌級別過濾輸出。例如，如果您只想檢視錯誤，這會很有用。

const browser = window.navigator.userAgent;
console.info(browser);
// Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:121.0) Gecko/20100101 Firefox/121.0

如果您知道其他人在執行您的程式碼時可能會遇到麻煩的情況，warn 和 error 訊息將極其有用。

console.warn("Unknown device - there may be compatibility issues.");
// ⚠️ Unknown device - there may be compatibility issues.
console.error("Unsupported device. See <docs url> for more details.");
// 🛑 Unsupported device. See <docs url> for more details.
//    <stack trace>

某些瀏覽器會顯示 error 訊息的堆疊跟蹤，但您也可以在本文後面使用 `console.trace()` 方法直接呼叫此功能。我們將在本文後面使用 console.trace() 建立堆疊跟蹤部分進行介紹。

使用 `console.table()` 顯示錶格

這是我最喜歡的方法之一，因為我經常發現我需要將程式碼的輸出複製並貼上到編輯器中，然後花一些時間對其進行格式化以便閱讀，然後才能理解發生了什麼。Console 的神奇之處在於，您可以使用 console.table() 直接在控制檯中建立表格。這非常合理，因為您通常在瀏覽器中執行程式碼，而瀏覽器已經能夠很好地處理表格的渲染了。

const dogs = [
  { name: "Yoshi", color: "Black", personality: "Calm" },
  { name: "Melanie", color: "Brown", personality: "Hyperactive" },
  { name: "Peppers", color: "white", personality: "Unpredictable" },
];

console.table(dogs);

看看這個陣列如何被精美地格式化為表格。

A JavaScript array formatted as an HTML table using the console.table() method. The data is a list of dogs along with their corresponding colors and personalities.

使用 `console.count()` 進行計數

為什麼不為您的日誌新增計數器來找出某個事件發生的頻率呢？console.count() 是一個內建的優秀方法，您可以隨心所欲地使用它來計數事件。

function postBoostClicked() {
  // My post has been boosted, do something here
  console.count("Boost count");
}

postBoostClicked();
// Boost count: 1
postBoostClicked();
// Boost count: 2

使用 `console.time()` 和 `console.timer()` 新增計時器

在許多情況下，有兩個有用的方法適用：console.time() 和 console.timeEnd()，它們分別在您的程式中啟動和停止一個計時器。您可以使用這些方法來衡量程式碼中某個操作所花費的時間，例如，您想看看執行一個函式需要多長時間。在此示例中，名為 myFunction() 的函式花費了 200ms。

console.time("timerName");
// call myFunction()
console.timeEnd("timerName");
// timerName: 200ms - timer ended

如果您發現需要新增一些帶有時間的詳細資訊，您還可以使用 console.timeLog() 添加註釋。如果您在應用程式中有單獨的階段，例如設定應用程式的不同部分，這會很有用。

console.time("MyTimer");
console.timeLog("MyTimer", "Starting application up…");
// MyTimer: 0ms Starting application up…
// call myFunction(), for example

console.timeLog("MyTimer", "UI is setup, making API calls now");
// MyTimer: 200ms UI is setup, making API calls now
// call otherFunction(), for example

console.timeEnd("MyTimer");
// MyTimer: 300ms - timer ended

如果您有興趣測量程式碼的效能，而不僅僅是內部計時器，您可能需要檢視 Performance API，它有助於根據各種標準和測量深入瞭解應用程式效能。

使用 `console.group()` 對日誌進行分組

使用 console.group() 和 console.groupCollapsed() 對日誌進行分組是整理大量日誌輸出的好方法。如果您的程式碼經歷了多個階段，例如設定步驟或不同的處理任務，對日誌進行分組會非常方便。

組是可摺疊的，這意味著您可以在控制檯中展開和摺疊一個組，以便顯示或隱藏日誌，尤其是在有大量資訊需要篩選時。

console.group("Grouped Logs");
console.log("Log 1");
console.log("Log 2");
console.groupEnd();
// Grouped Logs
//     Log 1
//     Log 2

console.groupCollapsed("Collapsed Group");
console.log("Log 3");
console.log("Log 4");
console.groupEnd();
// > Collapsed Group

使用 `console.trace()` 建立堆疊跟蹤

在需要探索程式碼行為的情況下，此方法是一個絕佳的選擇。當您使用 console.trace() 時，您就進入了除錯領域，需要調查程式碼的執行位置。如果存在難以僅僅透過閱讀程式碼來在腦海中跟蹤的複雜條件，堆疊跟蹤會非常方便。

以下示例顯示瞭如何向示例函式（example()）新增堆疊跟蹤，以找出它是從 one() 還是 two() 呼叫而來的。有一個條件會根據時間在 true 和 false 之間切換，因此不可能知道是 one() 還是 two() 呼叫了我們感興趣的函式。

// Is the "currentSeconds" value odd or even?
const currentSeconds = new Date().getSeconds();
const condition = currentSeconds % 2 === 0;

function one() {
  example();
}
function two() {
  example();
}
function randomChoice() {
  if (!condition) {
    // OK, I'm lost!
    one();
  } else {
    two();
  }
}

function example() {
  // Where is this function called?
  console.trace("Trace from example() function");
}

randomChoice();
//  console.trace() Trace from example function
//     example debugger eval code:23
//     one debugger eval code:6
//     randomChoice debugger eval code:16

從堆疊跟蹤中，我們可以看到：

trace 在第 23 行的 example() 中執行。
example() 在第 6 行的 one() 函式中被呼叫。
堆疊跟蹤以第 16 行對 randomChoice() 的呼叫結束。

如果您編寫的程式碼邏輯複雜或行為不確定，使用 console.trace() 對於回溯呼叫堆疊並找出潛在的問題根源非常有幫助。

使用 `console.clear()` 進行清理

您是否正在處理一個應用程式，該應用程式向控制檯記錄了過多的資訊，導致您無法專注於某個特定區域或訊息？您可以使用 console.clear() 方便地清除控制檯，並將其恢復到 pristine 狀態。

// Too much information!
console.clear();
// Console was cleared.

一個整潔、清晰的控制檯的禪意似乎是結束本文的好地方。那麼，我們就此結束吧。

總結

我們已經看到了使用 JavaScript 的 console 的許多不同方法。我希望您學到了一些新東西，無論您是剛剛開始 Web 開發之旅，還是已經是一名老練的 console.timer() 使用者。如果您認為我遺漏了什麼值得一提的內容，或者您對此文章有其他反饋，請隨時透過 Mastodon 或 Discord 告訴我們。非常感謝您的閱讀，祝您日誌記錄愉快。📒