在控制台中執行 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 鍵評估運算式請注意按鈕內的文字會如何變化。

   

   圖 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);
   

   

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

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

您必須先傳回函式，才能在這個控制台工作階段中執行任何程式碼。 如果耗時過長，您可以使用工作管理員取消需要大量時間的運算作業。 然而，這也會使目前的網頁失敗，而您輸入的所有資料將會遺失。

後續步驟

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

開發人員工具可讓您在指令碼執行期間暫停執行。暫停期間，你可以使用 前往控制台，查看和變更當時頁面的 window 或 DOM。如此一來 強大的偵錯工作流程有關互動式 JavaScript 的說明，請參閱「開始使用 JavaScript 偵錯」 教學課程。

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

除此之外，Console 也具有一系列可讓您與網頁互動的便利函式。 例如：

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

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