在控制台中執行 JavaScript

Kayce Basques

本互動式教學課程說明如何在 Chrome 開發人員工具控制台中執行 JavaScript。請參閱「開始使用 Logging 訊息」，瞭解如何將訊息記錄到主控台。請參閱「開始使用 JavaScript 偵錯」，瞭解如何暫停 JavaScript 程式碼，並逐行逐步執行。

控制台。

圖 1：控制台。

總覽

Console 是一個 REPL，是「Read」、「評估」、「列印」和「Loop」的縮寫。它會讀取您輸入的 JavaScript、評估程式碼，輸出 expression 的結果，然後迴圈回到第一個步驟。

設定開發人員工具

本教學課程旨在協助你開啟示範內容，並自行嘗試所有工作流程。當您實際遵循指示時，稍後會記得工作流程。

  1. 按下 Command+Option+J 鍵 (Mac) 或 Control+Shift+J 鍵 (Windows、Linux、ChromeOS)，即可直接在這個頁面上開啟主控台。

    左側的教學課程，右側是「開發人員工具」。

    圖 2：左側的教學課程，右側是「開發人員工具」。

查看及變更網頁的 JavaScript 或 DOM

如要變更頁面的外觀或執行方式，在管理中心執行陳述式通常很有幫助。

  1. 請注意下方按鈕中的文字。

  2. 在「Console」中輸入 document.getElementById('hello').textContent = 'Hello, Console!'，然後按下 Enter 鍵評估運算式。請注意按鈕內的文字會如何變化。

    評估上述運算式後， Console 會如何呈現。

    圖 3：評估上述運算式後， Console 會如何呈現。

    在您評估的程式碼下方，您會看到 "Hello, Console!"。回想 REPL 的 4 個步驟：讀取、評估、列印、循環。評估程式碼後，REPL 會輸出運算式的結果。因此，"Hello, Console!" 必須是 document.getElementById('hello').textContent = 'Hello, Console!' 的評估結果。

執行與網頁無關的任意 JavaScript

有時，您會想要程式碼遊樂場來測試部分程式碼，或試用您不熟悉的新 JavaScript 功能。控制台非常適合用來執行這類實驗。

  1. 在控制台中輸入 5 + 15。除非運算式花太多時間進行評估，否則結果 20 會顯示在運算式下方。
  2. 按 Enter 即可評估運算式。主控台會在程式碼下方顯示運算式的結果。下方圖 4 顯示主控台在評估這個運算式後應呈現的樣貌。

  3. 在主控台中輸入下列程式碼。請嘗試逐一輸入字元 而不要複製貼上內容

    function add(a, b=20) {
  return a + b;
}

    如果您不熟悉 b=20 語法，請參閱為函式引數定義預設值。

  4. 現在，請呼叫您剛定義的函式。

    add(25);

    評估上述運算式後的 Console 外觀。

    圖 4 評估上述運算式後的 Console 外觀。

    add(25) 的評估值是 45，因為在沒有第二個引數的情況下呼叫 add 函式時，b 會預設為 20。

您必須先傳回函式，才能在這個控制台工作階段中執行任何程式碼。 如果處理時間過長，您可以使用工作管理員來取消這類耗時的運算；不過，也會導致目前的頁面失敗，而且您輸入的所有資料都會遺失。

後續步驟

如要進一步瞭解在控制台中執行 JavaScript 的其他功能，請參閱執行 JavaScript。

開發人員工具可讓您在指令碼執行期間暫停執行。在暫停期間，您還是可以使用主控台查看及變更頁面的 window 或 DOM。這讓執行功能強大的偵錯工作流程。如需互動式教學課程，請參閱「開始使用 JavaScript 偵錯」。

此外，Console 也支援一組格式指定碼。如要瞭解控制台訊息的格式和樣式設定，請參閱「在主控台中設定訊息格式和樣式」。

除此之外，Console 也提供一系列便利函式，讓您與網頁互動更輕鬆。 例如：

  • 除了輸入 document.querySelector() 來選取元素之外，您也可以輸入 $()。這項語法源自於 jQuery，但實際上並非 jQuery。這只是 document.querySelector() 的別名。
  • debug(function) 有效地在該函式的第一行設定中斷點。
  • keys(object) 會傳回包含指定物件鍵的陣列。

請參閱 Console Utilities API 參考資料，探索所有便利功能。