提高 DevTools 控制臺調(diào)試 console 的 12 種方法
很多開發(fā)人員都只是略知道一些瀏覽器 DevTool 調(diào)試的基礎知識。
使用最多的 console.log() 對于在代碼運行時輸出值非常有用，通?？梢詭椭槊麇e誤。
但是，還有一高級的用法還有很多人不知道，所以并未得到充分利用，更快，更容易和更有用的高級的用法，這些高級的用法可用于客戶端腳本，Web 工作人員和服務工作人員。
Node.js 和 Deno 運行時控制臺也支持許多功能。
1. 使用 ES6 解構輸出變量名稱
當監(jiān)視多個值時，日志記錄可能會變得很復雜。通常有必要添加更多信息，例如
const x = 42;
console.log('variableX:', variableX);
// or
console.log(`variableX: ${ variableX }`);
/*
output:
variableX: 42
*/
更快的選擇是使用 ES6 對象銷毀分配。這會將變量添加到具有匹配屬性名稱的對象。
換句話說，只要地方 { and } 括號一個變量來顯示其名稱和值：
console.log({ variableX });
/*
output:
{ variableX: 42 }
*/
2. 使用適當?shù)娜罩鞠㈩愋?/span>
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 調(diào)試消息：
console.debug('nothing to see here - please move along');
console.table() 可以以更友好的格式輸出對象值：
const obj = {
propA: 1,
propB: 2,
propC: 3
};
console.table( obj );
console.table() 也可以用于一維或多維數(shù)組：
const arr1 = [
[ 1, 2, 3 ],
[ 4, 5, 6 ],
[ 7, 8, 9 ]
];
console.table( arr1 );
或?qū)ο髷?shù)組：
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 節(jié)點的后代元素的交互式樹console.clear()清除控制臺中所有以前的消息。
3. 過濾日志消息
瀏覽器以適當?shù)念伾@示日志消息，但也可以對其進行過濾以顯示特定類型。
單擊 控制臺 面板左上方的圖標，可打開 Chrome 的側(cè)欄：
請注意，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. 記錄樣式
可以使用在任何消息類型的第二個參數(shù)中作為字符串傳遞的標準 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 控制臺中的結(jié)果是：
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. 運行堆棧跟蹤
可以使用以下命令輸出構成當前執(zhí)行點的所有函數(shù)調(diào)用的日志 console.trace()：
function callMeTwo() {
console.trace();
return true;
}
function callMeOne() {
return callMeTwo();
}
const r = callMeOne();
跟蹤顯示了每個調(diào)用的行，可以在 “控制臺” 窗格中折疊或展開該行：
8. 組日志消息
可以 console.group( label ) 在開頭和 console.groupEnd() 結(jié)尾使用來將日志消息分為命名組。
消息組可以嵌套，折疊或展開（console.groupCollapsed( label ) 最初顯示該組處于折疊狀態(tài)）：
// start log group
console.group('iloop');
for (let i = 3; i > 0; i--) {
console.log(i);
// start collapsed log group
console.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 ) 到達關聯(lián)的命令后，將報告經(jīng)過的時間（以毫秒為單位）。
計時器可用于評估操作的性能-比管理自己的 Date() 計算更容易，更準確，例如
// start timer
console.time('bigloop');
for (let i = 999999999; i > 0; i--);
// show elapsed time
console.timeEnd('bigloop');
一個頁面上最多可以添加 10,000 個計時器，并且該 console.timeLog( label ) 命令將報告經(jīng)過的時間而不會停止計時器。
一個類似的選項是 console.count( label ) 報告命令被調(diào)用的次數(shù)。
console.countReset( label ) 將命名計數(shù)器重置為零。
10. 按名稱調(diào)試和監(jiān)視功能
DevTools Sources 面板（或 Firefox 中的 Debugger）允許您通過單擊行號來打開文件并設置斷點。
基于 Chrome 的瀏覽器還允許您通過 debug( functionName ) 在控制臺中輸入來設置斷點，例如
debug( doSomething );
該函數(shù)必須在全局名稱空間中可用，并且瀏覽器將在調(diào)用調(diào)試器后立即啟動它?？梢允褂?undebug( functionName ) 或通過重新加載頁面來取消調(diào)試。
的 monitor( functionName ) 和其相關聯(lián)的 unmonitor( functionName ) 命令被以類似的方式使用。他們沒有停止執(zhí)行，而是記錄了對函數(shù)的每次調(diào)用并顯示了傳遞的參數(shù)：
function doSomething called with arguments: "hello", 2
11. 查找并修復事件偵聽器
Firefox DevTools 檢查器面板在任何附加了處理程序的 DOM 元素旁邊顯示一個事件圖標。
單擊該圖標以查看功能名稱，然后單擊左側(cè)的箭頭圖標以展開代碼。
另外，“在調(diào)試器中打開” 圖標可在 “調(diào)試器” 窗格中找到處理程序，因此你可以設置斷點：
Chrome 的實現(xiàn)并不理想，但是您可以通過將 DOM 節(jié)點傳遞給 getEventListeners() 函數(shù)來查看所有事件偵聽器。例如，getEventListeners( $0 ) 顯示應用于“元素”面板中當前突出顯示的 DOM 節(jié)點的偵聽器：
12. 將屬性復制到剪貼板
console copy() 命令可以將任何值復制到剪貼板。它可以是原始值，數(shù)組，對象或 DOM 節(jié)點。
傳遞 DOM 節(jié)點后，copy() 將該元素及其所有子元素的 HTML 放置在剪貼板上。
等同于右鍵單擊一個節(jié)點，然后選擇 “復制”，然后選擇 “復制外部HTML” 。
該命令將 copy( document.documentElement ) 復制整個 HTML文檔?？梢詫⑵湔迟N到文本編輯器中，以方便閱讀標記。
最后
瀏覽器 DevTools 已從基本控制臺演變?yōu)閺碗s的開發(fā)和調(diào)試環(huán)境。
console.log() 始終會很受歡迎，但其他選項可能會提供更快，更輕松的方法來實現(xiàn)零錯誤！
本文翻譯自文章：[12 Ways to Improve Your DevTools Console Logging]
往期精文
歡迎關注公眾號：“全棧修煉”，回復 “電子書” 即可以獲得下面 300 本技術精華書籍哦，貓哥 wx：CB834301747 。
通過閱讀本篇文章，如果有收獲的話，可以點個贊和在看，這將會成為我持續(xù)分享的動力，感謝～