摘要：最常用的語(yǔ)句就是了。對(duì)象除了這一最常被開發(fā)者使用的方法之外，還有很多其他的方法。用來(lái)追蹤函數(shù)的調(diào)用過(guò)程。輸出輸出參數(shù)的內(nèi)容，作為警告提示。支持的占位符有四種，分別是字符整數(shù)或浮點(diǎn)數(shù)和對(duì)象。

對(duì)于前端開發(fā)者來(lái)說(shuō)，在開發(fā)過(guò)程中需要監(jiān)控某些表達(dá)式或變量的值的時(shí)候，用 debugger 會(huì)顯得過(guò)于笨重，取而代之則是會(huì)將值輸出到控制臺(tái)上方便調(diào)試。最常用的語(yǔ)句就是console.log(expression)了。

然而對(duì)于作為一個(gè)全局對(duì)象的console對(duì)象來(lái)說(shuō)，大多數(shù)人了解得還并不全面，當(dāng)然我也是，經(jīng)過(guò)我的一番學(xué)習(xí)，現(xiàn)在對(duì)于這個(gè)能玩轉(zhuǎn)控制臺(tái)的 JS 對(duì)象有了一定的認(rèn)識(shí)，想與大家分享一下。

console 對(duì)象除了console.log()這一最常被開發(fā)者使用的方法之外，還有很多其他的方法。靈活運(yùn)用這些方法，可以給開發(fā)過(guò)程增添許多便利。

console.assert(expression, object[, object...])

接收至少兩個(gè)參數(shù)，第一個(gè)參數(shù)的值或返回值為false的時(shí)候，將會(huì)在控制臺(tái)上輸出后續(xù)參數(shù)的值。例如：

console.assert(1 == 1, object); // 無(wú)輸出，返回 undefined
console.assert(1 == 2, object); // 輸出 object

console.count([label])

輸出執(zhí)行到該行的次數(shù)，可選參數(shù) label 可以輸出在次數(shù)之前，例如：

(function() {
  for (var i = 0; i < 5; i++) {
    console.count("count");
  }
})();
// count: 1
// count: 2
// count: 3
// count: 4
// count: 5

console.dir(object)

將傳入對(duì)象的屬性，包括子對(duì)象的屬性以列表形式輸出，例如：

var obj = {
  name: "classicemi",
  college: "HUST",
  major: "ei"
};
console.dir(obj);

輸出：

console.error(object[, object...])

用于輸出錯(cuò)誤信息，用法和常見(jiàn)的console.log一樣，不同點(diǎn)在于輸出內(nèi)容會(huì)標(biāo)記為錯(cuò)誤的樣式，便于分辨。輸出結(jié)果：

console.group

這是個(gè)有趣的方法，它能夠讓控制臺(tái)輸出的語(yǔ)句產(chǎn)生不同的層級(jí)嵌套關(guān)系，每一個(gè)console.group()會(huì)增加一層嵌套，相反要減少一層嵌套可以使用console.groupEnd()方法。語(yǔ)言表述比較無(wú)力，看代碼：

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)，在有大段內(nèi)容輸出的時(shí)候使用這個(gè)方法可以使輸出版面不至于太長(zhǎng)。。。吧

console.info(object[, object...])

此方法與之前說(shuō)到的console.error一樣，用于輸出信息，沒(méi)有什么特別之處。

console.info("info"); // 輸出 info

console.table()

可將傳入的對(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);

也可以

console.log(object[, object...])

這個(gè)不用多說(shuō)，這個(gè)應(yīng)該是開發(fā)者最常用的吧，也不知道是誰(shuí)規(guī)定的。。。

console.log("log"); // 輸出 log

console.profile([profileLabel])

這是個(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)行過(guò)程中的消耗時(shí)間。

頁(yè)面加載過(guò)程的性能優(yōu)化是前端開發(fā)的一個(gè)重要部分，使用控制臺(tái)的 profiles 面板可以監(jiān)控所有 JS 的運(yùn)行情況使用方法就像錄像機(jī)一樣，控制臺(tái)會(huì)把運(yùn)行過(guò)程錄制下來(lái)。如圖，工具欄上有錄制和停止按鈕。

錄制結(jié)果：

console.time(name)
計(jì)時(shí)器，可以將成對(duì)的console.time()和console.timeEnd()之間代碼的運(yùn)行時(shí)間輸出到控制臺(tái)上，name參數(shù)可作為標(biāo)簽名。

console.time("計(jì)時(shí)器");
for (var i = 0; i < 1000; i++) {
  for (var j = 0; j < 1000; j++) {}
}
console.timeEnd("計(jì)時(shí)器");

（剛才實(shí)際多寫了一層循環(huán)，結(jié)果電腦風(fēng)扇嗚嗚轉(zhuǎn)啊，瀏覽器直接無(wú)響應(yīng)了。。。）

console.trace()

console.trace()用來(lái)追蹤函數(shù)的調(diào)用過(guò)程。在大型項(xiàng)目尤其是框架開發(fā)中，函數(shù)的調(diào)用軌跡可以十分復(fù)雜，console.trace()方法可以將函數(shù)的被調(diào)用過(guò)程清楚地輸出到控制臺(tái)上。

function tracer(a) {
  console.trace();
  return a;
}

function foo(a) {
  return bar(a);
}

function bar(a) {
  return tracer(a);
}

var a = foo("tracer");

輸出：

console.warn(object[, object...])

輸出參數(shù)的內(nèi)容，作為警告提示。

console.warn("warn"); // 輸出 warn

占位符

console對(duì)象上的五個(gè)直接輸出方法，console.log(),console.warn(),console.error(),console.exception()(等同于console.error())和console.info()，都可以使用占位符。支持的占位符有四種，分別是字符(%s)、整數(shù)(%d 或 %i)、浮點(diǎn)數(shù)(%f)和對(duì)象(%o)。

console.log("%s是%d年%d月%d日", "今天", 2014, 4, 15);
console.log("圓周率是%f", 3.14159);

var obj = {
  name: "classicemi"
}
console.log("%o", obj);

還有一種特殊的標(biāo)示符%c，對(duì)輸出的文字可以附加特殊的樣式，當(dāng)進(jìn)行大型項(xiàng)目開發(fā)的時(shí)候，代碼中可能有很多其他開發(fā)者添加的控制臺(tái)語(yǔ)句。開發(fā)者對(duì)自己的輸出定制特別的樣式就可以方便自己在眼花繚亂的輸出結(jié)果中一眼看到自己需要的內(nèi)容。想象力豐富的童鞋也可以做出有創(chuàng)意的輸出信息，比如常見(jiàn)的招聘信息和個(gè)人介紹啥的。

輸出結(jié)果：

console.log("%cMy name is classicemi.", "color: #fff; background: #f40; font-size: 24px;");

%c標(biāo)示符可以用各種 CSS 語(yǔ)句來(lái)為輸出添加樣式，再隨便舉個(gè)栗子，background屬性的url()中添加圖片路徑就可以實(shí)現(xiàn)圖片的輸出了，各位前端童鞋快施展你們的 CSS 神技來(lái)把控制臺(tái)玩壞吧~~

https://developer.mozilla.org/en-US/docs/Web/API/console

http://www.ruanyifeng.com/blog/2011/03/firebug_console_tutorial.html

http://blog.segmentfault.com/civerzhu/1190000000425386

http://blog.mariusschulz.com/2013/11/13/advanced-javascript-debugging-with-consoletable