console對于前端人員來講肯定都不陌生，相信大部分開發(fā)者都會使用console來進(jìn)行調(diào)試，但它能做的絕不僅限于調(diào)試。

最常見的控制臺方法

作為開發(fā)者，最常用的 console 方法如下：

控制臺打印結(jié)果：

今天我分享的是一些 console 的高級用法。

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

在 Chrome 123 版本，可以看到有 25 個(gè)方法。這篇文章將介紹一部分比較實(shí)用的方法，了解專業(yè)的前端都怎么運(yùn)用 console的。

打印時(shí)間

• console.time()– 使用輸入?yún)?shù)的名稱啟動計(jì)時(shí)器。在給定頁面上最多可以同時(shí)運(yùn)行 10,000 個(gè)計(jì)時(shí)器。
• console.timeEnd()– 停止指定的計(jì)時(shí)器并記錄自啟動以來經(jīng)過的時(shí)間（以毫秒為單位）。

常見的一種場景是計(jì)算程序執(zhí)行時(shí)間，以跟蹤操作所需的時(shí)間。這便可以通過使用console.time()啟動計(jì)時(shí)器并傳入標(biāo)簽，然后通過相同的標(biāo)簽使用console.timeEnd()結(jié)束計(jì)時(shí)器來實(shí)現(xiàn)。甚至還可以使用console.timeLog()在長時(shí)間運(yùn)行的操作中添加標(biāo)記。

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

// 使用 console.time() 開始計(jì)時(shí)，并給計(jì)時(shí)器命名
console.time('Calculation Time');

// 執(zhí)行耗時(shí)的函數(shù)
const result = calculateSomething();

// 使用 console.timeEnd() 結(jié)束計(jì)時(shí)，并打印經(jīng)過的時(shí)間
console.timeEnd('Calculation Time');

// 如果在計(jì)算過程中想要添加額外的標(biāo)記點(diǎn)，可以使用 console.timeLog()
console.time('Calculation Time');
console.log('中間點(diǎn)輸出'); // 假設(shè)在某個(gè)中間點(diǎn)輸出日志
console.timeLog('Calculation Time', '中間點(diǎn)標(biāo)記'); // 添加標(biāo)記

// 再次執(zhí)行耗時(shí)的計(jì)算
calculateSomething();
console.timeEnd('Calculation Time'); // 結(jié)束計(jì)時(shí)

性能分析

我們已經(jīng)知道通過 console.time() 和 console.timeEnd() 我們可以了解一段代碼的運(yùn)行時(shí)間。

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

相對于復(fù)雜邏輯的 JavaScript 程序調(diào)優(yōu)，此時(shí) console.profile() 和 console.profileEnd() 便派上用場了。通過新建一個(gè)性能分析器(基于cpu的使用情況)，使之成為函數(shù)性能分析的利器。

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

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

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

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

打開控制臺運(yùn)行如上程序：

嗯，打印了兩句話，性能分析器開啟和結(jié)束。這就完了？？

在哪兒查看性能分析結(jié)果呢？別急，繼續(xù)往下看

在控制臺可以找到這個(gè) javaScript性能分析器，英文 javaScript Profiler, 如果你在自己瀏覽器找不到， 可能是你沒有啟動這個(gè)試驗(yàn)性功能。

在設(shè)置中找到實(shí)驗(yàn), 然后開啟即可。

打印計(jì)次

console.count() 是一個(gè)在瀏覽器控制臺中用于計(jì)數(shù)的 API，它允許開發(fā)者在調(diào)試過程中跟蹤函數(shù)調(diào)用的次數(shù)或某些特定代碼塊的執(zhí)行次數(shù)。

例如, 在React開發(fā)中， 想要跟蹤一個(gè)子組件被渲染的次數(shù)：

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

在這個(gè)例子中，每次 MyComponent 組件渲染時(shí)，控制臺都會顯示渲染次數(shù)的計(jì)數(shù)器。

堆棧跟蹤

console.trace() 是一個(gè)非常有用的瀏覽器控制臺方法，它可以在代碼的特定位置插入一個(gè)跟蹤點(diǎn)，然后輸出一個(gè)堆棧跟蹤，顯示調(diào)用堆棧的每一層。這對于調(diào)試復(fù)雜的函數(shù)調(diào)用和理解代碼執(zhí)行流程非常有用。

舉個(gè)例子，在React性能優(yōu)化中，console.trace() 可以用來追蹤性能瓶頸的來源。通過在關(guān)鍵的渲染或更新方法中插入跟蹤點(diǎn)，可以了解哪些操作占用了大量時(shí)間。

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

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

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

打印表格

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

分組打印

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

console.group('Console');
console.log('warin', "警告");
console.log('error', "錯(cuò)誤");
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() 進(jìn)階

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

自定義CSS樣式輸出

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

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

格式化輸出內(nèi)容

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

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

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

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

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

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

占位符這種寫法在復(fù)雜的輸出時(shí)，能保證模板和數(shù)據(jù)分離，結(jié)構(gòu)更加清晰。

總結(jié) 

到此這篇關(guān)于前端console用法的文章就介紹到這了,更多相關(guān)前端console用法內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論