老鐵，你真的會(huì)用 console.log 嗎？
對(duì)于廣大的前端工程師來(lái)講，在瀏覽器或者程序中通過(guò)console.log()來(lái)調(diào)試輸出變量信息是常用的一種方式，你可能了解過(guò)console.error()、console.warning()，但總是用于輸出文本吧，今天看到一篇比較好的外文，做了適當(dāng)翻譯和修飾，供君閱讀和參考。
在瀏覽器控制臺(tái)打印輸出信息，極大地方便了開(kāi)發(fā)者的調(diào)試以及解決問(wèn)題。console.log() 該方法輸出的信息就像是解決難纏問(wèn)題的一劑良藥。而且大多數(shù)的開(kāi)發(fā)者都想這樣——讓我在瀏覽器控制臺(tái)獲得更多與問(wèn)題有關(guān)的信息。我很確定我并不是唯一這樣想的人。
除了通常使用console.log()在瀏覽器中打印輸出信息，還有很多不同的方法使得你的調(diào)試過(guò)程更加容易。接下來(lái)讓我們通過(guò)示例了解一下它們吧。
0x00 console.log( ) | info( ) | debug( ) | warn( ) | error( )
它們會(huì)在瀏覽器控制臺(tái)中打印原始的字符串內(nèi)容，并且根據(jù)不同的“等級(jí)”，而文字的顏色有所不同。
0x01 使用占位符
Javascript提供了很多占位符，可以用于調(diào)試輸出的有如下：
%o — 對(duì)象占位 %s — 字符串占位 **%d ** — 數(shù)字占位
0x02 給輸出的內(nèi)容添加CSS
你是否會(huì)認(rèn)為所有的console方法輸出的區(qū)別不大？好吧，從現(xiàn)在開(kāi)始它將不再相同，使得您更容易找到你所關(guān)心的問(wèn)題
使用%c這個(gè)占位符，可以像寫(xiě)行內(nèi)樣式一樣，自定義輸出內(nèi)容的樣式
0x03 console.dir()
輸出指定對(duì)象的JSON格式，其實(shí)在console.info()這個(gè)方法中，會(huì)自動(dòng)判斷是否為對(duì)象來(lái)決定是否打印輸出JSON格式。console.dir()強(qiáng)制做了這件事兒。
0x04 格式化輸出HTML元素
可以通過(guò)js獲取到DOM節(jié)點(diǎn)，然后打印輸出，效果和在開(kāi)發(fā)者工具中的“Elements”選項(xiàng)卡類(lèi)似，這里的功能就是對(duì)HTMLElements做了一個(gè)默認(rèn)的DOM格式化吧。
0x05 console.table()
想要更加直觀/美觀展示JSON格式的數(shù)據(jù)？
0x06 console.group( ) & console.groupEnd( )
它會(huì)盡可能地將打印的信息組織在一起，這樣的話(huà)，我們的輸出看起來(lái)就更加的有層次、有組織
0x07 console.count( )
count() 用來(lái)打印調(diào)用次數(shù)，一般用在循環(huán)或遞歸函數(shù)中。接收一個(gè) label 參數(shù)以定制輸出，默認(rèn)直接輸出 1 2 3 數(shù)字。
0x08 console.assert( )
console 版斷言工具，當(dāng)且僅當(dāng)?shù)谝粋€(gè)參數(shù)值為 false 時(shí)才打印第二個(gè)參數(shù)作為輸出。
這種輸出結(jié)果為 error，所以也可被 console.error + 代碼級(jí)別斷言所取代。
0x09 console.trace( )
打印此時(shí)的調(diào)用棧，在打印輔助調(diào)試信息時(shí)非常有用。
##0x0A console.time( )
打印代碼執(zhí)行時(shí)間，性能優(yōu)化和監(jiān)控場(chǎng)景比較常見(jiàn)。
0x0B console.memory
打印內(nèi)存使用情況。
0x0C console.clear( )
清空控制臺(tái)輸出。
0x0D 總結(jié)
通過(guò)如上的例子，console為我們發(fā)現(xiàn)輸出控制臺(tái)信息的提供了很多方式，那么在日志打印和調(diào)試輸出的時(shí)候，是否就可以做一些關(guān)于規(guī)范話(huà)的內(nèi)容吶？
比如基于console 封裝的logger，在團(tuán)隊(duì)項(xiàng)目上做一些更加規(guī)范化的日志輸出，相信對(duì)于團(tuán)隊(duì)成員成功解決問(wèn)題將更加有幫助！
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');