老鐵，你真的會用 console.log 嗎？
對于廣大的前端工程師來講，在瀏覽器或者程序中通過console.log()來調(diào)試輸出變量信息是常用的一種方式，你可能了解過console.error()、console.warning()，但總是用于輸出文本吧，今天看到一篇比較好的外文，做了適當翻譯和修飾，供君閱讀和參考。
在瀏覽器控制臺打印輸出信息，極大地方便了開發(fā)者的調(diào)試以及解決問題。console.log() 該方法輸出的信息就像是解決難纏問題的一劑良藥。而且大多數(shù)的開發(fā)者都想這樣——讓我在瀏覽器控制臺獲得更多與問題有關(guān)的信息。我很確定我并不是唯一這樣想的人。
除了通常使用console.log()在瀏覽器中打印輸出信息，還有很多不同的方法使得你的調(diào)試過程更加容易。接下來讓我們通過示例了解一下它們吧。
0x00 console.log( ) | info( ) | debug( ) | warn( ) | error( )
它們會在瀏覽器控制臺中打印原始的字符串內(nèi)容，并且根據(jù)不同的“等級”，而文字的顏色有所不同。
0x01 使用占位符
Javascript提供了很多占位符，可以用于調(diào)試輸出的有如下：
%o — 對象占位 %s — 字符串占位 **%d ** — 數(shù)字占位
0x02 給輸出的內(nèi)容添加CSS
你是否會認為所有的console方法輸出的區(qū)別不大？好吧，從現(xiàn)在開始它將不再相同，使得您更容易找到你所關(guān)心的問題
使用%c這個占位符，可以像寫行內(nèi)樣式一樣，自定義輸出內(nèi)容的樣式
0x03 console.dir()
輸出指定對象的JSON格式，其實在console.info()這個方法中，會自動判斷是否為對象來決定是否打印輸出JSON格式。console.dir()強制做了這件事兒。
0x04 格式化輸出HTML元素
可以通過js獲取到DOM節(jié)點，然后打印輸出，效果和在開發(fā)者工具中的“Elements”選項卡類似，這里的功能就是對HTMLElements做了一個默認的DOM格式化吧。
0x05 console.table()
想要更加直觀/美觀展示JSON格式的數(shù)據(jù)？
0x06 console.group( ) & console.groupEnd( )
它會盡可能地將打印的信息組織在一起，這樣的話，我們的輸出看起來就更加的有層次、有組織
0x07 console.count( )
count() 用來打印調(diào)用次數(shù)，一般用在循環(huán)或遞歸函數(shù)中。接收一個 label 參數(shù)以定制輸出，默認直接輸出 1 2 3 數(shù)字。
0x08 console.assert( )
console 版斷言工具，當且僅當?shù)谝粋€參數(shù)值為 false 時才打印第二個參數(shù)作為輸出。
這種輸出結(jié)果為 error，所以也可被 console.error + 代碼級別斷言所取代。
0x09 console.trace( )
打印此時的調(diào)用棧，在打印輔助調(diào)試信息時非常有用。
##0x0A console.time( )
打印代碼執(zhí)行時間，性能優(yōu)化和監(jiān)控場景比較常見。
0x0B console.memory
打印內(nèi)存使用情況。
0x0C console.clear( )
清空控制臺輸出。
0x0D 總結(jié)
通過如上的例子，console為我們發(fā)現(xiàn)輸出控制臺信息的提供了很多方式，那么在日志打印和調(diào)試輸出的時候，是否就可以做一些關(guān)于規(guī)范話的內(nèi)容吶？
比如基于console 封裝的logger，在團隊項目上做一些更加規(guī)范化的日志輸出，相信對于團隊成員成功解決問題將更加有幫助！
Reference
Mastering JavaScript console.log( ) to become a Pro
下面的代碼是例子中用到的參考示例的集合：
// time and time end
console.time("This");
let total = 0;
for (let j = 0; j < 10000; j++) {
total += j
}
console.log("Result", total);
console.timeEnd("This");
// Memory
console.memory()
// Assertion
const errorMsg = 'Hey! The number is not even';
for (let number = 2; number <= 5; number += 1) {
console.assert(number % 2 === 0, {number: number, errorMsg: errorMsg});
}
// Count
for (let i = 0; i < 11; i++) {
console.count();
}
// group & groupEnd
console.group();
console.log('Test message');
console.group();
console.log('Another message');
console.log('Something else');
console.groupEnd();
console.groupEnd();
// Table
const items = [
{
name: "chair",
inventory: 5,
unitPrice: 45.99
},
{
name: "table",
inventory: 10,
unitPrice: 123.75
},
{
name: "sofa",
inventory: 2,
unitPrice: 399.50
}
];
console.table(items)
// Clear
console.clear()
// HTML Element
let element = document.getElementsByTagName("BODY")[0];
console.log(element)
// Dir
const userInfo = {"name":"John Miller", "id":2522, "theme":"dark"}
console.dir(userInfo);
// Color
console.log('%cColor of the text is green plus small font size', 'color: green; font-size: x-small');
// pass object, variable
const userDetails = {"name":"John Miller", "id":2522, "theme":"dark"}
console.log("Hey %s, here is your details %o in form of object", "John", userDetails);
// Default
console.log('console.log');
console.info('console.info');
console.debug('console.debug');
console.warn('console.warn');
console.error('console.error');