創作不易，求一個免費的贊，謝謝啦 ！！！
前言
為啥會突然想起寫一篇關于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可見的時可以顯示，
下圖是在火狐瀏覽器的效果
下圖是在chrome的效果
兩個瀏覽器都會在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();
下面是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
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/297164.html
標籤：其他