本頁說明 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. 控制檯面板。
網頁程式開發人員記錄訊息的常見原因如下：
- 確認程式碼執行順序正確。
- 檢查特定時間點的變數值。
請參閱開始使用 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。