英文 | https://medium.com/frontend-canteen/use-these-methods-instead-of-console-log-to-make-your-console-more-clear-and-beautiful-59bbcc5a2a97

翻譯 | web前端開發(fā)（ID：web_qdkf)

console.log 很棒，它可能是我們?nèi)粘ｉ_發(fā)中最常用的方法之一。但實(shí)際上，控制臺(tái)對(duì)象中也有一些很棒的方法，它們可以幫助我們?cè)诳刂婆_(tái)中打印出更清晰漂亮的消息。

在今天的文章中，我就來分享一些有關(guān)控制臺(tái)的高級(jí)技巧，我們現(xiàn)在開發(fā)吧。

日志記錄級(jí)別：調(diào)試、信息、警告、錯(cuò)誤

不同的事件根據(jù)其重要性具有不同的日志記錄級(jí)別，通常有四個(gè)日志級(jí)別：調(diào)試→信息→警告→錯(cuò)誤，他們?cè)诳刂婆_(tái)對(duì)象中有對(duì)應(yīng)的方法：

用法：

console.debug('Debug message');console.info('Useful information');console.warn('This is a warning');console.error('Something went wrong!');

輸出：

• 默認(rèn)情況下，console.debug 打印的消息不會(huì)出現(xiàn)在控制臺(tái)上。

• console.info 等于 console.log 。

• console.warn 將打印黃色警告樣式消息。

• console.error 將打印一條紅色錯(cuò)誤樣式消息。

當(dāng)我們需要打印特殊消息時(shí)，可以使用這些方法代替 console.log ，它將使消息清晰。

此外，如果我們使用不同的日志記錄級(jí)別，我們可以過濾消息：

在這種情況下，Verbose等于debug。

以精美的樣式輸出消息

如果要在打印的消息中添加 CSS 樣式，只需在字符串前添加 %c 并將 CSS 樣式作為另一個(gè)參數(shù)傳遞：

console.log('%c Hi everyone!', 'color: red; font-size: 18px');console.log('%c hello world', 'color: #1c03fc; font-size: 18px');

在控制臺(tái)輸出圖像

另一個(gè)有趣的事情是，我們可以在控制臺(tái)中輸出圖像，我們只需要設(shè)置 background-img 屬性。

例子：

console.log(        "%c  ",        `background: url(https://cdn-images-1.medium.com/fit/c/64/64/1*XYGoKrb1w5zdWZLOIEevZg.png) no-repeat;         font-size:130px;         line-height: 64px`      )

結(jié)果：

• 由于控制臺(tái)不支持 <img> 標(biāo)簽，我們使用背景圖片代替。

• 另外，控制臺(tái)不支持寬高，所以我們用空格和字體大小來代替；

console.table()

假設(shè)我們要打印一些對(duì)象，如果像這樣直接使用console.log：

let user1 = { name: 'bytefish', tech: 'JavaScript', age: 99 }let user2 = { name: 'Jon', tech: 'CSS', age: 55}let user3 = { name: 'Bob', tech: 'HTML', age: 22 }
console.log(user1, user2, user3)

它有效，但不清楚：

更好的選擇是使用 console.table 在表格中打印它們：

console.trace()

在調(diào)試深度嵌套的函數(shù)時(shí)，我們可能還想輸出代碼的堆棧跟蹤。console.trace() 方法將幫助我們輸出堆棧跟蹤。

如果我們?nèi)匀皇褂?console.log ，我們將無法再觀察程序調(diào)用堆棧：

console.time()

當(dāng)我們需要跟蹤一個(gè)操作需要多長時(shí)間時(shí)，我們可以使用 console.time() ，它會(huì)啟動(dòng)一個(gè)計(jì)時(shí)器。

我們?yōu)槊總€(gè)計(jì)時(shí)器指定一個(gè)唯一的名稱，并且在給定頁面上最多可以運(yùn)行 10,000 個(gè)計(jì)時(shí)器。

當(dāng)我們使用相同的名稱調(diào)用 console.timeEnd() 時(shí)，瀏覽器將輸出自計(jì)時(shí)器啟動(dòng)以來經(jīng)過的時(shí)間（以毫秒為單位）。

console.count()

當(dāng)我們需要計(jì)算一段代碼執(zhí)行了多少次時(shí)，我們可以使用 console.count 。console.count() 方法記錄了這個(gè)對(duì) count() 的特定調(diào)用被調(diào)用的次數(shù)。

例如，如果我們想計(jì)算一個(gè)斐波那契函數(shù)被調(diào)用了多少次，那么我們可以編寫如下代碼：

function fibonacci(num) {  console.count('fibonacci function has been executed')  if (num <= 1) return 1;  return fibonacci(num - 1) + fibonacci(num - 2);}fibonacci(10)

當(dāng)我們需要計(jì)算組件在 React 或 Vue 中渲染或更新的次數(shù)時(shí)，我們也可以使用 console.count，所以你不需要自己實(shí)現(xiàn)一個(gè)計(jì)數(shù)器。

console.assert()

使用 console.assert()，我們可以決定只在條件為假時(shí)記錄一些內(nèi)容，并通過避免不必要的消息打印來節(jié)省一些控制臺(tái)空間：

console.group()

我們可以使用嵌套組通過視覺關(guān)聯(lián)相關(guān)消息來幫助組織您的輸出。要?jiǎng)?chuàng)建新的嵌套塊，請(qǐng)調(diào)用 console.group()。

console.groupCollapsed() 方法類似，但是新塊是折疊的，需要點(diǎn)擊一個(gè)公開按鈕才能閱讀。

console.log("This is the outer level");console.group();    console.log("Level 2");    console.group();        console.log("Level 3");        console.warn("More of level 3");    console.groupEnd();console.log("Back to level 2");console.groupEnd();console.log("Back to the outer level");

寫在最后

以上就是我今天想與你分享的8個(gè)關(guān)于console.log的解決方案，希望這些知識(shí)對(duì)你有用，如果你覺得對(duì)你有幫助的話，請(qǐng)記得我，關(guān)注我，并將其分享給你的朋友，也許能夠幫助到他，最后，感謝你的閱讀，祝編程愉快！

學(xué)習(xí)更多技能

請(qǐng)點(diǎn)擊下方公眾號(hào)