本互動式教學課程說明如何在 Chrome 開發人員工具控制台中執行 JavaScript。請參閱「開始使用 Logging 訊息」,瞭解如何將訊息記錄到主控台。請參閱「開始使用 JavaScript 偵錯」,瞭解如何暫停 JavaScript 程式碼,並逐行逐步執行。
圖 1:控制台。
總覽
Console 是一個 REPL,是「Read」、「評估」、「列印」和「Loop」的縮寫。它會讀取您輸入的 JavaScript、評估程式碼,輸出 expression 的結果,然後迴圈回到第一個步驟。
設定開發人員工具
本教學課程旨在協助你開啟示範內容,並自行嘗試所有工作流程。當您實際遵循指示時,稍後會記得工作流程。
按下 Command+Option+J 鍵 (Mac) 或 Control+Shift+J 鍵 (Windows、Linux、ChromeOS),即可直接在這個頁面上開啟主控台。
圖 2:左側的教學課程,右側是「開發人員工具」。
查看及變更網頁的 JavaScript 或 DOM
如要變更頁面的外觀或執行方式,在管理中心執行陳述式通常很有幫助。
請注意下方按鈕中的文字。
在「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 功能。控制台非常適合用來執行這類實驗。
- 在控制台中輸入
5 + 15
。除非運算式花太多時間進行評估,否則結果20
會顯示在運算式下方。 - 按
Enter
即可評估運算式。主控台會在程式碼下方顯示運算式的結果。下方圖 4 顯示主控台在評估這個運算式後應呈現的樣貌。 在主控台中輸入下列程式碼。請嘗試逐一輸入字元 而不要複製貼上內容
function add(a, b=20) { return a + b; }
如果您不熟悉
b=20
語法,請參閱為函式引數定義預設值。現在,請呼叫您剛定義的函式。
add(25);
圖 4 評估上述運算式後的 Console 外觀。
add(25)
的評估值是45
,因為在沒有第二個引數的情況下呼叫add
函式時,b
會預設為20
。
您必須先傳回函式,才能在這個控制台工作階段中執行任何程式碼。 如果處理時間過長,您可以使用工作管理員來取消這類耗時的運算;不過,也會導致目前的頁面失敗,而且您輸入的所有資料都會遺失。
後續步驟
如要進一步瞭解在控制台中執行 JavaScript 的其他功能,請參閱執行 JavaScript。
開發人員工具可讓您在指令碼執行期間暫停執行。在暫停期間,您還是可以使用主控台查看及變更頁面的 window
或 DOM
。這讓執行功能強大的偵錯工作流程。如需互動式教學課程,請參閱「開始使用 JavaScript 偵錯」。
此外,Console 也支援一組格式指定碼。如要瞭解控制台訊息的格式和樣式設定,請參閱「在主控台中設定訊息格式和樣式」。
除此之外,Console 也提供一系列便利函式,讓您與網頁互動更輕鬆。 例如:
- 除了輸入
document.querySelector()
來選取元素之外,您也可以輸入$()
。這項語法源自於 jQuery,但實際上並非 jQuery。這只是document.querySelector()
的別名。 debug(function)
有效地在該函式的第一行設定中斷點。keys(object)
會傳回包含指定物件鍵的陣列。
請參閱 Console Utilities API 參考資料,探索所有便利功能。