在控制台中記錄訊息

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」(來源) 面板會隨即開啟，並醒目顯示造成訊息登入主控台的程式碼。

    點選 log.js:2 後，開發人員工具會開啟「來源」面板。

    網頁的 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 嘗試擷取的檔案不存在。

    控制台顯示 404 錯誤。

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

    控制台中的 TypeError。

  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 標籤。發生錯誤。

    篩除所有不包含 `Dave` 的訊息。

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

依規則運算式篩選

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

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

    篩除任何不符合模式 `/^[AH]/` 的訊息。

  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」分頁隨即開啟。當中保留您在本教學課程中使用的所有控制台功能。

    導覽匣中的「Console」分頁。

後續步驟

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