很多開發人員都只是略知道一些瀏覽器 DevTool 調試的基礎知識。

使用最多的 console.log() 對于在代碼運行時輸出值非常有用，通常可以幫助查明錯誤。

但是，還有一高級的用法還有很多人不知道，所以并未得到充分利用，更快，更容易和更有用的高級的用法，這些高級的用法可用于客戶端腳本，Web 工作人員和服務工作人員。

Node.js 和 Deno 運行時控制臺也支持許多功能。

1. 使用 ES6 解構輸出變量名稱

當監視多個值時，日志記錄可能會變得很復雜。通常有必要添加更多信息，例如

const?x?=?42;console.log('variableX:',?variableX); //?or console.log(`variableX:?${?variableX?}`);/* output: variableX:?42 */

更快的選擇是使用 ES6 對象銷毀分配。這會將變量添加到具有匹配屬性名稱的對象。

換句話說，只要地方 { and } 括號一個變量來顯示其名稱和值：

console.log({?variableX?});/* output: {?variableX:?42?} */

2. 使用適當的日志消息類型

console.log() 眾所周知的最簡單的方法：

console.log('no-frills?log?message');

但這不是唯一的類型。消息可以歸類為信息（與相同處理 console.log() ）：

console.info('this?is?an?information?message');

warnings:

console.warn('I?warned?you?this?could?happen!');

errors:

console.error('I\'m?sorry?Dave,?I\'m?afraid?I?can\'t?do?that');

或更不重要的 debug 調試消息：

console.debug('nothing?to?see?here?-?please?move?along');

console.table() 可以以更友好的格式輸出對象值：

const?obj?=?{propA:?1,propB:?2,propC:?3};console.table(?obj?);

console.table() 也可以用于一維或多維數組：

const?arr1?=?[[?1,?2,?3?],[?4,?5,?6?],[?7,?8,?9?]];console.table(?arr1?);

或對象數組：

const?arr2?=?[{?a:?1,?b:?2,?c:?3?},{?a:?4,?b:?5,?c:?6?},{?a:?7,?b:?8,?c:?9?}];console.table(?arr2?);

其他選項包括：

• console.dir( obj ) 在 JavaScript 對象中顯示屬性的交互式列表

• console.dirxml( element ) 顯示來自指定 HTML 或 XML 節點的后代元素的交互式樹

• console.clear() 清除控制臺中所有以前的消息。

3. 過濾日志消息

瀏覽器以適當的顏色顯示日志消息，但也可以對其進行過濾以顯示特定類型。

單擊 控制臺 面板左上方的圖標，可打開 Chrome 的側欄：

請注意，console.debug() 僅在查看 詳細 選項時才會顯示消息。

4. 使用 printf-type 消息

所有日志類型都可以使用 C 樣式的 printf消息格式，該格式定義帶有 % 指示符的模板，該指示符用于替換變量。

例如：

console.log('The?answer?to?%s?is?%d.','life,?the?universe?and?everything',42 ); //?The?answer?to?life,?the?universe?and?everything?is?42.

5. 記錄樣式

可以使用在任何消息類型的第二個參數中作為字符串傳遞的標準 CSS 設置日志消息的樣式。

%c 消息中的標記指示樣式的應用位置，例如

console.log('%cOK,?things?are?really?bad?now!',`font-size:?2em;padding:?0.5em?2em;margin:?1em?0;color:?yellow;background-color:?red;border-radius:?50%;` );

在 DevTools 控制臺中的結果是：

6. 使用類似測試的斷言

console.assert() 當條件失敗時，可以使用類似 test 的命令來輸出消息。

可以使用條件定義斷言，然后在該條件失敗時輸出一個或多個對象，例如

console.assert(life?===?42,'life?is?expected?to?be',42,'but?is?set?to',life );

或者，可以使用消息和替換值：

console.assert(life?===?42,'life?is?expected?to?be?%s?but?is?set?to?%s',42,life );

當條件失敗時，這兩個選項都將顯示斷言錯誤：

7. 運行堆棧跟蹤

可以使用以下命令輸出構成當前執行點的所有函數調用的日志 console.trace()：

function?callMeTwo()?{console.trace();return?true; }function?callMeOne()?{return?callMeTwo(); }const?r?=?callMeOne();

