本互動式教學課程說明如何在 Chrome 開發人員工具控制台中執行 JavaScript。請參閱「開始使用 Logging 訊息」一文,瞭解如何將訊息記錄到主控台。如要瞭解如何暫停 JavaScript 程式碼,並逐步逐一執行這些程式碼,請參閱「開始使用 JavaScript 偵錯」一文。
圖 1. 控制台。
總覽
控制台是 REPL,代表讀取、評估、列印和迴圈。它會讀取您在該程式碼中輸入的 JavaScript、評估程式碼,輸出 expression 的結果,然後迴圈回第一個步驟。
設定開發人員工具
本教學課程旨在讓您開啟示範並自行嘗試所有工作流程。實際操作時,您稍後可能會記住工作流程。
按下 Command + Option + J 鍵 (Mac) 或 Control + Shift + J 鍵 (Windows、Linux、ChromeOS),即可直接在這個頁面上開啟主控台。
圖 2:分別是左側教學課程和右側的開發人員工具。
查看及變更網頁的 JavaScript 或 DOM
建構頁面或對頁面進行偵錯時,在主控台中執行陳述式通常會很有幫助,因為如要變更頁面的外觀或執行方式,
請注意下方按鈕中的文字。
在「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 管理中心非常適合用來進行這類實驗。
- 在控制台中輸入
5 + 15
。結果20
會顯示在運算式下方 (除非運算式評估時間過長)。 - 按下
Enter
鍵即可評估運算式。主控台會在程式碼下方顯示運算式的結果。下方的圖 4 顯示主控台在評估這個運算式後應如何呈現。 在控制台中輸入下列程式碼。請盡量逐字輸入,不要直接複製貼上。
function add(a, b=20) { return a + b; }
如果您不熟悉
b=20
語法,請參閱定義函式引數的預設值一文。現在,請呼叫您剛定義的函式。
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 參考資料。