本頁說明 Chrome 開發人員工具控制台如何協助您輕鬆開發網頁。控制台有 2 種主要用途:查看記錄訊息和執行 JavaScript。
查看記錄的訊息
網頁開發人員通常會記錄訊息至控制台,確保 JavaScript 正常運作。如要記錄訊息,您可以在 JavaScript 中插入類似 console.log('Hello, Console!')
的運算式。當瀏覽器執行 JavaScript 並查看類似運算式時,就會知道應該將訊息記錄到控制台。舉例來說,假設您正在編寫網頁的 HTML 和 JavaScript:
<!doctype html>
<html>
<head>
<title>Console Demo</title>
</head>
<body>
<h1>Hello, World!</h1>
<script>
console.log('Loading!');
const h1 = document.querySelector('h1');
console.log(h1.textContent);
console.assert(document.querySelector('h2'), 'h2 not found!');
const artists = [
{
first: 'René',
last: 'Magritte'
},
{
first: 'Chaim',
last: 'Soutine'
},
{
first: 'Henri',
last: 'Matisse'
}
];
console.table(artists);
setTimeout(() => {
h1.textContent = 'Hello, Console!';
console.log(h1.textContent);
}, 3000);
</script>
</body>
</html>
圖 1 顯示載入頁面並等待 3 秒後,控制台的外觀。請找出造成瀏覽器記錄訊息的程式碼行。
圖 1:控制檯面板。
網頁程式開發人員記錄訊息的常見原因有 2 種:
- 確認程式碼以正確順序執行。
- 檢查特定時間點的變數值。
請參閱開始使用 Logging 訊息,實際體驗記錄功能。如要瀏覽 console
方法的完整清單,請參閱 Console API 參考資料。這兩種方法的主要差別在於它們顯示您記錄資料的方式。
執行 JavaScript
控制台也是 REPL。您可以在控制台中執行 JavaScript,與正在檢查的網頁互動。例如,圖 2 顯示開發人員工具首頁旁邊的主控台,圖 3 顯示使用主控台變更頁面標題後,使用的頁面。
圖 2:開發人員工具首頁旁邊的控制檯面板。
圖 3:使用控制台變更頁面標題。
您可以透過控制台修改頁面,因為控制台具備該頁面 window
的完整存取權。開發人員工具提供幾項便利功能,可讓您更輕鬆地檢查網頁。舉例來說,假設您的 JavaScript 包含一個名為 hideModal
的函式。執行
debug(hideModal)
會在下次呼叫 hideModal
第一行時暫停程式碼。如要查看公用程式函式的完整清單,請參閱 Console Utilities API 參考資料。
執行 JavaScript 時,您不必與網頁互動。您可以使用控制台試用與頁面無關的新程式碼。舉例來說,假設您剛瞭解內建的 JavaScript 陣列方法 map()
,而且想實驗看看。您可以在主控台中試用此函式。
請參閱開始使用 JavaScript,在控制台中執行 JavaScript。