JS之console.log詳解以及兄弟姐們鄰居方法擴展

console.log()

基本用法

console.log，前端常用它來調試分析代碼，你可以在任何的js代碼中調用console.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

寫過C語言的童鞋肯定對上面這種寫法不陌生，這種寫法在復雜的輸出時，能保證模板和數據分離，結構更加清晰。不過簡單的輸出就不那么方便了。

console.log支持的格式標志有:

前三種格式不用多說，%o、%O都是用來輸出Object對象的，對普通的Object對象，兩者沒區別，但是打印dom節點時就不一樣了：

使用%o輸出和不使用格式化輸出打印出來的結果一樣，你可以查看這個dom節點的內容、子節點等；而使用%O，你看到的則是該dom節點各個對象屬性。對應我們平時把數據寄放到dom節點的兩種方式：

BTW，格式化輸出還可以和普通輸出混合着來：

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

豐富樣式輸出

我們可以使用%c進行css樣式格式化輸出。常見的富樣式輸出有兩種：文字樣式、圖片輸出。

文字樣式

console.log("%c這是一段神奇的文字",'color:red;font-size:40px;text-shadow:1px 1px 1px #ccc');

結果如下截圖：

%c可以寫在任何地方，不限於開頭，然后%c后面所有的輸出會應用我們指定的樣式。

那如果我想單獨對我輸出的一句話中間某幾個字進行樣式處理呢？一般來說，沒辦法，不過有變通的手段：

console.log("%c這是一段%c神奇%c的文字",'color:black','color:red;font-size:40px;text-shadow:1px 1px 1px #ccc','color:black');

結果如圖所示：

 圖片輸出

console.log('%c','background:url(https://www.baidu.com/img/bd_logo1.png) no-repeat;padding:50px;line-height:50px;height:1px;');

結果如圖所示：

嚴格來講，console.log不支持直接圖片輸出，但我們可以用背景圖曲線救國。但，你真正去試了才發現沒那么簡單，你沒法像平時那樣輸出背景圖，原因呢，就是你沒法直接設置width和height樣式。

谷歌51版本的瀏覽器現在不支持了，上面寫法說明下：

• line-height的值我取圖片高度
• background就不需多說，但你會發現no-repeat設置了沒生效。。。
• padding左右兩邊的值顯然是圖片寬度的一半
• padding上下的值，需要通過調試達到你想要的輸出效果即可。

關於富樣式輸出說了這么多，現在不得不提下瀏覽器兼容性：

但是現在新版的經過測試感覺也不支持圖片輸出了。如果你調試有輸出，請留言告知下你的版本。

 兄弟姐妹

console.log('log');
console.debug('debug');
console.warn('warn');
console.error('error');

結果如圖所示：

他們之間的區別就是樣式不同，功能不同。

console.error

這里說下console.error，我們使用它做輸出除了可以輸出錯誤信息外，還可以輸出調用這個函數的一瞬間的調用棧！這無疑給我們調試帶來很多方便（當然你也可以用js斷點一步步跟蹤），而這是console.log所不具備的。除了console.error，還有一個函數console.trace也可以打印出調用一瞬間的調用棧，不過它的輸出樣式和位置就跟console.log一樣。

例如：

function fun(){
    return 'abc';
}
var result = fun();
console.trace(result); //abc
console.log(result); //abc

結果如圖所示：

其實這一系還有函數：

// 等價
console.log('%o', document.body);
console.log(document.body);
// 等價
console.log('%O', document.body);
console.dir(document.body);

這兒說下console.dir()

console.dir

function cat(name, age, score){
    this.name = name;
    this.age = age;
    this.score = score;
}
var c = new cat("miao", 2, [6,8,7]);
console.dir(c);

通過使用console.dir()，新建的cat對象信息在控制台被打印出來了。這個在IE低版本瀏覽器中是很有用的。

console.table

可將傳入的對象，或數組以表格形式輸出，相比傳統樹形輸出，這種輸出方案更適合內部元素排列整齊的對象或數組，不然可能會出現很多的 undefined。

