多玩玩console吧,更好的定位和...彩蛋

83 阅读2分钟

本文介绍了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('封装成通用了,以后都用我')