在控制台中記錄訊息

Kayce Basques

本互動式教學課程說明如何在 Chrome 開發人員工具控制台中記錄及篩選訊息。

本教學課程必須依序完成。本文假設您已經瞭解網頁開發的基本概念，例如如何使用 JavaScript 在網頁中加入互動。

設定示範模式和開發人員工具

本教學課程旨在協助你開啟示範內容，並自行嘗試所有工作流程。當您實際遵循指示時，稍後會記得工作流程。

1. 開啟示範。

2. 選用：將示範內容移到另一個視窗。在這個範例中，教學課程位於左側，示範內容在右側。

   

3. 將焦點移至示範內容，然後按下 Control + Shift + J 鍵或 Command + Option + J 鍵 (Mac) 以開啟開發人員工具。根據預設，開發人員工具會在示範的右側開啟

   

4. 選用：將開發人員工具固定至視窗底部，或是將開發人員工具從獨立視窗取消固定。

   開發人員工具已固定在示範底部：

   開發人員工具已在獨立視窗中解除：

查看 JavaScript 記錄的訊息

您在主控台中看到的大部分訊息，都來自編寫網頁 JavaScript 的網頁開發人員。本節的目標是介紹您在主控台中顯示的各種訊息類型，並說明如何透過自己的 JavaScript 自行記錄每種訊息類型。

1. 按一下示範中的「記錄資訊」按鈕。Hello, Console! 會登入控制台。

   

2. 在「Console」的 Hello, Console! 訊息旁邊，按一下「log.js:2」。「Sources」(來源) 面板會隨即開啟，並醒目顯示造成訊息登入主控台的程式碼。

   

   網頁的 JavaScript 呼叫 console.log('Hello, Console!') 時，系統就會記錄這則訊息。