var obj = { foo: { name: 'foo', age: '33' }, bar: { name: 'bar', age: '45' } }; var arr = [ ['foo', '33'], ['bar', '45'] ]; console.table(obj); console.table(arr);

在控制台的打印結果：

鄰居

console還有不少強大有用但卻很低調的接口。

console.time & console.timeEnd

這是性能調試的利器。使用方式如下：

function cat(name, age, score){
    this.name = name;
    this.age = age;
    this.score = score;
}
console.time('time');
var c = new cat("miao", 2, [6,8,7]);
console.timeEnd('time'); //time: 0.117ms

來得到某塊代碼執行的時間。

console.count

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

var a = function(){
    console.count('執行次數打印');
}
var b = function(){
    a();
}
var c = function(){
    b();
}
b();
c();

得到結果如圖所示：

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

console.assert

使用該函數可以讓我們在某些地方只在符合某個條件才進行調試輸出，使輸出更加干凈。當然你也可以用if語句，不過寫起來就麻煩了一些。

語法：

console.assert(assertion, obj1 [, obj2, ..., objN]);
console.assert(assertion, msg [, subst1, ..., substN]); // c-like message formatting

參數說明：

• assertion：一個布爾表達式。如果assertion為假，消息將會被輸出到控制台之中。

• obj1 ... objN：被用來輸出的Javascript對象列表，最后輸出的字符串是各個對象依次拼接的結果。

• msg：一個包含零個或多個子串的Javascript字符串。

• subst1 ... substN：各個消息作為字串的Javascript對象。這個參數可以讓你能夠控制輸出的格式。

注意： console.assert( )方法在Node.js中的實現和瀏覽器中可用的console.assert()方法實現是不同的。

在瀏覽器中當console.assert()方法接受到一個值為假斷言（assertion）的時候，會向控制台輸出傳入的內容，但是並不會中斷代碼的執行，而在Node.js中一個值為假的斷言將會導致一個AssertionError被拋出，使得代碼執行被打斷。

如下實例，console.assert()語句保證cat對象的score變量值長度為3:

function cat(name, age, score){
    this.name = name;
    this.age = age;
    this.score = score;
}
var c = new cat("miao", 2, [6,8,7]);
console.assert(c.score.length==3, "Assertion of score length failed");

在console.assert()語句中，第一個參數為需要進行assert的結果，正常情況下應當為true；第二個參數則為出錯時在控制台上打印的錯誤信息。比如，當上述例子中score變量的數組長度不為3時：

function cat(name, age, score){
    this.name = name;
    this.age = age;
    this.score = score;
}
var c = new cat("miao", 2, [6,8]);
console.assert(c.score.length==3, "Assertion of score length failed");

代碼執行后，Firebug控制台將會打印錯誤信息：Assertion failed: Assertion of score length failed

console.group

分組輸出，它能夠讓控制台輸出的語句產生不同的層級嵌套關系，每一個console.group()會增加一層嵌套，相反要減少一層嵌套可以使用console.groupEnd()方法。

console.log('這是第一層');
console.group();
console.log('這是第二層');
console.log('依然第二層');
console.group();
console.log('第三層了');
console.groupEnd();
console.log('回到第二層');
console.groupEnd();
console.log('回到第一層');

輸出結果如圖所示：

和console.group()相似的方法是console.groupCollapsed()作用相同，不同點是嵌套的輸出內容是折疊狀態。

console.profile([profileLabel])

這是個挺高大上的東西，可用於性能分析。在 JS 開發中，我們常常要評估段代碼或是某個函數的性能。在函數中手動打印時間固然可以，但顯得不夠靈活而且有誤差。借助控制台以及console.profile()方法我們可以很方便地監控運行性能。

function parent() {
  for (var i = 0; i < 10000; i++) {
    childA()
  }
}

function childA(j) {
  for (var i = 0; i < j; i++) {}
}

console.profile('性能分析');
parent();
console.profileEnd();

然后我們可以在 Profiles 面板下看到上述代碼運行過程中的消耗時間。

console.clear

清空控制台的內容（當然你可以用快捷鍵ctrl+L）。