是否有前端小伙伴和我同样,一直都 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();