Console 各种玩法

Console的各种玩法

    // 普通
    console.log('regular')
    
    // 传参数 %s
    console.log('Hello %s world', '💩');
    
    // 加样式 %c
    console.log('%c I am some styled text', 'font-size:30px; background:red; text-shadow: 10px 10px 0 blue')
    
    // 警告
    console.warn('i am warning')
    // 报错
    console.error('i am error')
    
    // 断言测试
    // 只有当第一个参数是错误时，会打印第二个参数
    console.assert(1 === 3, 'Wrong') // 'Wrong'
    console.assert(1 === 1, 'Wrong') // 不会打印
     
    // 清除console 如果勾选了preserve log 将不会起作用
    console.clear()
    
    // 查看Dom 元素对象
    const body = document.querySelector('body')
    console.log(body) // 打印html标签
    console.dir(body) // 打印了body对象
    
    // 集合显示打印, 比较清晰
    const dogs = [{name: 'Snickers',age: 2}, {name: 'hugo',age: 8}];
    dogs.forEach(dog => {
      // console.group(`${dog.name}`)
      console.groupCollapsed(`${dog.name}`) // 默认闭合
      console.log(`name: ${dog.name}`)
      console.log(`age: ${dog.age}`)
      console.log(`${dogname} ${dog.age}`)
      console.groupEnd(`${dog.name}`)
    })
    console.table(dogs) // 如果只是打印元素的话也可以用table
    
    // 计数
    console.count('curry'); // 1
    console.count('curry'); // 2
    console.count('Steve'); // 1
    console.count('Steve'); // 2
    console.count('curry'); // 3
    console.count('Steve'); // 3
    
    // 可以查看程序执行时间或者异步所消耗当时间
    console.time('for loop time')
    const arr = []
    for (let i = 0; i < 100000; i++) {
      arr.push(i)
    }
    console.timeEnd('for loop time')
    
    console.time('fetching data time');
    fetch('https://api.github.com/users/noone')
      .then(data => data.json())
      .then(data => {
        console.timeEnd('fetching data time');
        console.log(data);
      });