3. 請進行下列任一工作流程，返回控制台：

   • 再按一下「Console」(控制台) 分頁標籤即可。
   • 按下 Control + [ 鍵或 Command + [ 鍵 (Mac)，直到焦點移至主控台。
   • 開啟「Command」選單，開始輸入 Console，選取「Show Console Panel」指令，然後按下 Enter 鍵。

4. 按一下示範中的「Log Warning」按鈕。Abandon Hope All Ye Who Enter 將登錄到控制台。

   

   這類訊息是警告。

5. 選用步驟：按一下「log.js:12」log.js:12查看導致訊息顯示格式的程式碼，然後在完成後返回「Console」log.js:12。當您要查看導致訊息以特定方式記錄的程式碼時，可以執行此操作。

6. 按一下 Abandon Hope All Ye Who Enter 前方的「展開」 圖示。開發人員工具會顯示促成呼叫的堆疊追蹤。

   

   堆疊追蹤會告訴您，呼叫了名為 logWarning 的函式，而該函式會呼叫名為 quoteDante 的函式。換句話說，最初發生的呼叫位於堆疊追蹤的底部。您隨時可以呼叫 console.trace() 來記錄堆疊追蹤。

7. 按一下「記錄錯誤」。系統會記錄以下錯誤訊息： I'm sorry, Dave. I'm afraid I can't do that.

   

8. 按一下「記錄表格」。控制台會記錄知名藝人的表格。

   

   請注意，「birthday」欄只有一列填入值。請查看程式碼，瞭解原因。

9. 按一下「記錄群組」。4 隻著名的犯罪行為烏龜名稱都歸類在 Adolescent Irradiated Espionage Tortoises 標籤下。

   

10. 按一下「記錄自訂」。系統會將具有紅色邊框和藍色背景的訊息記錄至控制台。

    

這樣做的主要概念是，當您想從 JavaScript 將訊息記錄到「Console」時，可以使用其中一種 console 方法。每種方法都有不同的訊息格式。

除了本節提到的方法，還有其他更多方法。本教學課程結束後，您將瞭解如何探索其他方法。

查看瀏覽器記錄的訊息

瀏覽器也會將訊息記錄到控制台。這通常是因為頁面有問題時發生。

1. 按一下「原因 404」。瀏覽器會記錄 404 網路錯誤，因為網頁的 JavaScript 嘗試擷取的檔案不存在。

   

2. 按一下「原因錯誤」。瀏覽器記錄未偵測到的 TypeError，因為 JavaScript 嘗試更新不存在的 DOM 節點。

   

3. 按一下「記錄層級」下拉式選單，然後啟用「詳細」選項 (如果已停用的話)。下個章節將進一步說明篩選功能。您需要這樣做，才能確保您記錄的下一則訊息顯示。注意：如果停用「Default Levels」下拉式選單，您可能需要關閉主控台側欄。請依下方「郵件來源」篩選，進一步瞭解主控台側欄。

   

4. 按一下「原因違規」。頁面沒有回應幾秒鐘，然後瀏覽器將 [Violation] 'click' handler took 3000ms 訊息記錄到主控台。確切時間長度可能會有差異。

   

篩選訊息

在部分網頁上，您會看到「控制台」大量顯示訊息。開發人員工具提供多種不同的方式，用於篩除與目前工作無關的訊息。

依記錄層級篩選

每個 console.* 方法都會獲派嚴重性等級：Verbose、Info、Warning 或 Error。舉例來說，console.log() 是 Info 層級訊息，console.error() 則是 Error 層級訊息。

如何依記錄層級篩選：

1. 按一下「Log Levels」(記錄層級) 下拉式選單，然後停用「Errors」(錯誤)。如果等級沒有勾號，系統就會停用該等級。Error 層級訊息會消失。

   

2. 再次按一下「Log Levels」(記錄層級) 下拉式選單，然後重新啟用「Errors」(錯誤)。Error 層級訊息會再次出現。

依文字篩選

如果只想查看含有確切字串的訊息，請在「Filter」文字方塊中輸入該字串。

1. 在「Filter」文字方塊中輸入 Dave。系統會隱藏所有不含 Dave 字串的訊息。您可能也會看到 Adolescent Irradiated Espionage Tortoises 標籤。發生錯誤。

   

2. 刪除 [篩選器] 文字方塊中的 Dave。所有訊息都會重新顯示。

依規則運算式篩選

如要顯示包含特定文字模式 (而非特定字串) 的所有訊息，請使用規則運算式。

1. 在「Filter」文字方塊中輸入 /^[AH]/。在 RegExr 中輸入這個模式，即可瞭解其運作情形。

   

2. 刪除 [篩選器] 文字方塊中的 /^[AH]/。系統會重新顯示所有訊息。

依郵件來源篩選

如果您只想查看來自特定網址的訊息，請使用側欄。

1. 按一下「Show Console Sidebar」圖示 。

   

2. 按一下「12 Messages」旁的「展開」 圖示。側欄會顯示導致系統記錄訊息的網址清單。舉例來說，log.js 產生了 11 則訊息。

   

依使用者訊息篩選

在此之前，您點選「Log Info」(記錄資訊) 時，會經由名為 console.log('Hello, Console!') 的指令碼將訊息記錄到控制台。這類從 JavaScript 記錄的訊息稱為「使用者訊息」。相反地，在您點選「Cause 404」時，瀏覽器記錄了 Error 層級訊息，指出找不到要求的資源。這類訊息屬於瀏覽器訊息。您可以使用側欄篩除瀏覽器訊息，只顯示使用者訊息。

1. 按一下「9 使用者訊息」。瀏覽器訊息已隱藏。

   

2. 按一下「12 訊息」即可再次顯示所有訊息。

使用主控台與任何其他面板搭配使用

如果您要編輯樣式，但需要快速查看主控台記錄中的某些資訊，該怎麼辦？使用導覽匣。

1. 按一下「元素」分頁標籤。

2. 按下 Escape 鍵。「導覽匣」的「Console」分頁隨即開啟。當中保留您在本教學課程中使用的所有控制台功能。

   

後續步驟

恭喜，您已完成教學課程。點選「分散式獎盃」即可收到獎盃。

• 如要查看更多與控制台 UI 相關的功能和工作流程，請參閱管理中心參考資料。
• 如要進一步瞭解「查看從 JavaScript 記錄的訊息」一節中示範的所有 console 方法，請參閱「主控台 API 參考資料」，並探索本教學課程未涵蓋的其他 console 方法。
• 如要瞭解開發人員工具的其他功能，請參閱開始使用。
• 如要進一步瞭解 console 的所有格式和樣式方法，請參閱「在主控台中設定訊息的格式和樣式」。