JavaScript— console （30）

對於前端開發者來說，在開發過程中需要監控某些表達式或變量的值的時候，用 debugger 會顯得過於笨重，取而代之則是會將值輸出到控制檯上方便調試。最常用的語句就是console.log(expression)了。

然而對於作爲一個全局對象的console對象來說，大多數人瞭解得還並不全面，當然我也是，經過我的一番學習，現在對於這個能玩轉控制檯的 JS 對象有了一定的認識，想與大家分享一下。

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

console 的方法
console.assert(expression, object[, object...])

接收至少兩個參數，第一個參數的值或返回值爲false的時候，將會在控制檯上輸出後續參數的值。例如：

對於前端開發者來說，在開發過程中需要監控某些表達式或變量的值的時候，用 debugger 會顯得過於笨重，取而代之則是會將值輸出到控制檯上方便調試。最常用的語句就是console.log(expression)了。

然而對於作爲一個全局對象的console對象來說，大多數人瞭解得還並不全面，當然我也是，經過我的一番學習，現在對於這個能玩轉控制檯的 JS 對象有了一定的認識，想與大家分享一下。

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

console 的方法
console.assert(expression, object[, object...])

接收至少兩個參數，第一個參數的值或返回值爲false的時候，將會在控制檯上輸出後續參數的值。例如：

console.count([label])

輸出執行到該行的次數，可選參數 label 可以輸出在次數之前，例如：

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

console.dir(object)

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

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

輸出：

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

用於輸出錯誤信息，用法和常見的console.log一樣，不同點在於輸出內容會標記爲錯誤的樣式，便於分辨。輸出結果：

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.info(object[, object...])

此方法與之前說到的console.error一樣，用於輸出信息，沒有什麼特別之處。

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

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.log(object[, object...])

這個不用多說，這個應該是開發者最常用的吧，也不知道是誰規定的。。。

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

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

頁面加載過程的性能優化是前端開發的一個重要部分，使用控制檯的 profiles 面板可以監控所有 JS 的運行情況使用方法就像錄像機一樣，控制檯會把運行過程錄製下來。如圖，工具欄上有錄製和停止按鈕。

錄製結果：

console.time(name)
計時器，可以將成對的console.time()和console.timeEnd()之間代碼的運行時間輸出到控制檯上，name參數可作爲標籤名。

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

（剛纔實際多寫了一層循環，結果電腦風扇嗚嗚轉啊，瀏覽器直接無響應了。。。）

console.trace()

console.trace()用來追蹤函數的調用過程。在大型項目尤其是框架開發中，函數的調用軌跡可以十分複雜，console.trace()方法可以將函數的被調用過程清楚地輸出到控制檯上。

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...])

輸出參數的內容，作爲警告提示。

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

佔位符

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

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

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

還有一種特殊的標示符%c，對輸出的文字可以附加特殊的樣式，當進行大型項目開發的時候，代碼中可能有很多其他開發者添加的控制檯語句。開發者對自己的輸出定製特別的樣式就可以方便自己在眼花繚亂的輸出結果中一眼看到自己需要的內容。想象力豐富的童鞋也可以做出有創意的輸出信息，比如常見的招聘信息和個人介紹啥的。

輸出結果：

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

%c標示符可以用各種 CSS 語句來爲輸出添加樣式，再隨便舉個栗子，background屬性的url()中添加圖片路徑就可以實現圖片的輸出了，各位前端童鞋快施展你們的 CSS 神技來把控制檯玩壞吧~~

這裏推薦一下我的前端學習交流裙：731771211，裏面都是學習前端的，羣裏會不定期更新最新的教程和學習方法，有想學習web前端的，或是轉行，或是大學生，還有工作中想提升自己能力的web前端黨歡迎加入。