在控制台中執行 JavaScript

Kayce Basques

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

控制台。

圖 1. 控制台。

總覽

主控台是 REPL，代表「讀取、評估、顯示和迴圈」。這個外掛程式會讀取您輸入的 JavaScript，評估程式碼，輸出 expression 的結果，然後迴圈回到第一個步驟。

設定開發人員工具

本教學課程的設計目的，是讓您開啟示範並親自嘗試所有工作流程。實際操作時，您更有可能記得後續的工作流程。

  1. 按下 Command + Option + J 鍵 (Mac) 或 Control + Shift + J 鍵 (Windows、Linux、ChromeOS) 即可開啟控制台，這個頁面就會顯示在控制台中。

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

    圖 2. 左側是本教學課程，右側是開發人員工具。

查看及變更網頁的 JavaScript 或 DOM

建構或偵錯網頁時，通常會在主控台中執行陳述式，以便變更網頁的外觀或執行方式。

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

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

    評估上述運算式後，控制台的顯示方式。

    圖 3. 評估上述運算式後，控制台的顯示方式。

    您會在評估的程式碼下方看到 "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);

    評估上述運算式後，控制台的顯示畫面。

    圖 4. 評估上述運算式後，控制台的顯示畫面。

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

函式回傳前，您無法在這個控制台工作階段中執行任何程式碼。如果這項作業耗時過長，您可以使用工作管理員取消耗時的運算作業，但這也會導致目前的頁面失敗，且您輸入的所有資料都會遺失。

後續步驟

請參閱「執行 JavaScript」一文，瞭解在控制台中執行 JavaScript 相關功能的更多資訊。

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

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

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

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

請參閱 控制台公用程式 API 參考資料，瞭解所有便利的函式。