本互動式教學課程說明如何在 Chrome 開發人員工具的控制台中記錄及篩選訊息。
建議依序完成本教學課程。本文假設您瞭解網頁開發的基本概念，例如如何使用 JavaScript 在網頁中加入互動功能。
設定示範和開發人員工具
本教學課程的設計宗旨是讓您開啟試用版，並親自嘗試所有工作流程。親自操作有助於記憶工作流程。
- 開啟試用版。
選用：將試用版移至獨立視窗。在本例中，左側是教學課程，右側是示範。
將焦點放在示範內容上，然後按下 Control+Shift+J 鍵或 Command+Option+J 鍵 (Mac)，開啟開發人員工具。根據預設，開發人員工具會開啟在示範的右側。
-
開發人員工具固定在示範的底部：
開發人員工具已卸除至獨立視窗：
查看從 JavaScript 記錄的訊息
您在「控制台」中看到的大部分訊息，都是網頁開發人員編寫網頁 JavaScript 時產生的。本節的目標是向您介紹您可能會在控制台中看到的各種訊息類型，並說明如何從自己的 JavaScript 記錄每種訊息類型。
按一下示範中的「Log Info」按鈕。
Hello, Console!會記錄到控制台。在「控制台」中，按一下
Hello, Console!訊息旁的「log.js:2」。「來源」面板會開啟，並醒目顯示導致訊息記錄到控制台的程式碼行。網頁的 JavaScript 呼叫
console.log('Hello, Console!')時，系統會記錄這則訊息。使用下列任一工作流程返回控制台：
- 再按一下「Console」(控制台) 分頁標籤即可。
- 按下 Control+[ 鍵或 Command+[ 鍵 (Mac)，直到「控制台」在前景運作為止。
- 開啟命令選單，開始輸入
Console，選取「顯示控制台面板」命令，然後按 Enter 鍵。
按一下示範中的「Log Warning」按鈕。
Abandon Hope All Ye Who Enter會記錄到控制台。這類格式的訊息是警告。
選用：按一下「log.js:12」，即可查看導致訊息格式化的程式碼，然後在完成後返回「Console」。每當您想查看導致訊息以特定方式記錄的程式碼時，都可以執行這項操作。
按一下
Abandon Hope All Ye Who Enter前方的「展開」圖示。開發人員工具會顯示導致呼叫的堆疊追蹤。
堆疊追蹤會告訴您，系統呼叫了名為
logWarning的函式，而該函式又呼叫了名為quoteDante的函式。換句話說，最先發生的呼叫位於堆疊追蹤的底部。您隨時可以呼叫console.trace()來記錄堆疊追蹤。按一下「記錄錯誤」。系統會記錄下列錯誤訊息：
I'm sorry, Dave. I'm afraid I can't do that.按一下「記錄表」。系統會將知名藝術家相關資料表記錄到控制台。
請注意，只有一個資料列填入了
birthday欄。請檢查程式碼，找出原因。按一下「記錄群組」。4 位知名打擊犯罪的烏龜名稱會歸類在
Adolescent Irradiated Espionage Tortoises標籤下方。按一下「記錄自訂」。系統會將帶有紅色邊框和藍色背景的訊息記錄到控制台中。
這裡的主要概念是，如要從 JavaScript 將訊息記錄到「控制台」，請使用其中一種 console 方法。每種方法格式化訊息的方式都不相同。
本節介紹的方法只是冰山一角，本教學課程的最後會說明如何探索其餘方法。
查看瀏覽器記錄的訊息
瀏覽器也會將訊息記錄到控制台。這通常是因為網頁有問題。
按一下「Cause 404」(導致 404 錯誤)。由於網頁的 JavaScript 嘗試擷取不存在的檔案，瀏覽器會記錄
404網路錯誤。按一下「Cause Error」(導致錯誤)。JavaScript 嘗試更新不存在的 DOM 節點，因此瀏覽器會記錄未擷取的
TypeError。按一下「記錄層級」下拉式選單，然後啟用「詳細」選項 (如果已停用)。我們會在下一節中進一步說明篩選功能。您必須這麼做，才能確保記錄的下一則訊息會顯示出來。注意：如果「預設層級」下拉式選單已停用，您可能需要關閉控制台側欄。如要進一步瞭解控制台側邊欄，請依訊息來源篩選下方內容。
按一下「Cause Violation」(導致違規)，網頁會暫時沒有反應，然後瀏覽器會在控制台中記錄
[Violation] 'click' handler took 3000ms訊息。確切時間可能有所不同。
篩選訊息
在某些頁面上，您會看到控制台充斥著訊息。開發人員工具提供多種方式，可篩除與目前工作無關的訊息。
依記錄層級篩選
每個 console.* 方法都會指派嚴重性等級：Verbose、Info、Warning 或 Error。舉例來說，console.log() 是 Info 層級的訊息，而 console.error() 則是 Error 層級的訊息。
如要依記錄層級篩選：
按一下「記錄層級」下拉式選單，然後停用「錯誤」。如果等級旁邊不再顯示勾號，即表示該等級已停用。
Error層級的訊息會消失。再次點按「記錄層級」下拉式選單，然後重新啟用「錯誤」。
Error層級的訊息會重新顯示。
依文字篩選
如要只查看包含特定字串的訊息，請在「篩選器」方塊中輸入該字串。
在「篩選器」方塊中輸入
Dave。所有不含Dave字串的訊息都會隱藏。從「篩選器」方塊中刪除
Dave。所有訊息都會重新顯示。
依規則運算式篩選
如要顯示包含特定文字模式的所有訊息，而非特定字串，請使用規則運算式。
在「篩選器」方塊中輸入
/^[AH]/。將這個模式輸入 RegExr，即可查看模式的運作說明。從「篩選器」方塊中刪除
/^[AH]/。所有訊息都會再次顯示。
![篩除不符合 `/^[AH]/` 模式的任何訊息。](https://developer.chrome.com/static/docs/devtools/console/log/image/filtering-any-message-d-a0b17462a87b8_2880.png?hl=zh-tw)
依訊息來源篩選
如要只查看來自特定網址的訊息，請使用側欄。
按一下「顯示主控台側欄」
。
按一下「12 則訊息」旁邊的「展開」
圖示，側欄會顯示導致系統記錄訊息的網址清單。舉例來說，
log.js導致 11 則訊息。
。
依使用者訊息篩選
先前點選「Log Info」時，系統會呼叫 console.log('Hello, Console!') 指令碼，將訊息記錄到控制台。從 JavaScript 記錄的這類訊息稱為「使用者訊息」。相反地，當您點選「Cause 404」時，瀏覽器會記錄 Error 層級的訊息，指出找不到所要求的資源。這類訊息視為瀏覽器訊息。您可以使用側欄篩除瀏覽器訊息，只顯示使用者訊息。
按一下「9 則使用者訊息」。瀏覽器訊息已隱藏。
按一下「12 則訊息」即可再次顯示所有訊息。
與任何其他面板並排使用「控制台」
如果您正在編輯樣式，但需要快速查看 Console 記錄檔中的內容，使用 Drawer。
- 按一下「元素」分頁標籤。
按 Escape 鍵。「Drawer」的「Console」分頁隨即開啟。這個工具具備您在本教學課程中使用的管理中心所有功能。
後續步驟
恭喜，您已完成本教學課程。按一下「Dispense Trophy」即可領取獎盃。
- 如要進一步瞭解與 Console UI 相關的功能和工作流程，請參閱「控制台參考資料」。
- 如要進一步瞭解「
console」方法，請參閱「Console API 參考資料」，並探索本教學課程未涵蓋的其他「console」方法。 - 請參閱「開始使用」一文，瞭解開發人員工具的其他功能。
- 如要進一步瞭解所有
console格式和樣式方法，請參閱「在控制台中設定訊息格式和樣式」。