專業前端都這麼使用 console?

console對於前端人員來講肯定都不陌生，相信大部分開發者都會使用console來進行調試，但它能做的絕不僅限於調試。

最常見的控制檯方法

作爲開發者，相信大家對下面 5 個最常見的 console 方法都不陌生

控制檯打印結果：

今天我要帶大家認識的是一些 console 的高級用法。

首先，我們看一下 console 提供了哪些方法，在控制檯打印一下：

在 Chrome 123 版本，可以看到有 25 個方法。這篇文章將介紹一部分比較實用的方法， 瞭解專業的前端都怎麼運用 console的。

打印時間

常見的一種場景是計算程序執行時間，以跟蹤操作所需的時間。這便可以通過使用console.time()啓動計時器並傳入標籤，然後通過相同的標籤使用console.timeEnd()結束計時器來實現。甚至還可以使用console.timeLog()在長時間運行的操作中添加標記。

// 定義一個函數，模擬一個耗時的計算過程
function calculateSomething() {
  let sum = 0;
  for (let i = 0; i < 1000000000; i++) {
    sum += i;
  }
  return sum;
}

// 使用 console.time() 開始計時，並給計時器命名
console.time('Calculation Time');

// 執行耗時的函數
const result = calculateSomething();

// 使用 console.timeEnd() 結束計時，並打印經過的時間
console.timeEnd('Calculation Time');

// 如果在計算過程中想要添加額外的標記點，可以使用 console.timeLog()
console.time('Calculation Time');
console.log('中間點輸出'); // 假設在某個中間點輸出日誌
console.timeLog('Calculation Time', '中間點標記'); // 添加標記

// 再次執行耗時的計算
calculateSomething();
console.timeEnd('Calculation Time'); // 結束計時

性能分析

我們已經知道通過 console.time() 和 console.timeEnd() 我們可以瞭解一段代碼的運行時間。

但是，如果我們需要分析較爲複雜的 JavaScript 邏輯代碼，想要從中找出程序運行的性能瓶頸，假如繼續使用 console.time() 方法，意味着我們需要大量的插入該方法，這顯然是笨拙的，不推薦大家這麼搞。

相對於複雜邏輯的 JavaScript 程序調優，此時 console.profile() 和 console.profileEnd() 便派上用場了。通過新建一個性能分析器 (基於 cpu 的使用情況)，使之成爲函數性能分析的利器。

用法和 console.time() 的一樣，console.profile()開始，console.profileEnd()結束，需要傳遞一個參數作爲標籤使用，通俗來說，就是爲這個性能分析器起個名字。看下如下代碼，我們測試幾種不同 for 循環書寫方式的耗時情況：

// 簡單新建一個數組吧，新建一個一百萬個成員爲1的數組
let arr = new Array(1000000).fill(1);
    
// 第一種for循環書寫方式    
function forFun1 () {
    for (let i = 0, len = arr.length; i < len; i++) {}
}

// 第二種for循環書寫方式    
function forFun2 () {
    for (let i = arr.length; i --; ) {}
    forFun1();
}
// 第三種for循環書寫方式  
function forFun3 () {
    for (let i = 0, item; item = arr[i++]; ) {}
}
// 執行三個函數  
function fun () {
  forFun1();
  forFun2();
  forFun3();
}

// 立即開始一個性能分析器
console.profile('測試for循環');
fun();
//
console.profileEnd('測試for循環');

打開控制檯運行如上程序：

嗯，打印了兩句話，性能分析器開啓和結束。這就完了？？

在哪兒查看性能分析結果呢？別急，繼續往下看⬇️

在控制檯可以找到這個 javaScript 性能分析器，英文 javaScript Profiler, 如果你在自己瀏覽器找不到， 可能是你沒有啓動這個試驗性功能。

在設置中找到實驗, 然後開啓即可。

打印計次

console.count() 是一個在瀏覽器控制檯中用於計數的 API，它允許開發者在調試過程中跟蹤函數調用的次數或某些特定代碼塊的執行次數。

例如, 在 React 開發中， 想要跟蹤一個子組件被渲染的次數：

class MyComponent extends React.Component {
  render() {
    console.count('MyComponent 渲染次數');
    return (
      <div>這是一個組件</div>
    );
  }
}

在這個例子中，每次 MyComponent 組件渲染時，控制檯都會顯示渲染次數的計數器。

堆棧跟蹤

console.trace() 是一個非常有用的瀏覽器控制檯方法，它可以在代碼的特定位置插入一個跟蹤點，然後輸出一個堆棧跟蹤，顯示調用堆棧的每一層。這對於調試複雜的函數調用和理解代碼執行流程非常有用。

舉個例子，在 React 性能優化中，console.trace() 可以用來追蹤性能瓶頸的來源。通過在關鍵的渲染或更新方法中插入跟蹤點，可以瞭解哪些操作佔用了大量時間。

class PerformanceComponent extends React.Component {
  shouldComponentUpdate(nextProps, nextState) {
    console.trace('shouldComponentUpdate 跟蹤');
    return nextProps.data !== this.props.data;
  }

  componentDidUpdate(prevProps, prevState) {
    console.trace('componentDidUpdate 跟蹤');
    // 執行更新後的操作
  }

  render() {
    const { data } = this.props;
    return (
      <div>數據: {data}</div>
    );
  }
}

打印表格

console.table()方法將對象 / 數組打印爲格式整齊的表格，還是以上面dog對象爲例：

分組打印

當存在很多輸出信息時，你可能想對它們進行組織。一個小而有用的工具是 console.group()和console.groupEnd()。所有在console.group和console.groupEnd之間的console調用都會被分組在一起。調用groupEnd()減少一個級別 (回到上一個層級)。

console.group('Console');
  console.log('warin', "警告");
  console.log('error', "錯誤");
  console.log('info', "提示");
  console.groupCollapsed('Log');
    console.log('%c 自定義樣式', "color:red");
    console.log('%O', {a:1});
    console.log('%d', 12.1);
  console.groupEnd();
console.groupEnd();

console.log() 進階

console.log() 除了上面說的基本用法，還支持下面這些輸出方式。

自定義 CSS 樣式輸出

console.log(`歲月神偷，歌手：%c 金玟岐 `, 'color: #fff;font-size:24px; background:#045133')

支持佔位修飾符 %c來自定義樣式。

格式化輸出內容

輸出格式化的字符串，除了使用佔位符 %c來定義 css 樣式， 還支持以下幾種佔位符:

6Ob2Am

const dog = {
    name:"阿黃",
    age: 1.5,
    friends: 12
}
console.log('名字: %s, 年齡: %f, 好友:%d ',dog.name, dog.age, dog.friends)

// 輸出：名字: 阿黃, 年齡: 1.5, 好友數:12

%o / /%O 雖然都指對象，但%o 表示 DOM 對象:

%O 則表示 javaScript 對象, 我們可以打印一下上面的dog對象：

大家可能覺得，我直接簡單的console.log(xxx)輸出就行，爲什麼還要了解這些佔位符？

佔位符這種寫法在複雜的輸出時，能保證模板和數據分離，結構更加清晰。

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

猜你喜歡