本互動式教學課程說明如何在 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]/` 模式的任何訊息。](https://developer.chrome.com/static/docs/devtools/console/log/image/filtering-any-message-d-a0b17462a87b8.png?hl=zh-tw)
從「篩選器」方塊中刪除
/^[AH]/。所有訊息都會再次顯示。
依訊息來源篩選
如要只查看來自特定網址的訊息，請使用側欄。
按一下「顯示主控台側欄」
。
按一下「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格式和樣式方法，請參閱「在控制台中設定訊息格式和樣式」。