console.log

基礎用法

我們可以在 js 程式碼的任何部分呼叫 confole.log，然後就可以在瀏覽器的開發者控制檯裡，看到這個函式呼叫的輸出了。
最基本的呼叫方法：

console.log('123');
// 123

console.log('1', '2', '3');
//1 2 3

console.log('1\n2\n3\n');
// 1
// 2
// 3

我們可以通過上面的方式進行單個變數（表示式）、多個變數以及換行輸出。而這對於日常開發的大多數情況算是夠用了。

格式化輸出

console.log('%d + %d = %d', 1, 1, 2);
// 1 + 1 = 2
 

console.log 支援的格式標誌有：

%o 、%O 都是用來輸出 Object 物件的，對普通的 Object 物件，兩者沒區別，但是列印 dom 節點時就不一樣了：

使用 %o 輸出和不使用格式化輸出打印出來的結果一樣，你可以檢視這個 dom 節點的內容、子節點等；而使用 %O，你看到的則是該 dom 節點各個物件屬性。

格式化還可以和普通輸出混合著來：

console.log('%d + %d ='
 
, 1, 1, 2);
// 1 + 1 = 2

文字樣式

console.log('%cneveryu.github.io', 'text-shadow:1px 1px 1px rgba(0,0,0,.2);font-size:40px;');
console.log('%cweibo.com/neveryu', 'text-shadow:1px 1px 1px rgba(156,36,255,.5);font-size:40px;');
console.log("%cneveryu.github.io","background: linear-gradient(to right, rgba(252,234,187,1) 0%, rgba(175,250,77,1) 12%, rgba(0,247,49,1) 28%, rgba(0,210,247,1) 39%, rgba(0,189,247,1) 51%, rgba(133,108,217,1) 64%, rgba(177,0,247,1) 78%, rgba(247,0,189,1) 87%, rgba(245,22,52,1) 100%);font-size:5em"
 
);
console.log("%cweibo.com/neveryu","background: linear-gradient(to right, rgba(252,234,187,1) 0%, rgba(175,250,77,1) 12%, rgba(0,247,49,1) 28%, rgba(0,210,247,1) 39%, rgba(0,189,247,1) 51%, rgba(133,108,217,1) 64%, rgba(177,0,247,1) 78%, rgba(247,0,189,1) 87%, rgba(245,22,52,1) 100%);font-size:5em");

console.dir

之前介紹了

console.log('%O', document.body)

它會打印出 body 的節點資訊
console 提供了一個可以直接列印節點資訊的方法 dir

console.dir(document.body);

與

console.log('%O', document.body);

等價

與 console.log 相似的還有 console.debug 、 console.warn 、 console.error

所以跟網站重構要求 html 語義化類似，當我們的除錯輸出比較多時，根據實際場景使用不同型別的輸出函式能使我們的輸出更有條理。

值得一提的是 console.error，我們使用它做輸出除了可以輸出錯誤資訊外，還可以輸出呼叫這個函式的一瞬間的呼叫棧！這無疑給我們除錯帶來很多方便（當然你也可以用js斷點一步步跟蹤），而這是 console.log 所不具備的。除了console.error，還有一個函式 console.trace 也可以打印出呼叫一瞬間的呼叫棧。

其實除了列印除錯資訊外，console還有不少強大有用但卻很低調的介面。

console.time

使用 console.time 和 console.timeEnd ，中間是耗時操作，就可以計算出耗時操作的時間， console.time 和 console.timeEnd 的引數必須一致
前面想知道執行一個函式耗時多久：

console.time('time');
for(var i=0; i<10000; i++){
  console.log('1');
}
console.timeEnd('time');

console.count

這是一個計數器，我們可以傳個名字給它，如 count，然後每次呼叫console.count(‘count’)（可以在不同函式不同地方），它就能打印出這樣一個呼叫執行了多少次：

var a = function(){
  console.count('count');
};
var b = function(){
  a();
};
var c = function(){
  b();
};
b();
c();

這個函式特別適用於在一些複雜的場景，有時一個函式被多個地方呼叫到，而我們想知道該函式是否少呼叫或重複呼叫，此時使用計數器比 js 斷點自己還要默記調了幾次快多了。

console.assert

在 console.assert() 語句中，第一個引數為需要進行 assert 的結果，第二個引數為沒有通過 assert 時的提示資訊。第一個引數正常情況下應當為 true；第一個引數為 false 時，則在控制檯上列印的錯誤資訊。

var el = document.getElementById('test');
console.assert(el, '沒有ID為test的節點');

console.group

分組輸出

console.group('Group A');
console.log('A1');
console.log('A2');
console.group('Group C');
console.log('C1');
console.log('C2');
console.groupEnd('Group C');
console.groupEnd('Group A');
console.group('Group B');
console.log('B1');
console.log('B2');
console.groupEnd('Group B');

顯然這個函式特別適合有一大堆除錯輸出的情況，做大專案估計會用上。不過有時你開啟控制檯看到滿屏滿屏的輸出你也會很頭痛的，於是你可以分組輸出且預設收起。

console.clear

最後的最後，該清場了。

console.clear();

特別適用於，在一個多人開發專案，你不爽別人的除錯輸出，那你可以用這個函式統統清掉，再輸出自己的除錯資訊，不用跟這個函式客氣。