是否有前端小夥伴和我同樣,一直都 console.log()
打印信息(🙋...),最近看到篇國外文章寫到幾種經常使用 console
的方法,超實用,但願你們看完後可以提升開發效率。前端
文章都會先發布在 github 上JS 源碼git
congsole.log()、console.error()、console.warn()、console.info()
推薦指數: ⭐️⭐️⭐github
上面這些方法能夠接受多個參數json
const json = {a: 1, b: 2} console.log("log ==> ", json, new Date()) console.error("error ==> ", json, new Date()) console.warn("warn ==> ", json, new Date()) console.info("info ==> ", json, new Date())
## 二、console.group()
數組
推薦指數:⭐️⭐️⭐️⭐️less
console.group()
打印一系列的 console.logs
dom
function doSomething(obj) { console.group('doSometing...') const _data = new Date(); console.log('evauating data ==>', _data); const _fullName = `${obj.fistName} ${obj.lastName}`; console.log('fullName ==>', _fullName); const _id = Math.random(1) console.log('id ==> ', _id); console.groupEnd(); } doSomething({'firstName': 'hank', 'lastName': 'zhuo'})
console.table()
推薦指數:⭐️⭐️⭐️⭐️️⭐️️spa
console.table()
很是美觀打印數組和對象3d
const typeOfConsole = [ {name: 'log', type: 'standard'}, {name: 'info', type: 'standard'}, {name: 'table', type: 'standard'} ] console.table(typeOfConsole) const mySocial = { faceboo: true, linkedin: true, instagram: true, twitter: false } console.table(mySocial)
## 四、console.count()、console.time()、console.timeEnd()
推薦指數:⭐️⭐️⭐️⭐️⭐️code
console.count()
計算並輸出相同的類型的次數、console.time()、console.timeEnd()
計算程序花費的時間*/
console.time('total'); console.time('init arr'); const arr = new Array(20); console.timeEnd('init arr'); for (var i = 0; i < arr.length; i++) { arr[i] = new Object(); console.log(i) const _type = (i % 2 === 0) ? 'even' : 'odd' console.count(_type + 'added'); } console.timeEnd('total')
console.assert()、console.trace()
推薦指數:⭐️⭐️⭐️⭐️
console.assert()
條件打印,只要滿意傳入的條件纔打印console.trace()
打印跟蹤function lesserThan(a, b) { console.assert(a < b, {'message': 'a is not lesser than b', 'a': a, 'b': b}) } lesserThan(6, 5); function foo() { function bar() { console.trace(); } bar(); } foo();