1.凡人視角
打印字符串
console.log("I am a 凡人");
打印提示消息
console.info("Yes, you arm a 凡人");
打印警告消息
console.warn("凡人你居然敢窺視我");
打印錯誤消息
console.error("天兵天將，把這個凡人給我打入地獄");
打印調(diào)試信息
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 方法 不一定每個瀏覽器 都有實現(xiàn)，我這邊使用的是 chrome瀏覽器 。所以說，這個特性是非標(biāo)準(zhǔn)的，請盡量不要在 生產(chǎn)環(huán)境 中使用它。
但是我們可以在 開發(fā)環(huán)境 中，合理的利用 這些方法來幫助我們開發(fā)。
清理控制臺
如果我們在控制臺調(diào)試的時候，難免 強迫癥 發(fā)作想清理掉已經(jīng)亂七八糟的控制臺。瀏覽器和命令行 clear 一樣提供了一個清理函數(shù)console.clear() 。
console.clear()
當(dāng)然我們也可以用 chrome 的 command line api 來清理控制臺。
clear()
又或者可以使用按鍵Mac上 cmd + k ，Win ctrl + l(我用的是chrome瀏覽器)。
分組
當(dāng)代碼非常長，或者我們需要把一個函數(shù)，或者一個文件中的函數(shù)等區(qū)分出來。我們可以使用分組來實現(xiàn)。
代碼：
console.group('凡人');
console.log("手");
console.log("腳");
console.groupEnd();
console.group('神');
console.log("法力無邊");
console.log("騰云架霧");
console.groupEnd();
如果想要輸出為折疊，我們可以使用 console.groupCollapsed ，用法和 console.group 類似。
查看對象信息
有時候我們需要打印出對象信息,可以使用 console.log 來進行簡單的輸出。
代碼：
var
person = {
head: 1,
hand: 2,
leg: 2
};
console.log(person);
嗚嗚，可是這個顯示得好丑，我們這個時候就可以使用傳說中的神器 console.table 來幫助我們清楚的顯示 關(guān)聯(lián)數(shù)組信息。
var data = [
{
'姓名': '幼兒園',
'性別': '女'
},
{
'姓名': '李狗嗨'
,
'數(shù)量': 1
}
];
console.table(data);
但是如果想要看詳細(xì)的對象信息，我們可以使用 console.dir，將一個 JavaScript 對象的所有屬性和屬性值顯示成一個可交互的列表，它還能打印出函數(shù)等。
console.dir(clear);
什么?你想看某個節(jié)點中的html代碼?沒事，我們可以用 console.dirxml 來查看頁面中對應(yīng)元素的 html/xml 內(nèi)容。
html代碼：
<div id="person"> <p>I am a 凡人</p> </div>
javascirpt代碼：
var person = document.getElementById('person');
console.dirxml(person)；
性能測試
雷軍粑粑老是喜歡說：“不服?跑個分?！庇袝r候，我們也需要對代碼跑個分。這個時候，我們可以使用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++) { flog+=i; } })(); } })(); console.timeEnd("神機妙算");
啊咧咧?你這個頂多就是 計時器 怎么能說是 性能測試 ?？凸賱e急，我們這還有一個叫做 console.profile 和console.profileEnd **呢~~
console.profile("神機妙算"); (function() { for(var i = 0; i < 10; i++) { var sum = (function() { var flog = 0; for(var i = 0; i < 10; i++) { flog+=i; } })(); } })(); console.profileEnd("神機妙算");
什么還是不夠?你還想知道運行時的結(jié)果棧?可以可以，我們這還有一位 console.trace 哦。他可以看透大爺你的一局一動哦。
代碼：
function add(num) { if (0 < num) { console.trace("現(xiàn)在num的值為", num); return num + add(num - 1); } else{ return 0; } } var a =3; add(3);
判斷真假
平時我們在寫代碼是時候，經(jīng)常需要判斷一下當(dāng)前值的真假情況，使用if或者三元表達(dá)式來達(dá)到目的。我們現(xiàn)在也可以使用console.assert 來判斷，該方法會在條件為錯誤時，返回一個 console.error 的輸出。
console.assert(1 == 1);
console.assert(1 == 0);
console.assert(!(1 == 0));
統(tǒng)計次數(shù)
有時候我們需要統(tǒng)計一個函數(shù)或者被調(diào)用了幾次，我們通常會增加一個變量 count 來記錄，然后在控制臺中查看。這樣相當(dāng)?shù)穆闊覀兛梢允褂?console.count 函數(shù)來幫忙我們記錄次數(shù)，并輸出。
function hi(name) { console.count(name); return "hi " + name; } for(var i = 0; i < 10; i++) { if(i < 4) { hi("person"); } else { hi("god"); } }
總結(jié)
console 中有很多對我們調(diào)試代碼有幫助的函數(shù)，我們可以在開發(fā)環(huán)境中配合 console 來調(diào)試代碼，使得我們測試更加便利。
原文鏈接：https://segmentfault.com/a/1190000006721606
來源作者：ZHANGXIANGLIANG
