在控制台中記錄訊息

凱斯巴斯克文
Kayce Basques

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

控制台中的訊息。

本教學課程應依序完成,本文假設您瞭解網頁開發的基礎知識,例如如何使用 JavaScript 為網頁增添互動功能。

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

本教學課程是為了讓您可以開啟示範並自行嘗試所有工作流程。當您實際跟著課程進行時,您之後可能會記得工作流程。

  1. 開啟示範
  2. 選用:將示範移至另一個視窗。本範例的左側是教學課程,示範位置在右側。

    本教學課程左側和右側的示範影片

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

    開發人員工具會在示範的右側開啟。

  4. 選用:將開發人員工具移至視窗底部,或將其從另一個視窗移除

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

    開發人員工具已在另一個視窗中移除: 開發人員工具已在另一個視窗中移除。

查看從 JavaScript 記錄的訊息

您在「主控台」中看到的大多數訊息,都是來自編寫網頁 JavaScript 的網頁開發人員。本節的目標是介紹您可以在控制台中看到的各種訊息類型,並說明如何透過自己的 JavaScript 自行記錄每種訊息類型。

  1. 按一下示範中的「Log Info」按鈕。Hello, Console! 會登入控制台。

    按一下記錄資訊後控制台。

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

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

    當網頁的 JavaScript 名為 console.log('Hello, Console!') 時,系統會記錄訊息。

  3. 透過下列任一工作流程返回控制台

    • 再按一下「Console」(控制台) 分頁標籤即可。
    • 按下 Control + [ 鍵或 Command + [ 鍵 (Mac),直到焦點移至控制台
    • 開啟指令選單,開始輸入 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 前方的「Expand」圖示 展開。。開發人員工具會顯示引發呼叫前的堆疊追蹤

    堆疊追蹤。

    堆疊追蹤告訴您,系統已呼叫名為 logWarning 的函式,而該函式又稱為 quoteDante。換句話說,第一個發生的呼叫是在堆疊追蹤的底部。您隨時可以呼叫 console.trace() 來記錄堆疊追蹤。

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

    錯誤訊息。

  8. 按一下「Log Table」。系統就會登入控制台,顯示知名藝人的表格。

    控制台中的表格。

    請注意,系統僅針對一列填入 birthday 欄。請查看程式碼,找出原因。

  9. 按一下「記錄群組」。4 個知名、打擊犯罪的知名烏龜姓名會歸入 Adolescent Irradiated Espionage Tortoises 標籤。

    控制台中的一組訊息。

  10. 按一下「Log Custom」。如果是有紅色邊框和藍色背景的訊息,則會記錄到主控台。

    控制台中含有自訂格式設定的訊息。

這裡的主要概念是,如果您想從 JavaScript 將訊息記錄至「Console」,請使用其中一種 console 方法。每種方法對訊息的格式都不同。

這裡展示的方法還有更多。本教學課程結束時,您會瞭解如何探索其他方法。

查看瀏覽器記錄的訊息

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

  1. 按一下 [Cause 404]。瀏覽器會記錄 404 網路錯誤,因為頁面 JavaScript 嘗試擷取不存在的檔案。

    控制台顯示 404 錯誤。

  2. 按一下「原因錯誤」。瀏覽器會記錄未擷取的 TypeError,因為 JavaScript 正嘗試更新不存在的 DOM 節點。

    控制台中的 TypeError。

  3. 按一下「Log Levels」下拉式選單,然後啟用「Verbose」選項 (如果已停用)。下一節將進一步說明篩選功能。您必須執行這個動作以確保記錄的下一則訊息可見。注意:如果「Default Levels」下拉式選單處於停用狀態,您可能需要關閉主控台側欄。如要進一步瞭解主控台側欄,請在下方依「郵件來源」篩選。

    啟用詳細記錄層級。

  4. 按一下「原因違規」。頁面在幾秒內沒有回應,然後瀏覽器會將訊息 [Violation] 'click' handler took 3000ms 記錄至控制台。實際時間長度可能不同。

    控制台中的違規事項。

篩選訊息

部分網頁上的控制台會顯示大量訊息。開發人員工具提供多種方式,可過濾與目前工作無關的訊息。

依記錄層級篩選

每個 console.* 方法都會獲派一個嚴重性等級:VerboseInfoWarningError。舉例來說,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. 從「Filter」文字方塊中刪除 Dave。所有訊息都會重新顯示。

依規則運算式篩選

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

  1. 在「Filter」文字方塊中輸入 /^[AH]/。將此模式輸入 RegExr,即可瞭解其執行功能。

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

  2. 從「Filter」文字方塊中刪除 /^[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 鍵。系統會隨即開啟「Drawer」的「Console」分頁。其中包含您在本教學課程期間用到的控制台的所有功能。

    導覽匣的「控制台」分頁。

後續步驟

恭喜,您已完成教學課程。按一下「Dispense Trophy」即可領取獎盃。