在控制台中執行 JavaScript

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

圖 1. 控制台。

總覽

控制台是 REPL，代表讀取、評估、列印和迴圈。它會讀取您在該程式碼中輸入的 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. 控制台評估上述運算式後的結果。

   您評估過的程式碼下方會顯示 "Hello, Console!"。回顧 REPL 的 4 個步驟：讀取、評估、列印、迴圈。評估程式碼後，REPL 會列印運算式的結果。因此，"Hello, Console!" 必須是評估 document.getElementById('hello').textContent = 'Hello, Console!' 的結果。

執行與網頁無關的任意 JavaScript

有時您只是希望程式碼遊樂場，方便您測試部分程式碼，或嘗試您不熟悉的新 JavaScript 功能。Play 管理中心非常適合用來進行這類實驗。

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 偵錯功能一文。

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

此外，控制台還提供一組便利的功能，可讓您更輕鬆地與網頁互動。 例如：

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

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