超級實用的 console 用法集合

是否有前端小夥伴和我同樣，一直都 console.log() 打印信息（🙋...），最近看到篇國外文章寫到幾種經常使用 console 的方法，超實用，但願你們看完後可以提升開發效率。

文章都會先發布在 github 上

JS 源碼

一、 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())

複製代碼

二、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'})

複製代碼

三、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)
複製代碼

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

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

• 一、console.count() 計算並輸出相同的類型的次數、
• 二、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')

複製代碼

五、console.assert()、console.trace()

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

• 一、console.assert() 條件打印，只要滿意傳入的條件纔打印
• 二、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();

複製代碼