在控制台中執行 JavaScript

Kayce Basques
Kayce Basques
X GitHub

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

控制台。

圖 1. 控制台。

總覽

「控制台」是 REPL，也就是「讀取、評估、顯示和迴圈」。這個環境會讀取您輸入的 JavaScript、評估程式碼、列印運算式的結果，然後返回第一個步驟。

設定開發人員工具

本教學課程的設計宗旨是讓您開啟試用版，並親自嘗試所有工作流程。親自操作有助於記憶工作流程。

  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;
}

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

    add(25);

    評估上述運算式後，控制台的樣子。

    圖 4. 評估上述運算式後，控制台的樣子。

    add(25) 會評估為 45，因為在呼叫 add 函式時，如果沒有第二個引數，b 預設為 20。

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

後續步驟

如要進一步瞭解如何在控制台中執行 JavaScript，請參閱「執行 JavaScript」。

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

控制台也支援一組格式指定碼。如要瞭解所有格式化及設定控制台訊息樣式的方法，請參閱「在控制台中格式化及設定訊息樣式」。

此外，控制台也提供一組便利函式，可簡化與網頁的互動。 例如：

  • 輸入 $() 即可選取元素，不必輸入 document.querySelector()。這個語法的靈感來自 jQuery，但實際上並非 jQuery。這只是 document.querySelector() 的別名。
  • debug(function) 實際上會在該函式的第一行設定中斷點。
  • keys(object) 會傳回包含指定物件鍵的陣列。

如要瞭解所有便利功能，請參閱 Console Utilities API 參考資料。