摘要：各個(gè)消息作為字串的對(duì)象。借助控制臺(tái)以及方法我們可以很方便地監(jiān)控運(yùn)行性能。

console.log，前端常用它來調(diào)試分析代碼，你可以在任何的js代碼中調(diào)用console.log()，然后你就可以在瀏覽器控制臺(tái)看到你剛才打印的常量，變量，數(shù)組，對(duì)象，表達(dá)式等的值。

首先看最基本的用法：

console.log("123");
// 123
 
console.log("1", "2", "3");
// 1 2 3
 
console.log("1
2
3
");
// 1
// 2
// 3

我們可以通過上面的方式進(jìn)行單個(gè)變量（表達(dá)式）、多個(gè)變量以及換行輸出。而這對(duì)于日常開發(fā)的大多數(shù)情況算是夠用了。

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

寫過C語言的童鞋肯定對(duì)上面這種寫法不陌生，這種寫法在復(fù)雜的輸出時(shí)，能保證模板和數(shù)據(jù)分離，結(jié)構(gòu)更加清晰。不過簡(jiǎn)單的輸出就不那么方便了。

console.log支持的格式標(biāo)志有:

前三種格式不用多說，%o、%O都是用來輸出Object對(duì)象的，對(duì)普通的Object對(duì)象，兩者沒區(qū)別，但是打印dom節(jié)點(diǎn)時(shí)就不一樣了：

使用%o輸出和不使用格式化輸出打印出來的結(jié)果一樣，你可以查看這個(gè)dom節(jié)點(diǎn)的內(nèi)容、子節(jié)點(diǎn)等；而使用%O，你看到的則是該dom節(jié)點(diǎn)各個(gè)對(duì)象屬性。對(duì)應(yīng)我們平時(shí)把數(shù)據(jù)寄放到dom節(jié)點(diǎn)的兩種方式：

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

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

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

文字樣式

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

結(jié)果如下截圖：

圖片輸出

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

結(jié)果如圖所示：

嚴(yán)格來講，console.log不支持直接圖片輸出，但我們可以用背景圖曲線救國(guó)。但，你真正去試了才發(fā)現(xiàn)沒那么簡(jiǎn)單，你沒法像平時(shí)那樣輸出背景圖，原因呢，就是你沒法直接設(shè)置width和height樣式。

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

line-height的值我取圖片高度

background就不需多說，但你會(huì)發(fā)現(xiàn)no-repeat設(shè)置了沒生效。。。

padding左右兩邊的值顯然是圖片寬度的一半

padding上下的值，需要通過調(diào)試達(dá)到你想要的輸出效果即可。

關(guān)于富樣式輸出說了這么多，現(xiàn)在不得不提下瀏覽器兼容性：

但是現(xiàn)在新版的經(jīng)過測(cè)試感覺也不支持圖片輸出了。如果你調(diào)試有輸出，請(qǐng)留言告知下你的版本。

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

結(jié)果如圖所示：

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

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

例如：

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

結(jié)果如圖所示：

其實(shí)這一系還有函數(shù)：

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

這兒說下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對(duì)象信息在控制臺(tái)被打印出來了。這個(gè)在IE低版本瀏覽器中是很有用的。

可將傳入的對(duì)象，或數(shù)組以表格形式輸出，相比傳統(tǒng)樹形輸出，這種輸出方案更適合內(nèi)部元素排列整齊的對(duì)象或數(shù)組，不然可能會(huì)出現(xiàn)很多的 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);

在控制臺(tái)的打印結(jié)果：

console還有不少?gòu)?qiáng)大有用但卻很低調(diào)的接口。

這是性能調(diào)試的利器。使用方式如下：

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

來得到某塊代碼執(zhí)行的時(shí)間。

這是一個(gè)計(jì)數(shù)器，我們可以傳個(gè)名字給它，如a，然后每次調(diào)用console.count("a")（可以在不同函數(shù)不同地方），它就能打印出這樣一個(gè)調(diào)用執(zhí)行了多少次：

var a = function(){
    console.count("執(zhí)行次數(shù)打印");
}
var b = function(){
    a();
}
var c = function(){
    b();
}
b();
c();

得到結(jié)果如圖所示：

這個(gè)函數(shù)特別適用于在一些復(fù)雜的場(chǎng)景，有時(shí)一個(gè)函數(shù)被多個(gè)地方調(diào)用到，而我們想知道該函數(shù)是否少調(diào)用或重復(fù)調(diào)用，此時(shí)使用計(jì)數(shù)器比js斷點(diǎn)自己還要默記調(diào)了幾次快多了。

使用該函數(shù)可以讓我們?cè)谀承┑胤街辉诜夏硞€(gè)條件才進(jìn)行調(diào)試輸出，使輸出更加干凈。當(dāng)然你也可以用if語句，不過寫起來就麻煩了一些。

語法：

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

參數(shù)說明：

assertion：一個(gè)布爾表達(dá)式。如果assertion為假，消息將會(huì)被輸出到控制臺(tái)之中。

obj1 ... objN：被用來輸出的Javascript對(duì)象列表，最后輸出的字符串是各個(gè)對(duì)象依次拼接的結(jié)果。

msg：一個(gè)包含零個(gè)或多個(gè)子串的Javascript字符串。

subst1 ... substN：各個(gè)消息作為字串的Javascript對(duì)象。這個(gè)參數(shù)可以讓你能夠控制輸出的格式。

注意： console.assert( )方法在Node.js中的實(shí)現(xiàn)和瀏覽器中可用的console.assert()方法實(shí)現(xiàn)是不同的。
在瀏覽器中當(dāng)console.assert()方法接受到一個(gè)值為假斷言（assertion）的時(shí)候，會(huì)向控制臺(tái)輸出傳入的內(nèi)容，但是并不會(huì)中斷代碼的執(zhí)行，而在Node.js中一個(gè)值為假的斷言將會(huì)導(dǎo)致一個(gè)AssertionError被拋出，使得代碼執(zhí)行被打斷。

如下實(shí)例，console.assert()語句保證cat對(duì)象的score變量值長(zhǎng)度為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()語句中，第一個(gè)參數(shù)為需要進(jìn)行assert的結(jié)果，正常情況下應(yīng)當(dāng)為true；第二個(gè)參數(shù)則為出錯(cuò)時(shí)在控制臺(tái)上打印的錯(cuò)誤信息。比如，當(dāng)上述例子中score變量的數(shù)組長(zhǎng)度不為3時(shí)：

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");

代碼執(zhí)行后，Firebug控制臺(tái)將會(huì)打印錯(cuò)誤信息：Assertion failed: Assertion of score length failed

分組輸出，它能夠讓控制臺(tái)輸出的語句產(chǎn)生不同的層級(jí)嵌套關(guān)系，每一個(gè)console.group()會(huì)增加一層嵌套，相反要減少一層嵌套可以使用console.groupEnd()方法。

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

輸出結(jié)果如圖所示：

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

這是個(gè)挺高大上的東西，可用于性能分析。在 JS 開發(fā)中，我們常常要評(píng)估段代碼或是某個(gè)函數(shù)的性能。在函數(shù)中手動(dòng)打印時(shí)間固然可以，但顯得不夠靈活而且有誤差。借助控制臺(tái)以及console.profile()方法我們可以很方便地監(jiān)控運(yùn)行性能。

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 面板下看到上述代碼運(yùn)行過程中的消耗時(shí)間。

清空控制臺(tái)的內(nèi)容（當(dāng)然你可以用快捷鍵ctrl+L）。