JS進階篇--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')

結果以下截圖：

圖片輸出

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）。