讓人眼前一亮的 console-log 替代方案彙總

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

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

console.log 很棒，它可能是我們日常開發中最常用的方法之一。但實際上，控制檯對象中也有一些很棒的方法，它們可以幫助我們在控制檯中打印出更清晰漂亮的消息。

在今天的文章中，我就來分享一些有關控制檯的高級技巧，我們現在開發吧。

日誌記錄級別：調試、信息、警告、錯誤

不同的事件根據其重要性具有不同的日誌記錄級別，通常有四個日誌級別：調試→信息→警告→錯誤，他們在控制檯對象中有對應的方法：

用法：

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

輸出：

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

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

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

以精美的樣式輸出消息

如果要在打印的消息中添加 CSS 樣式，只需在字符串前添加 %c 並將 CSS 樣式作爲另一個參數傳遞：

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

在控制檯輸出圖像

另一個有趣的事情是，我們可以在控制檯中輸出圖像，我們只需要設置 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`
      )

結果：

console.table()

假設我們要打印一些對象，如果像這樣直接使用 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()

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

如果我們仍然使用 console.log ，我們將無法再觀察程序調用堆棧：

console.time()

當我們需要跟蹤一個操作需要多長時間時，我們可以使用 console.time() ，它會啓動一個計時器。

我們爲每個計時器指定一個唯一的名稱，並且在給定頁面上最多可以運行 10,000 個計時器。

當我們使用相同的名稱調用 console.timeEnd() 時，瀏覽器將輸出自計時器啓動以來經過的時間（以毫秒爲單位）。

console.count()

當我們需要計算一段代碼執行了多少次時，我們可以使用 console.count 。console.count() 方法記錄了這個對 count() 的特定調用被調用的次數。

例如，如果我們想計算一個斐波那契函數被調用了多少次，那麼我們可以編寫如下代碼：

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

當我們需要計算組件在 React 或 Vue 中渲染或更新的次數時，我們也可以使用 console.count，所以你不需要自己實現一個計數器。

console.assert()

使用 console.assert()，我們可以決定只在條件爲假時記錄一些內容，並通過避免不必要的消息打印來節省一些控制檯空間：

console.group()

我們可以使用嵌套組通過視覺關聯相關消息來幫助組織您的輸出。要創建新的嵌套塊，請調用 console.group()。

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

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 個關於 console.log 的解決方案，希望這些知識對你有用，如果你覺得對你有幫助的話，請記得我，關注我，並將其分享給你的朋友，也許能夠幫助到他，最後，感謝你的閱讀，祝編程愉快！

web 前端開發 一個專業而懂你的前端開發技術研究學習平臺，每天與你分享【web 前端開發】相關的技術文章與案例，互聯網資訊，編程圖書與課程，前端開發工具等學習資源，堅持每天學習一點點，每天進步一點點，關注我們，一起學習成長進步。

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/4JgiOFCSHebeTDeQKz5aFg

猜你喜歡