console.log(JavaScript中console.log 方法如何使用)

計算屬性名稱

ES6 的計算屬性名稱特別有用,因為它們可以通過在變量周圍添加一對大括號來幫你識別的變量。

constx=1,y=2,z=3;console.log({x,y,z});//{x:1,y:2,z:3}

console.trace()

console.trac() 與 console.log() 完全相同,但它也會輸出整個棧跟蹤,能讓你確切地知道到底發生了什么。

constouter=()=>{constinner=()=>console.trace('Hello');inner();};outer();/*Helloinner@VM207:3outer@VM207:5(anonymous)@VM228:1*/

console.group()

console.group() 可以把日志分組為可折疊的結構,當有多個日志時特別有用。

console.group('Outer');//創建一個名為'Outer'的組console.log('Hello');//在'Outer'組中輸出日志console.groupCollapsed('Inner');//創建一個名為'Inner'的組,折疊狀態console.log('Hellooooo');//在'Inner'組中輸出日志console.groupEnd();//結束當前組,'Inner'console.groupEnd();//結束當前組,'Outer'console.log('Hi');//在組外輸出日志

日志級別

除了 console.log() 之外,還有其他一些日志記錄級別,例如 [console.debug()](https://developer.mozilla.org/en-US/docs/Web/API/Console /debug)、 console.info()、 console.warn()和 console.error()。

console.debug('Debugmessage');console.info('Usefulinformation');console.warn('Thisisawarning');console.error('Somethingwentwrong!');

console.assert()

console.assert() 提供了一種簡便的方法,僅在斷言失敗時將某些內容記錄為錯誤(例如當第一個參數為 false 時),否則完全跳過日志。

constvalue=10;console.assert(value===10,'Valueisnot10!');//不輸出日志console.assert(value===20,'Valueisnot20!');//輸出日志:"Valueisnot20!"

console.count()

可以用 console.count() 來統計一段代碼執行了多少次。

Array.from({length:4}).forEach(()=>console.count('items')//名為items的計數器);/*items:1items:2items:3items:4*/console.countReset('items');//重置計數器

console.time()

console.time() 提供了一種快速檢查代碼性能的方法,但是由于精度較低,不可用于真正的基準測試。

console.time('slowcomp');console.timeLog('slowcomp');console.timeEnd('slowcomp');

CSS

最后一個,還可以在 console.log() 中用 %c 字符串替換表達式將 CSS 應用于日志的各個部分。

console.log('CSScanmake%cyourconsolelogs%c%cawesome%c!','color:#fff;background:#1e90ff;padding:4px','','color:#f00;font-weight:bold','');

以上就是JavaScript中console.log() 方法如何使用,小編相信有部分知識點可能是我們日常工作會見到或用到的。希望你能通過這篇文章學到更多知識。更多詳情敬請關注本站行業資訊頻道。