本頁說明 Chrome 開發人員工具控制台如何協助您輕鬆開發網頁。控制台 有 2 種主要用途：查看記錄的訊息及執行 JavaScript。
查看記錄的訊息
網頁程式開發人員經常會將訊息記錄到「控制台」，以確保其 JavaScript 可以正常運作
。如要記錄訊息，請在您的console.log('Hello, Console!')
JavaScript。當瀏覽器執行 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 訊息，實際體驗記錄功能。請參閱管理中心
API 參考資料，瀏覽 console 方法的完整清單。
方法就是顯示您記錄的資料的方式。
執行 JavaScript
控制台也是 REPL。您可以在控制台中執行 JavaScript 與網頁互動 找到你正在檢查的元件例如，圖 2 顯示開發人員工具首頁旁邊的主控台。 和圖 3 顯示，使用控制台變更頁面標題後，擁有相同頁面的網頁。
圖 2. 開發人員工具首頁旁邊的控制檯面板。
圖 3. 使用控制台變更頁面標題。
您可以在控制台修改頁面，因為「控制台」具有該頁面的完整存取權
window。開發人員工具提供幾項便利功能，可讓您更輕鬆地檢查網頁。適用對象
例如，假設您的 JavaScript 包含名為 hideModal 的函式。執行中
debug(hideModal) 會在下次呼叫 hideModal 時，暫停程式碼的第一行。
如要查看公用程式函式的完整清單，請參閱 Console Utilities API 參考資料。
執行 JavaScript 時，您不必與網頁互動。您可以使用 Cloud 控制台
與網頁無關的新程式碼舉例來說，假設您剛學到
JavaScript 陣列方法 map()，而您想要實驗看看。控制台是一個好事
試用這項功能
請參閱開始執行 JavaScript，親自體驗在 。