超級實用的 console 用法集合

是否有前端小夥伴和我一樣，一直都 console.log() 列印資訊（?...），最近看到篇國外文章寫到幾種常用 console 的方法，超實用，希望大家看完後能夠提高開發效率。

文章都會先發布在 github 上

JS 原始碼

1、 congsole.log()、console.error()、console.warn()、console.info()

推薦指數： ⭐️⭐️⭐

上面這些方法可以接受多個引數

 const json = {a: 1, b: 2}

 console.log("log ==> ", json, new Date())
 console.error("error ==> ", json, new Date())
 console.warn("warn ==> ", json, new Date())
 console.info("info ==> ", json, new Date())

複製程式碼

2、console.group()

推薦指數：⭐️⭐️⭐️⭐️

console.group() 列印一系列的 console.logs

 function doSomething(obj) {
  console.group('doSometing...')
  const _data = new Date();
  console.log('evauating data ==>', _data);
  const _fullName = `${obj.fistName} ${obj.lastName}`;
  console.log('fullName ==>', _fullName);
  const _id = Math.random(1)
  console.log('id ==> ', _id);
  console.groupEnd();
 }

 doSomething({'firstName': 'hank', 'lastName': 'zhuo'})

複製程式碼

3、console.table()

推薦指數：⭐️⭐️⭐️⭐️️⭐️️

console.table()非常美觀列印陣列和物件

 const typeOfConsole = [
   {name: 'log', type: 'standard'},
   {name: 'info', type: 'standard'},
   {name: 'table', type: 'standard'}
 ]

 console.table(typeOfConsole)

 const mySocial = {
   faceboo: true,
   linkedin: true,
   instagram: true,
   twitter: false
 }

 console.table(mySocial)
複製程式碼

4、console.count()、console.time()、console.timeEnd()

推薦指數：⭐️⭐️⭐️⭐️⭐️

• 1、console.count() 計算並輸出相同的型別的次數、
• 2、console.time()、console.timeEnd() 計算程式花費的時間 */

 console.time('total');
 console.time('init arr');
 const arr = new Array(20);
 console.timeEnd('init arr');

 for (var i = 0; i < arr.length; i++) {
   arr[i] = new Object();
   console.log(i)
   const _type = (i % 2 === 0) ? 'even' : 'odd'
   console.count(_type + 'added');
 }

 console.timeEnd('total')

複製程式碼

5、console.assert()、console.trace()

推薦指數：⭐️⭐️⭐️⭐️

• 1、console.assert() 條件列印，只要滿意傳入的條件才列印
• 2、console.trace() 列印跟蹤

function lesserThan(a, b) {
   console.assert(a < b, {'message': 'a is not lesser than b', 'a': a, 'b': b})
 }

lesserThan(6, 5);

function foo() {
  function bar() {
    console.trace();
  }
  bar();
}

foo();

複製程式碼