跟蹤顯示了每個調用的行，可以在 “控制臺” 窗格中折疊或展開該行：

8. 組日志消息

可以 console.group( label ) 在開頭和 console.groupEnd() 結尾使用來將日志消息分為命名組。

消息組可以嵌套，折疊或展開（console.groupCollapsed( label ) 最初顯示該組處于折疊狀態）：

//?start?log?group console.group('iloop');for?(let?i?=?3;?i?>?0;?i--)?{console.log(i);//?start?collapsed?log?groupconsole.groupCollapsed('jloop');for?(let?j?=?97;?j?<?100;?j++)?{console.log(j);}//?end?log?group?(jloop)console.groupEnd();}//?end?log?group?(iloop) console.groupEnd();

9. 使用性能計時器

該 time( label ) 命令啟動一個計時器。timeEnd( label ) 到達關聯的命令后，將報告經過的時間（以毫秒為單位）。

計時器可用于評估操作的性能-比管理自己的 Date() 計算更容易，更準確，例如

//?start?timer console.time('bigloop');for?(let?i?=?999999999;?i?>?0;?i--);//?show?elapsed?time console.timeEnd('bigloop');

一個頁面上最多可以添加 10,000 個計時器，并且該 console.timeLog( label ) 命令將報告經過的時間而不會停止計時器。

一個類似的選項是 console.count( label ) 報告命令被調用的次數。

console.countReset( label ) 將命名計數器重置為零。

10. 按名稱調試和監視功能

DevTools Sources 面板（或 Firefox 中的 Debugger）允許您通過單擊行號來打開文件并設置斷點。

基于 Chrome 的瀏覽器還允許您通過 debug( functionName ) 在控制臺中輸入來設置斷點，例如

debug(?doSomething?);

該函數必須在全局名稱空間中可用，并且瀏覽器將在調用調試器后立即啟動它。可以使用 undebug( functionName ) 或通過重新加載頁面來取消調試。

的 monitor( functionName ) 和其相關聯的 unmonitor( functionName ) 命令被以類似的方式使用。他們沒有停止執行，而是記錄了對函數的每次調用并顯示了傳遞的參數：

function?doSomething?called?with?arguments:?"hello",?2

11. 查找并修復事件偵聽器

Firefox DevTools 檢查器面板在任何附加了處理程序的 DOM 元素旁邊顯示一個事件圖標。

單擊該圖標以查看功能名稱，然后單擊左側的箭頭圖標以展開代碼。

另外，“在調試器中打開” 圖標可在 “調試器” 窗格中找到處理程序，因此你可以設置斷點：

Chrome 的實現并不理想，但是您可以通過將 DOM 節點傳遞給 getEventListeners() 函數來查看所有事件偵聽器。例如，getEventListeners( $0 ) 顯示應用于“元素”面板中當前突出顯示的 DOM 節點的偵聽器：

12. 將屬性復制到剪貼板

console copy() 命令可以將任何值復制到剪貼板。它可以是原始值，數組，對象或 DOM 節點。

傳遞 DOM 節點后，copy() 將該元素及其所有子元素的 HTML 放置在剪貼板上。

等同于右鍵單擊一個節點，然后選擇 “復制”，然后選擇 “復制外部HTML” 。

該命令將 copy( document.documentElement ) 復制整個 HTML文檔。可以將其粘貼到文本編輯器中，以方便閱讀標記。

最后

瀏覽器 DevTools 已從基本控制臺演變為復雜的開發和調試環境。

console.log() 始終會很受歡迎，但其他選項可能會提供更快，更輕松的方法來實現零錯誤！

本文翻譯自文章：[12 Ways to Improve Your DevTools Console Logging]

往期精文

• Vue3 全家桶 + Element Plus + Vite + TypeScript + Eslint 項目配置最佳實踐

• TypeScript 中提升幸福感的 10 個高級技巧

• 推薦 7 個 Vue2、Vue3 源碼解密分析的重磅開源項目

通過閱讀本篇文章，如果有收獲的話，可以點個贊和在看，這將會成為我持續分享的動力，感謝～

總結

以上是生活随笔為你收集整理的提高 DevTools 控制台调试 console 的 12 种方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。