你所不知道的 Console

原文：segmentfault.com/a/1190000006721606

（點擊文末閱讀原文即可前往）

1.凡人視角

列印字元串

代碼：

console.log("I am a 凡人");

列印提示消息

代碼：

console.info("Yes, you arm a 凡人");

列印警告消息

代碼：

console.warn("凡人你居然敢窺視我");

列印錯誤消息

代碼：

console.error("天兵天將，把這個凡人給我打入地獄");

列印調試信息

console.debug("我就是傳說中的debug");

2.上帝視角

console 除了上面的幾個方法還有什麼方法呢？log 除了能列印字元串外，還能列印出對象，我們可以利用 console.log 列印自己。

代碼：

console.log(console);

輸出：

Object{

assert:...,

clear:...,

count:...,

debug:...,

dir:...,

dirxml:...,

error:...,

group:...,

groupCollapsed:...,

groupEnd:...,

info:...,

log:...,

markTimeline:...,

profile:...,

profileEnd:...,

table:...,

time:...,

timeEnd:...,

timeStamp:...,

timeline:...,

timelineEnd:...,

trace:...,

warn:...

}

啊咧咧？怎麼這麼多方法。其實上面的 console 方法 不一定每個瀏覽器 都有實現，我這邊使用的是 chrome瀏覽器 。所以說，這個特性是非標準的，請盡量不要在 生產環境 中使用它。

但是我們可以在 開發環境 中，合理的利用 這些方法來幫助我們開發。

清理控制台

如果我們在控制台調試的時候，難免 強迫症 發作想清理掉已經亂七八糟的控制台。瀏覽器和命令行 clear 一樣提供了一個清理函數 console.clear 。

console.clear

當然我們也可以用 chrome 的 command line api 來清理控制台。

clear

又或者可以使用按鍵Mac上 cmd + k ，Win ctrl + l（我用的是chrome瀏覽器）。

分組

當代碼非常長，或者我們需要把一個函數，或者一個文件中的函數等區分出來。我們可以使用分組來實現。

代碼：

console.group('凡人');

console.log("手");

console.log("腳");

console.groupEnd;

console.group('神');

console.log("法力無邊");

console.log("騰雲架霧");

輸出：

如果想要輸出為摺疊，我們可以使用 console.groupCollapsed ，用法和 console.group 類似。

查看對象信息

有時候我們需要列印出對象信息,可以使用 console.log 來進行簡單的輸出。

代碼：

var person ={

head:1

hand:2

leg:2

};

console.log(person);

嗚嗚，可是這個顯示得好醜，我們這個時候就可以使用傳說中的神器 console.table 來幫助我們清楚的顯示 關聯數組信息。

var data =[

{

'姓名':'幼稚園'

'性別':'女'

},

{

'姓名':'李狗嗨'

'數量':1

}

];

console.table(data);

輸出：

但是如果想要看詳細的對象信息，我們可以使用 console.dir，將一個 JavaScript 對象的所有屬性和屬性值顯示成一個可交互的列表，它還能列印出函數等。

console.dir(clear);

什麼？你想看某個節點中的html代碼？沒事，我們可以用 console.dirxml 來查看頁面中對應元素的 html/xml 內容。

html代碼：

javascirpt代碼：

var person = document.getElementById('person');

性能測試

雷軍粑粑老是喜歡說：「不服？跑個分。」有時候，我們也需要對代碼跑個分。這個時候，我們可以使用console.time和console.timeEnd，他們可以記錄代碼運行所花費的時間。

console.time("神機妙算");

(function{

for(var i =0; i <10; i++){

var sum =(function{

var flog =0;

for(var i =0; i <10; i++){

}

});

}

});

console.timeEnd("神機妙算");

啊咧咧？你這個頂多就是 計時器 怎麼能說是 性能測試 。客官別急，我們這還有一個叫做 console.profile 和 console.profileEnd 姐妹呢~~

console.profile("神機妙算");

(function{

flog+=i;

});

console.profileEnd("神機妙算");

輸出會顯示在 profile

什麼還是不夠？你還想知道運行時的結果棧？可以可以，我們這還有一位 console.trace 哦。他可以看透大爺你的一局一動哦。

代碼：

function add(num){

if(0< num){

console.trace("現在num的值為" num);

return num + add(num -1);

}else{

return0;

}

}

var a =3;

add(3);

輸出：

判斷真假

平時我們在寫代碼是時候，經常需要判斷一下當前值的真假情況，使用if或者三元表達式來達到目的。我們現在也可以使用 console.assert 來判斷，該方法會在條件為錯誤時，返回一個 console.error 的輸出。

console.assert(1==1);

console.assert(1==0);

console.assert(!(1==0));

統計次數

有時候我們需要統計一個函數或者被調用了幾次，我們通常會增加一個變數 count 來記錄，然後在控制台中查看。這樣相當的麻煩，我們可以使用 console.count 函數來幫忙我們記錄次數，並輸出。

function hi(name){

console.count(name);

return"hi "+ name;

}

for(var i =0; i <10; i++){

if(i <4){

hi("person");

}else{

hi("god");

}

}

總結

console 中有很多對我們調試代碼有幫助的函數，我們可以在開發環境中配合 console 來調試代碼，使得我們測試更加便利。