liang14658fox

Appearance

^finished

复制模板 ​

js
console.log(
'%c打印➜:','background:green;color:#fff;padding:4px;',123123)
console.log(
'%c打印➜:','background:green;color:#fff;padding:4px;',123123)
js
console.log(
'%cTest%c打印:',
'background:green;color:#fff;padding:4px;border-radius:3px 0 0 3px;',
'background:blue;color:#fff;padding:4px;border-radius:0 3px 3px 0;',
123123,
'\n                                               Time ',
new Date().getHours() + ':' + new Date().getMinutes() + ':' + new Date().getSeconds())
console.log(
'%cTest%c打印:',
'background:green;color:#fff;padding:4px;border-radius:3px 0 0 3px;',
'background:blue;color:#fff;padding:4px;border-radius:0 3px 3px 0;',
123123,
'\n                                               Time ',
new Date().getHours() + ':' + new Date().getMinutes() + ':' + new Date().getSeconds())

1. 常用显示类 ​

js
console.log('log')
console.info('info')
console.warn('warn')
console.debug('debug')
console.error('error')
console.log('log')
console.info('info')
console.warn('warn')
console.debug('debug')
console.error('error')

2. 美化显示table ​

  • 对象类型
js
console.table({name:'张三',age:18,sex:'male'})
console.table({name:'张三',age:18,sex:'male'})
  • 数组类型
js
console.log(['aaa','bbb','ccc'])
console.log(['aaa','bbb','ccc'])

3. 执行耗时 ​

括号内部包含一个标签，计算工作A time 到 timeEnd 的耗时，中间使用 timeLog 可以不间断查看耗时。

js
function doSomething(ms) {
    return new Promise(res => {
        setTimeout(() => res(), ms)
    })
}

console.time('工作A')

await doSomething(150)
console.timeLog('工作A')

await doSomething(250)
console.timeLog('工作A')

console.timeEnd('工作A')
function doSomething(ms) {
    return new Promise(res => {
        setTimeout(() => res(), ms)
    })
}

console.time('工作A')

await doSomething(150)
console.timeLog('工作A')

await doSomething(250)
console.timeLog('工作A')

console.timeEnd('工作A')

4. 有层次的显示 ​

调试函数式有层次显示log， group 默认折叠， groupCollapsed 。

js
console.group('第一组')
  console.log('内容1')
  console.log('内容2')

  console.group('第二组')
      console.log('内容1')
      console.log('内容2')
  console.groupEnd()
console.groupEnd()
console.group('第一组')
  console.log('内容1')
  console.log('内容2')

  console.group('第二组')
      console.log('内容1')
      console.log('内容2')
  console.groupEnd()
console.groupEnd()

5. 知道函数的执行次数 ​

js
function fn1() {
    console.count('fn1') //括号内放入函数名
}

fn1() //fn1:1
fn1() //fn1:2
fn1() //fn1:3

console.countReset('fn1') //重置
fn1() //fn1:1
function fn1() {
    console.count('fn1') //括号内放入函数名
}

fn1() //fn1:1
fn1() //fn1:2
fn1() //fn1:3

console.countReset('fn1') //重置
fn1() //fn1:1

6. 断言输出 ​

第一个参数为false时才会打印

js
console.assert( 1 === '1' , '输出内容' )
console.assert( 1 === 1 , '输出内容不被打印' )
console.assert( 1 === '1' , '输出内容' )
console.assert( 1 === 1 , '输出内容不被打印' )

7. 控制台打印结果样式定制 ​

%c + 参数,css样式,内容

  • 单个样式
js
console.log(
    '%c打印:',
    'background:green;color:#fff;padding:4px;border-radus:3px',
    'lalaala'
)
console.log(
    '%c打印:',
    'background:green;color:#fff;padding:4px;border-radus:3px',
    'lalaala'
)
  • 多个样式
js
console.log(
    '%cmylib%cvl',
    'background:green;color:#fff;padding:5px',
    'border-radius:0 5px 5px 0;background:blue;color:#fff;padding:5px',
    'llalaa'
)
console.log(
    '%cmylib%cvl',
    'background:green;color:#fff;padding:5px',
    'border-radius:0 5px 5px 0;background:blue;color:#fff;padding:5px',
    'llalaa'
)

打印日志的第三方库 ​