瞭解如何:打開 DevTools 控制檯;堆疊冗餘消息或將其顯示在各自的行上;清除或保留輸出,或者將其保存到文件中;過濾輸出,以及訪問其他控制檯設置。
TL;DR
- 以專用面板或任何其他面板旁的抽屜式導航欄的形式打開控制檯。
- 堆疊冗餘消息,或者將其顯示在各自的行上。
- 清除或保留頁面之間的輸出,或者將其保存到文件中。
- 按嚴重性等級、通過隱藏網絡消息或者按正則表達式模式對輸出進行過濾。
打開控制檯
以全屏模式的專用面板形式訪問控制檯:
或以任何其他面板旁的抽屜式導航欄的形式:
以面板形式打開
要打開專用的 Console 面板,請執行以下操作之一:
- 按 Ctrl+Shift+J (Windows / Linux) 或者 Cmd+Opt+J (Mac)。
- 如果 DevTools 已打開,則按 Console 按鈕。
打開 Console 面板時,Console 抽屜式導航欄將自動摺疊。
以抽屜式導航欄形式打開
要以任何其他面板旁的抽屜式導航欄的形式打開控制檯,請執行以下操作之一:
- 在 DevTools 處於聚焦狀態時按 Esc。
- 按 Customize and control DevTools 按鈕,然後按 Show console。
消息堆疊
如果一條消息連續重複,而不是在新行上輸出每一個消息實例,控制檯將“堆疊”消息並在左側外邊距顯示一個數字。此數字表示該消息已重複的次數。
如果您傾向於爲每一個日誌使用一個獨特的行條目,請在 DevTools 設置中啓用 Show timestamps。
由於每一條消息的時間戳均不同,因此,每一條消息都將顯示在各自的行上。
處理控制檯歷史記錄
清除歷史記錄
您可以通過以下方式清除控制檯歷史記錄:
- 在控制檯中點擊右鍵,然後按 Clear console。
- 在控制檯中鍵入
clear()
。 - 從您的 JavaScript 代碼內調用
console.clear()
。 - 按 Ctrl+L (Mac、Windows、Linux)。
保留歷史記錄
啓用控制檯頂部的 Preserve log 複選框可以在頁面刷新或更改之間保留控制檯歷史記錄。 消息將一直存儲,直至您清除控制檯或者關閉標籤。
保存歷史記錄
在控制檯中點擊右鍵,然後選擇 Save as,將控制檯的輸出保存到日誌文件中。
選擇執行環境
以下屏幕截圖中以藍色突出顯示的下拉菜單稱爲 Execution Context Selector。
通常,您會看到此環境設置爲 top
(頁面的頂部框架)。
其他框架和擴展程序在其自身的環境中運行。要使用這些其他環境,您需要從下拉菜單中選中它們。
例如,如果您要查看 <iframe>
元素的日誌輸出,並修改該環境中存在的某個變量,您需要從 Execution Context Selector 下拉菜單中選中該元素。
控制檯默認設置爲 top
環境,除非您通過檢查其他環境中的某個元素來訪問 DevTools。
例如,如果您檢查 <iframe>
中的一個 <p>
元素,那麼,DevTools 將 Execution Context Selector 設置爲該 <iframe>
的環境。
當您在 top
以外的環境中操作時,DevTools 將 Execution Context Selector 突出顯示爲紅色,如下面的屏幕截圖中所示。
這是因爲開發者很少需要在 top
以外的任意環境中操作。
輸入一個變量,期待返回一個值,只是爲了查看該變量是否爲 undefined
(因爲該變量是在不同環境中定義的),這會非常令人困惑。
過濾控制檯輸出
點擊 Filter 按鈕
()
可以過濾控制檯輸出。您可以按嚴重性等級、按正則表達式模式或者通過隱藏網絡消息的方式進行過濾。
按嚴重性等級進行過濾的說明如下所示:
選項及顯示的內容 | |
---|---|
All | 顯示所有控制檯輸出 |
Errors | 僅顯示 console.error() 的輸出。 |
Warnings | 僅顯示 console.warn() 的輸出。 |
Info | 僅顯示 console.info() 的輸出。 |
Logs | 僅顯示 console.log() 的輸出。 |
Debug | 僅顯示 console.timeEnd() 和console.debug() 的輸出。 |
其他設置
打開 DevTools 設置,轉至 General 標籤,然後向下滾動到 Console 部分,查看更多控制檯設置。
設置及說明 | |
---|---|
Hide network messages | 默認情況下,控制檯將報告網絡問題。啓用此設置將指示控制檯不顯示這些錯誤的日誌。例如,將不會記錄 404 和 500 系列錯誤。 |
Log XMLHttpRequests | 確定控制檯是否記錄每一個 XMLHttpRequest。 |
Preserve log upon navigation | 在頁面刷新或導航時保留控制檯歷史記錄。 |
Show timestamps | 在調用時向顯示的每條控制檯消息追加一個時間戳。對於發生特定事件時的調試非常實用。這會停用消息堆疊。 |
Enable custom formatters | 控制 JavaScript 對象的格式設置。 |