我現(xiàn)在在調(diào)試代碼的時(shí)候基本用的都是console.log() 調(diào)試法，雖然低級(jí)，但好用呀。當(dāng)然，遇到復(fù)雜點(diǎn)的就會(huì)借助其它工具，但日常開(kāi)發(fā)中 console.log() 基本夠用了。
前綴鋪墊的差不多了，今天我們來(lái)看看 console.log() 中還有哪些花里胡哨的寫(xiě)法。
1. 用ES6解構(gòu)賦值輸出變量名
如果打印多個(gè)值的，為了區(qū)別我們一般會(huì)連同變量名打印出來(lái):
const variableX = 42;console.log('variableX:', variableX);// 或者console.log(`variableX: ${ variableX }`);其實(shí)，還有一種很簡(jiǎn)潔的方式就是使用解構(gòu)的方式：
const variableX = 42;console.log({ variableX }); // { variableX: 42 }2. 使用適當(dāng)?shù)拇蛴☆?lèi)型
console.log() 一般這樣用：
console.log('no-frills log message');但它不是唯一的類(lèi)型。消息可以被歸類(lèi)為information （其處理方式與console.log()相同）。
console.info('this is an information message');警告：
console.warn('I warned you this could happen!');錯(cuò)誤：
console.error('I\'m sorry Dave, I\'m afraid I can\'t do that');或不太重要的調(diào)試信息:
console.debug('nothing to see here - please move along');console.table()可以以更友好的格式輸出對(duì)象的值。
const obj = { propA: 1, propB: 2, propC: 3 };console.table( obj );或?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 );其他選項(xiàng)包括:
3.過(guò)濾日志消息
瀏覽器以適當(dāng)?shù)念伾@示日志信息，但也可以進(jìn)行過(guò)濾，以顯示特定的類(lèi)型。點(diǎn)擊控制臺(tái)窗格左上方的圖標(biāo)，就可以打開(kāi)Chrome的側(cè)邊欄。
注意，console.debug()信息只有在查看 verbose 選項(xiàng)時(shí)才會(huì)顯示。
4. 使用printf-type的信息
所有的日志類(lèi)型都可以使用c 語(yǔ)言風(fēng)格的printf消息格式，該格式定義了一個(gè)模板，其中包含一個(gè)變量被替換的%指示器。例如
console.log( 'The answer to %s is %d.', 'life, the universe and everything', 42);// The answer to life, the universe and everything is 42.帶樣式的風(fēng)格
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%; `);控制臺(tái)中的結(jié)果:
6. 使用類(lèi)似測(cè)試的斷言
類(lèi)似于測(cè)試的console.assert()命令可以用來(lái)在條件失敗時(shí)輸出一個(gè)信息。可以用一個(gè)條件和一個(gè)或多個(gè)對(duì)象來(lái)定義斷言，當(dāng)該條件失敗時(shí)輸出，例如
console.assert( life === 42, 'life is expected to be', 42, 'but is set to', life);另外，也可以使用一個(gè)信息和替換值。
console.assert( life === 42, 'life is expected to be %s but is set to %s', 42, life);當(dāng)條件失敗時(shí)，這兩個(gè)選項(xiàng)都會(huì)顯示一個(gè)斷言錯(cuò)誤。
7. 運(yùn)行堆棧跟蹤
可以使用 console.trace() 輸出構(gòu)成當(dāng)前執(zhí)行點(diǎn)的所有函數(shù)調(diào)用的日志。
function callMeTwo() { console.trace(); return true;}function callMeOne() { return callMeTwo();}const r = callMeOne();跟蹤顯示每次調(diào)用是哪一行，并且可以在控制臺(tái)窗格中折疊或展開(kāi)：
8. 組日志消息
打印日志時(shí)，可以在開(kāi)頭使用console.group( label ) 和結(jié)尾使用 console.groupEnd() 將日志消息分成命名組。消息組可以嵌套和折疊或展開(kāi)（console.groupCollapsed( label ) 最初顯示處于折疊狀態(tài)的組）：
// start log groupconsole.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. 使用定時(shí)器
console.time和console.timeEnd這兩個(gè)方法可以用來(lái)讓W(xué)EB開(kāi)發(fā)人員測(cè)量一個(gè)javascript腳本程序執(zhí)行消耗的時(shí)間。隨著WEB應(yīng)用越來(lái)越重要，Javascript的執(zhí)行性能也日益受到重視，WEB開(kāi)發(fā)人員知道一些性能測(cè)試機(jī)器是必須的。
console.time方法是開(kāi)始計(jì)算時(shí)間，console.timeEnd 是停止計(jì)時(shí)，輸出腳本執(zhí)行的時(shí)間。
// 啟動(dòng)計(jì)時(shí)器console.time('testForEach');// (寫(xiě)一些測(cè)試用代碼)// 停止計(jì)時(shí)，輸出時(shí)間console.timeEnd('testForEach');// 4522.303ms這兩個(gè)方法中都可以傳人一個(gè)參數(shù)，作為計(jì)時(shí)器的名稱，它的作用是在代碼并行運(yùn)行時(shí)分清楚各個(gè)計(jì)時(shí)器。對(duì)console.timeEnd的調(diào)用會(huì)立即輸出執(zhí)行總共消耗的時(shí)間，單位是毫秒。
10. 按名稱調(diào)試和監(jiān)控函數(shù)
DevTools Sources 面板(或 Firefox 中的調(diào)試器)允許打開(kāi)一個(gè)文件，并通過(guò)單擊行號(hào)設(shè)置斷點(diǎn)。基于chrome的瀏覽器也允許你通過(guò)在控制臺(tái)中輸入debug(functionName)來(lái)設(shè)置斷點(diǎn)，例如:
debug( doSomething );該函數(shù)必須在全局命名空間中可用，并且瀏覽器將在調(diào)用它時(shí)立即啟動(dòng)調(diào)試器。可以使用undebug(functionName)或重新加載頁(yè)面來(lái)取消調(diào)試。
monitor(function)，它接收一個(gè)函數(shù)名作為參數(shù)，比如function a,每次a被執(zhí)行了，都會(huì)在控制臺(tái)輸出一條信息，里面包含了函數(shù)的名稱a及執(zhí)行時(shí)所傳入的參數(shù)。
而unmonitor(function)便是用來(lái)停止這一監(jiān)聽(tīng)。
11. 查找和修復(fù)事件監(jiān)聽(tīng)器
Firefox DevTools Inspector 面板會(huì)在任何附加了處理程序的DOM元素旁邊顯示一個(gè) event 圖標(biāo)。單擊圖標(biāo)查看函數(shù)名，然后單擊左邊的箭頭圖標(biāo)展開(kāi)代碼。或者，“在調(diào)試器中打開(kāi)”圖標(biāo)將在“調(diào)試器”窗格中定位處理程序，以便可以設(shè)置斷點(diǎn)
Chrome的實(shí)現(xiàn)沒(méi)有那么好，但可以通過(guò)getEventListeners()函數(shù)傳遞一個(gè)DOM節(jié)點(diǎn)來(lái)查看所有事件監(jiān)聽(tīng)器。例如，getEventListeners($0)顯示應(yīng)用于當(dāng)前Elements面板中高亮顯示的DOM節(jié)點(diǎn)的偵聽(tīng)器
12. 復(fù)制屬性到剪貼板
控制臺(tái)的copy()命令可以復(fù)制任何值到剪貼板。它可以是一個(gè)原始值、數(shù)組、對(duì)象或DOM節(jié)點(diǎn)。
當(dāng)傳遞一個(gè)DOM節(jié)點(diǎn)時(shí)，copy()將該元素及其所有子元素的HTML放在剪貼板上。這與右鍵點(diǎn)擊一個(gè)節(jié)點(diǎn)并選擇復(fù)制，然后選擇復(fù)制外層HTML是一樣的。
命令 copy( document.documentElement ) 復(fù)制整個(gè) HTML 文檔。這可以粘貼到文本編輯器中并進(jìn)行美化增強(qiáng)可讀性。
~完，方法是很多，自己選著用，我是小智，刷碗去了，我們下期見(jiàn)~
作者：Craig Buckler 譯者：前端小智 來(lái)源：.openreplay 原文：https://blog.openreplay.com/12-ways-to-improve-your-devtools-console-logging
