本文介绍了console的一些更好定位追踪的方法,也可以通过写样式来让控制台变得更...符合你的风格。多用用吧,真的很好用实用。一定要看到最后!!!封装了一个通用的样式方法
// 1. console.time 和console.timeEnd 参数为key值,需要相同
console.time('time')
setTimeout(() => {
console.timeEnd('time')
}, 1000)
// 2. console.dir 以分层格式输出对象属性,一般用于查看dom对象属性
const promise = new Promise((resole, reject) => resole('get'))
console.dir(promise, '<----- promise')
// console.count 计算传入消息的输出次数,可以用于追踪代码出现次数
console.log('count start -----')
console.count('foo') // 1
console.count('fun') // 1
console.count('foo') // 2
console.log('count end -----')
// 4. console.trace
// trace 可以输出堆栈跟踪。对于理解代码中的执行流程以及识别特定日志消息的来源非常有用
const foo = () => console.trace(' bar trace');
const bar = () => foo();
bar();
// 5. console.profile profileEnd
// 测量代码块的性能。这对于识别性能瓶颈以及优化代码以提高速度和效率非常有用。
// profile的输出可以在控制台的工具栏上找到profile,里面有具体输出
console.profile('profile');
let count = 1
while(count > 1000000) {count++}
console.profileEnd('profile')
// 6. console占位符 %s 字符, %d|%i 整数, %f 浮点数,%o 对象
console.log("%d-%d-%i", 2000,11,11)
console.log('%f', 3.1133)
console.log('这个是一个%s', '占位符')
console.log('显示对象吧------> %o <-----', {id:1})
// 7. group groupEnd 输出一组信息
console.group('group')
console.log('1')
console.warn('2')
console.error('3')
console.info('4')
console.groupEnd('group')
// 8. console.assert 对输入的表达式进行断言,只有为false才会显示
console.assert(true, '要不要显示')
console.assert(false, '我false了!!!')
// 9. table
console.table([{id:1, name:'id1'}, {id:2, name: 'id2'}])
// 10 monitor & unmonitor
// 监听一个函数 当该函数每次被执行,都会输出一次
function fun() {
console.log('fun')
}
// 11. 美化样式
// 诶就是玩 让自己放松一下在控制台留下小彩蛋吧!
console.log('%c看我变成啥了', 'color: blue; font-size: 20px;')
const _log = console.log;
console.log = function() {
_log.call(console, '%c' + [].slice.call(arguments).join(' '), 'color: blue; font-size: 20px;')
}
console.log('封装成通用了,以后都用我')