本互動式教學課程說明如何在 Chrome 開發人員工具主控台中記錄及篩選訊息。
本教學課程應依序完成,本文假設您瞭解網頁開發的基礎知識,例如如何使用 JavaScript 為網頁增添互動功能。
設定示範模式和開發人員工具
本教學課程是為了讓您可以開啟示範並自行嘗試所有工作流程。當您實際跟著課程進行時,您之後可能會記得工作流程。
- 開啟示範。
選用:將示範移至另一個視窗。本範例的左側是教學課程,示範位置在右側。
將焦點移至示範,然後按下 Control + Shift + J 鍵或 Command + Option + J 鍵 (Mac) 開啟開發人員工具。根據預設,開發人員工具會在示範的右側開啟。
-
開發人員工具已固定在示範底部:
開發人員工具已在另一個視窗中移除:
查看從 JavaScript 記錄的訊息
您在「主控台」中看到的大多數訊息,都是來自編寫網頁 JavaScript 的網頁開發人員。本節的目標是介紹您可以在控制台中看到的各種訊息類型,並說明如何透過自己的 JavaScript 自行記錄每種訊息類型。
按一下示範中的「Log Info」按鈕。
Hello, Console!
會登入控制台。在「Console」中,按一下
Hello, Console!
訊息旁邊的「log.js:2」。「Sources」(來源) 面板會隨即開啟,並醒目顯示導致訊息登入主控台的程式碼行。當網頁的 JavaScript 名為
console.log('Hello, Console!')
時,系統會記錄訊息。透過下列任一工作流程返回控制台:
- 再按一下「Console」(控制台) 分頁標籤即可。
- 按下 Control + [ 鍵或 Command + [ 鍵 (Mac),直到焦點移至控制台。
- 開啟指令選單,開始輸入
Console
,選取「Show Console Panel」指令,然後按下 Enter 鍵。
按一下示範中的「Log Warning」按鈕。
Abandon Hope All Ye Who Enter
會記錄到控制台。這類訊息會有警告,
選用步驟:按一下「log.js:12」log.js:12,查看導致訊息變成類似下列格式的程式碼,完成後再回到「Console」log.js:12。當您想以特定方式記錄訊息的程式碼時,請執行這項操作。
按一下
Abandon Hope All Ye Who Enter
前方的「Expand」圖示 。開發人員工具會顯示引發呼叫前的堆疊追蹤。堆疊追蹤告訴您,系統已呼叫名為
logWarning
的函式,而該函式又稱為quoteDante
。換句話說,第一個發生的呼叫是在堆疊追蹤的底部。您隨時可以呼叫console.trace()
來記錄堆疊追蹤。按一下「記錄錯誤」。系統會記錄以下錯誤訊息:
I'm sorry, Dave. I'm afraid I can't do that.
按一下「Log Table」。系統就會登入控制台,顯示知名藝人的表格。
請注意,系統僅針對一列填入
birthday
欄。請查看程式碼,找出原因。按一下「記錄群組」。4 個知名、打擊犯罪的知名烏龜姓名會歸入
Adolescent Irradiated Espionage Tortoises
標籤。按一下「Log Custom」。如果是有紅色邊框和藍色背景的訊息,則會記錄到主控台。
這裡的主要概念是,如果您想從 JavaScript 將訊息記錄至「Console」,請使用其中一種 console
方法。每種方法對訊息的格式都不同。
這裡展示的方法還有更多。本教學課程結束時,您會瞭解如何探索其他方法。
查看瀏覽器記錄的訊息
瀏覽器也會將訊息記錄到控制台。這通常是因為頁面發生問題。
按一下 [Cause 404]。瀏覽器會記錄
404
網路錯誤,因為頁面 JavaScript 嘗試擷取不存在的檔案。按一下「原因錯誤」。瀏覽器會記錄未擷取的
TypeError
,因為 JavaScript 正嘗試更新不存在的 DOM 節點。按一下「Log Levels」下拉式選單,然後啟用「Verbose」選項 (如果已停用)。下一節將進一步說明篩選功能。您必須執行這個動作以確保記錄的下一則訊息可見。注意:如果「Default Levels」下拉式選單處於停用狀態,您可能需要關閉主控台側欄。如要進一步瞭解主控台側欄,請在下方依「郵件來源」篩選。
按一下「原因違規」。頁面在幾秒內沒有回應,然後瀏覽器會將訊息
[Violation] 'click' handler took 3000ms
記錄至控制台。實際時間長度可能不同。
篩選訊息
部分網頁上的控制台會顯示大量訊息。開發人員工具提供多種方式,可過濾與目前工作無關的訊息。
依記錄層級篩選
每個 console.*
方法都會獲派一個嚴重性等級:Verbose
、Info
、Warning
或 Error
。舉例來說,console.log()
是 Info
層級的訊息,console.error()
則是 Error
層級的訊息。
如何依記錄層級篩選:
按一下「Log Levels」下拉式選單,然後停用「Errors」。如果等級沒有勾號,系統就會停用該等級。
Error
層級的訊息會消失。再次按一下「Log Levels」下拉式選單,然後重新啟用「Errors」。
Error
層級訊息會再次顯示。
依文字篩選
如果只想查看含有確切字串的訊息,請在「Filter」文字方塊中輸入該字串。
在「Filter」文字方塊中輸入
Dave
。所有不含Dave
字串的訊息都會隱藏。您可能也會看到Adolescent Irradiated Espionage Tortoises
標籤。發生錯誤。從「Filter」文字方塊中刪除
Dave
。所有訊息都會重新顯示。
依規則運算式篩選
如要顯示所有包含文字模式 (而非特定字串) 的訊息,請使用規則運算式。
在「Filter」文字方塊中輸入
/^[AH]/
。將此模式輸入 RegExr,即可瞭解其執行功能。從「Filter」文字方塊中刪除
/^[AH]/
。系統會再次顯示所有訊息。
依郵件來源篩選
如果您只想查看來自特定網址的郵件,可以使用側欄功能。
按一下「Show Console Sidebar」。
按一下「12 Messages」旁的「展開」圖示 。側欄會列出導致系統記錄訊息的網址清單。舉例來說,
log.js
造成 11 則訊息。
依使用者訊息篩選
先前您點選「Log Info」後,名為 console.log('Hello, Console!')
的指令碼,用於將訊息記錄至控制台。從 JavaScript 記錄到的訊息稱為「使用者訊息」。相反地,如果您點選「Cause 404」,瀏覽器記錄了 Error
層級訊息,表示找不到要求的資源。這類訊息屬於瀏覽器訊息。您可以使用側欄來過濾瀏覽器訊息,讓畫面只顯示使用者訊息。
按一下「9 使用者訊息」。已隱藏瀏覽器訊息。
按一下「12 訊息」即可再次顯示所有訊息。
使用控制台和其他面板
如果您要編輯樣式,但需要快速查看「控制台」記錄中是否有某些內容,該怎麼辦?使用導覽匣。
- 按一下「元素」分頁標籤。
按下 Escape 鍵。系統會隨即開啟「Drawer」的「Console」分頁。其中包含您在本教學課程期間用到的控制台的所有功能。
後續步驟
恭喜,您已完成教學課程。按一下「Dispense Trophy」即可領取獎盃。
- 請參閱管理中心參考資料,探索更多與控制台 UI 相關的功能和工作流程。
- 請參閱 Console API 參考資料,進一步瞭解「查看 JavaScript 記錄的訊息」一文中所述的所有
console
方法,並探索本教學課程未涵蓋的其他console
方法。 - 請參閱開始使用,探索開發人員工具的其他功能。
- 如要進一步瞭解所有
console
格式和樣式方法,請參閱「在控制台中設定訊息的格式和設定樣式」一文。