你不知道的console

平時開發過程當中咱們喜歡使用 console.log() 進行調試，在控制檯打印一些字符串和JavaScript對象，然而不少人並不知道 console 還有許多其餘方法和用法，能夠幫助咱們更好地進行代碼調試。如下截圖都來自Chrome瀏覽器，不一樣瀏覽器顯示可能有差異。

打印文本到控制檯

除了最多見的console.log()， console還支持打印其餘不一樣類型的信息，這些信息在瀏覽器控制檯中會顯示不一樣的樣式。在Chrome瀏覽器中能夠在控制檯左側對信息進行篩選。

// 打印一條日誌
console.log();

// 打印一條信息
console.info();

// 打印一條警告
console.warn();

// 打印一條錯誤
console.error();

// 打印一條調試
console.debug();

console.log()、console.info()、console.warn()、console.error()、onsole.debug() 這五個方法主要用來打印信息，咱們平時主要是直接將字符串或者變量做爲參數進行打印，但有更多鮮爲人知的用法。

打印多個對象

五個經常使用打印信息的方法能夠傳入多個參數，參數會被連接成一條字符串進行打印。其中打印的對象能夠被展開，查看結構。

var dog={
  name: 'Happy',
  age: '18'
};

console.log('My dog\'s name is',dog.name,'. This ia a object: ',dog);

打印結果

對字符串進行替換

能夠對五個打印信息方法的字符串參數內容進行替換，規則以下：

1. 第一個參數必須是字符串，替換字符必須出如今第一個參數中。
2. 第一個參數後的參數會按照順序替換第一個參數中的替換字符。
3. 替換字符和替換後的內容在類型和數量上須要保持一致，不然不會被正確替換。

替換字符	描述
%o 或 %O	打印字符串、數字、對象或JSON數據
%d 或 %i	打印整數（小數位會被省略）
%s	打印字符串

var dog={
  name: 'Happy',
  age: '18'
};

// 替換一個字符
console.log('My dog\'s name is %o',dog.name);
// 打印 My dog's name is "Happy"

// 替換兩個字符
console.log('My dog\'s age is %i,my age is %i.',18.3,20.7);
// 打印 My dog's age is 18,my age is 20.

// 錯誤 替換字符數量不匹配
console.log('My dog\'s age is %i,my age is %i.',18.3);
// 打印 My dog's age is 18,my age is %i.

// 錯誤 替換字符不在第一個參數中
console.log('My dog\'s age is 18,','my age is %i.',20.5);
// 打印 My dog's age is 18, my age is %i. 20.5

對打印內容定義樣式

對輸出內容定義樣式恐怕是最好玩的用法了。
相似字符串替換，能夠在第一個字符串參數中使用%c,後續參數內寫CSS樣式，每一個%c後的字符串都會應用後續參數中的樣式。

// 給字符串添加各類樣式
console.log(
  '%cHappy',
  'padding: 4px 8px; font-size: 56px; line-height: 1.5; font-weight: 800; border-radius: 16px; background: red; text-shadow: 4px 4px 0 blue'
);

// 甚至能夠給多段字符分別添加樣式
console.log(
  '%cHappy %cDog',
  'color: pink','color: yellowgreen'
);

// 甚至經過設置背景圖打印圖片
console.log(
  '%c ',
  'padding-left:200px;padding-bottom: 100px; background: url("https://picsum.photos/200/100") no-repeat center'
);

打印有嵌套結構的信息

能夠經過console.group()和console.groupEnd()方法輸出嵌套結構的信息，在代碼嵌套比較複雜的時候能夠輸出比較清晰的信息。

// 爲了看的更清楚，我對代碼進行了縮進

console.log('level1')

  console.group()
    console.log('level2')
    
      console.group()
        console.log('level3')
      console.groupEnd()
      
    console.log('back to level2')
console.groupEnd()

console.log('back to level1')

定時器

經過console.time()方法能夠建立一個定時器，該方法能夠接受一個惟一的字符串做爲標識。能夠經過調用console.timeLog()獲取時間，最後經過console.timeEnd()移除定時器並返回一個以毫秒爲單位的時間。經過這三個方法能夠比較方便的計算特定操做的持續時間。

console.time('bark');
alert('wang!wang!')
console.timeLog('bark');
alert('wang!wang!');
console.timeEnd('bark');

根據條件判斷打印信息

console.assert()方法第一個參數接受一個布爾表達式，若是爲假值則打印後續的參數,並會做爲錯誤信息打印。若是爲真值，則不打印信息。

var a=7;

console.assert(a<0,'you are error.');

打印表格

將對象和數組以表格打印出來是很是有用的，console.table()方法能夠作到。該方法接受一個對象或數組做爲參數，若是是對象，表格第一列是鍵名，第二列是值。若是參數是數組，第一列則是索引值，第二列是項。若是對象和數組存在嵌套，表格會增長列來顯示。也能夠經過第二個參數來選擇要顯示出的子集；

var dog={
  name: 'Happy',
  age: '18'
};

console.table(dog);

堆棧跟蹤

console.trace()方法能夠打印調用棧。

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

foo();

計數器

console.count()方法接受一個參數做爲標識初始化一個計數器，console.countReset()接受參數做爲標識，重置這個計數器。

console.count('bark');
console.count('bark');
console.count('bark');
console.countReset('bark');
console.count('bark');

清屏

console.clear()能夠清除控制檯信息。

參考文獻

Web API接口 console