創作不易，求一個免費的贊，謝謝啦 ！！！
前言
為啥會突然想起寫一篇關于console的文章？筆者接觸JS也不少時間了，除了用vscode的debuger，其實大部分時間都在使用console.log()方法來輸出一些或者調試程式，我相信很多剛開始接觸JS的同志，應該也都習慣使用console.log()。但是log的能力是有限的，并不能滿足所有的場景。比如我們相用表格資料對象。
下面這張圖，純粹是看了掃黑風暴想到的！！！
console.log()
大家最常用的應該就是這個屬性了，不過你有沒有使用這個方法輸出console對象。
console.log(console) 文法
console.log(常見JS資料)
console.log(123)
>> 123 console.log( %s %d %f %o 等占位符寫法（類似C的print）)
console.log('我是 %s','前端picker')
>> 我是 前端picker console.log(ES6 模闆字元串)
const nickName = "前端picker"
console.log(`我是 ${nickName}``)
>> 我是 前端picker 數組/對象會顯示在一行
console.log({object: 'object'}, {object: 'object'});
console.log(['array', 'array'], ['array', 'array']); CSS樣式美化輸出
在上面我們介紹了占位符輸出，其實還有占位符%c,可以用來接收css樣式。
console.log('我是紅色 %c 文字', 'color: red;'); 每個%c隻負責它之後的文字，知道遇到下一個%c;
console.log('This is %cred text %c 我沒顔色 %c 我是綠色.', 'color: red;', '', 'color: green;'); 當然你也可以選擇把樣式定義成變量。
let style="background: white;border: 3px solid red;color: red;font-size: 50px;margin: 40px;padding: 20px;"
undefined
console.log('%c我是log!', style); console.clear()
大部分的浏覽器在開發者工具都内置了清除控制條的方法。
其實console對象也提供了clear方法來清空控制台。
當你執行console.clear()之後
cosole.debug()
輸出“調試”級别的消息,并且在浏覽器中隻有你配置了debug才可以顯示。
例如在火狐浏覽器中：
當你沒有勾選調試的時候：是無法顯示debug的資訊的。
隻有你勾選調試的時候，才會顯示。
error()
向 Web 控制台輸出一條錯誤消息，并且隻有才浏覽器配置了errors才可以顯示。
下圖是在火狐浏覽器的效果
下圖是在chrome的效果
兩個浏覽器都會在error的前面加上一個小圖示。
info()
向web控制台輸出一個通知資訊，并且隻有在浏覽器配置info可見的時可以顯示。
下圖是在火狐浏覽器的效果
下圖是在chrome的效果
在火狐浏覽器中會在前面加上小圖示，而chrome沒有
warn()
向 Web 控制台輸出一條警告資訊，并且隻有在浏覽器配置warning可見的時可以顯示。
兩個浏覽器都會在warn的前面加上一個小圖示。
console.count()
輸出 count() 被調用的次數。此函數接受一個可選參數 label，如果你不設定參數的話，這個參數預設名叫**“default”**。
用來統計
console.count('我是');
console.count('前端picker');
console.count('我是');
console.count('前端picker');
console.count('我是');
console.count('前端picker'); 通過下圖可以看到，針對不同的參數，count()是分别累計的。
console.countReset()
用來重新開機計數器的.同樣也接收一個label參數，
如果提供了參數label，此函數會重置與label關聯的計數。
如果省略了參數label，此函數會重置預設的default計數器。
console.dir()
在控制台中顯示指定JavaScript對象的屬性，并通過類似檔案樹樣式的互動清單顯示。
也就是文法是:
console.dir(object) const auther = {
name: '前端picker',
age: '18',
};
console.log(auther);
console.dir(auther); 在chrome浏覽器中，是支援這個屬性的，下圖可以看出與log的不同
但是在火狐浏覽器中，log和dir的輸出一緻，不同的是火狐會預設展開dir的結果。
當然log和dir在輸出dom結構的時候是完全不同的。不過這個我們放在dirxml方法中學習。
console.dirxml()
顯示一個明确的XML/HTML元素的包括所有後代元素的互動樹。 如果無法作為一個element被顯示，那麼會以JavaScript對象的形式作為替代。 它的輸出是一個繼承的擴充的節點清單，可以讓你看到子節點的内容。
同時也支援object。
在dir中我們把DOM留到了這裡。
建立一個DOM對象
var childNode = document.createElement('p');
childNode.innerHTML = '<span>這裡是提示資訊〜〜</span>'; 使用log/dir/dirxml輸出
log
dir
dirxml
可以看出log和dirxml的輸出效果是一緻的，是以DOM的形式輸出的，dir則輸出的是屬性的值。
group()、groupCollapsed() 和 groupEnd()
将不同的控制台輸出組合在一起以顯示它們之間的一種關系形式。通常是組合在一起使用的。
group接收一個參數，表示組名，如果不設定的話，在不同的浏覽器表現不一緻，浏覽器預設展開組。
groupCollapsed()與group的不同在于groupCollapsed會自動折疊組。
groupEnd()表示組的結束。
group+groupEnd
console.group();
console.log('name:');
console.log('前端picker');
console.groupEnd();
console.group('參數');
console.log('age');
console.log('18');
console.groupEnd();
• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9 下面是chrome的效果。不設定組名的話，預設是console.group，同時一組的輸出會縮進。
下面是火狐的效果不設定組名的話，預設是<無組标簽>
groupCollapsed+grounEnd
console.groupCollapsed();
console.log('name:');
console.log('前端picker');
console.groupEnd();
console.group('參數');
console.log('age');
console.log('18');
console.groupEnd('參數'); 嵌套
console.group('下面是作者資訊');
console.log('第1項');
console.group('name');
console.log('前端picker');
console.groupEnd();
console.log('第2項');
console.group('age');
console.log('18');
console.groupEnd();
console.groupEnd(); CSS樣式美化-%c
console.group('%c下面是作者資訊','color:red;');
console.log('第1項');
console.group('name');
console.log('前端picker');
console.groupEnd();
console.log('第2項');
console.group('age');
console.log('18');
console.groupEnd();
console.groupEnd(); console.table()
這個方法需要一個必須參數，參數 必須是一個數組或者是一個對象；還可以使用一個可選參數 columns。
它會參數以表格的形式列印出來。數組中的每一個元素（或對象中可枚舉的屬性）将會以行的形式顯示在表格中。
表格的第一列是 index。如果資料 data 是一個數組，那麼這一列的單元格的值就是數組的索引。 如果資料是一個對象。
數組
let ary = [
'1',
'2',
'3'
];
console.table(ary); object對象
let obj = {
name: '前端picker',
age: '18',
};
console.table(obj); 對象數組
let aryOfObjects = [
{
name: '張三',
age: '12',
},
{
name: '李四',
age: '18',
},
{
name: '王五',
age: '19',
}
];
console.table(aryOfObjects); 如圖所示，table()為我們提供了一個很好的對象布局，其中重複鍵作為列标簽。，每個對象中的所有鍵都将表示為一列，無論其他對象中是否有對應的鍵與資料。如果對象沒有鍵列的資料，則它顯示為空。
數組數組
let aryOfArray = [
[1,2,3],[3,4,5],[6,7,8]
];
console.table(aryOfArray); 數組數組類似于對象數組。它使用内部數組的索引作為列标簽，而不是作為列标簽的鍵。是以，如果一個數組的項目數比其他數組多，那麼這些列的表中将有空白項目。就像對象數組一樣。
對象數組數組
let aryOfArraysWithObject = [
['1', '2', {
name: '張三',
age: '12',
},],
['3', '4', {
name: '李四',
age: '18',
},}],
['5', '6', {
name: '王五',
age: '19',
}]
];
console.table(aryOfArraysWithObject); 在Chrome中，要檢視第三列中這些對象中包含的内容，是無法展開的，也就是無法檢視。。
不過在火狐浏覽器中，會自動展開，可以清除的看到結果
time()、timeLog() 和 timeEnd()
time()
你可以啟動一個計時器來跟蹤某一個操作的占用時長。每一個計時器必須擁有唯一的名字，頁面中最多能同時運作10,000個計時器。當以此計時器名字為參數調用 console.timeEnd() 時，浏覽器将以毫秒為機關，輸出對應計時器所經過的時間。
console.time(計時器名稱) timeEnd()
停止一個通過 console.time() 啟動的計時器,并并輸出結束的時間
console.timeEnd(計時器名稱) timeLog()
在控制台輸出計時器的值，該計時器必須已經通過 console.time() 啟動。
console.timeLog()(計時器名稱) 使用
console.time('this is a timer');
console.timeLog('this is a timer');
console.timeEnd('this is a timer'); 計算for的時間
console.time('this is a timer');
for(let i=0; i<10000000;i++){
}
console.timeLog('this is a timer');
console.timeEnd('this is a timer'); console.assert()
console.assert()指令類似于前面提到的錯誤指令。不同之處在于斷言允許使用布爾條件來确定是否應該将文本輸出到控制台。
例如：你想測試一個變量的值，并且這個值不等于’前端picker’，
如果變量低于該數字并且條件解析為 true，則 assert 指令不執行任何操作。如果條件解析為 false，則顯示輸出文本。通過這種方式，你就不需要通過if判斷是不是需要輸出之後，再使用console.error()輸出。
let name = '張三';
console.assert(name === '前端picker', '不是是前端picker，無法輸出');
let name1 = '前端picker';
console.assert(name1 === '前端picker', '不是前端picker------1，可以輸出'); 在Chrome中， 還可以輸出顯示斷言來自何處。
let value = 2;
function chackValue() {
chackValue3();
}
function chackValue2() {
chackValue3();
}
function chackValue3() {
console.assert(value < 1, 'This was false.');
}
chackValue(); 為了友善看，我們使用vscode标注了行數。
通過下圖可以看出，Chrome告訴我們斷言在9行。
console.trace
調用堆棧
在學習trace之前我們先來學習什麼是調用堆棧！！！
有這樣四個函數 function1調用function2 ，function2調用function3，function3調用function4
看這張圖，這幾個函數呈現出堆棧的特征。最後被調用的函數出現在最上方。是以稱呼這種關系為調用堆棧(call stack)。
trace可以幹啥
用來記錄 JavaScript 堆棧跟蹤,同時我們還還可以添加參數，用來表示目前跟蹤的名冊灰姑娘。
function f1(){
console.log('f1')
f2()
}
function f2(){
console.log('f2')
f3()
}
function f3(){
console.log('f3')
f4()
}
function f4(){
console.log('f4')
console.trace("f4的追蹤記錄");
} 從圖中我們可以看到：觸發 console.trace 之前調用的最後一個函數是f4。是以這将是調用堆棧的頂部。然後一次是f3,f2 ,f1