console调试技巧,让数据更直观

207 阅读1分钟

打印日志 log、info、warn、error

      let t
      t = [
        { aaa: '111', bbb: 222 },
        { aaa: '111', bbb: 222 },
      ]
      console.log(t) // 打印所有信息
      console.info(t)
      console.warn(t) // 黄色警告信息
      console.error(t) // 红色报错信息

image.png

打印表格 table

      console.table(t) //表格显示 用于打印对象数组

image.png

分组打印 group groupEnd

      console.group('第1个分组开始')
      console.log('111')
      console.log('111')
      console.log('111')
      console.groupEnd()

      console.groupCollapsed('第2个分组开始')
          console.groupCollapsed('第2.1个分组开始')
          console.log('333')
          console.log('333')
          console.log('333')
          console.groupEnd()
      console.log('222')
      console.log('222')
      console.log('222')
      console.groupEnd()

image.png

打印一段代码的执行时间 time、timeEnd

      t = 0
      console.time('forTime')
      for (t; t < 90000; t++) {}
      console.timeEnd('forTime')

image.png

打印js对象/DOM实例对象 描述信息 dir

      t = { name: 'zs', age: 12 }
      console.log(t) 
      console.dir(t)
      console.log(document.body) // 会打印DOM结构
      console.dir(document.body) // 会以对象形式打印DOM的详细信息

image.png

事件计数 count

      function handleClick() {
        console.log('111')
        console.count()
      }
      let ele = document.getElementById('btn')
      ele.addEventListener('click', handleClick)

image.png

断言 判断条件是否成立 assert

不成立抛出错误,成立没有任何输出

      console.assert('0' == '1')

image.png

清空控制台 clear

     console.clear()

image.png

占位符 %s、%d、%f、%o、%0、%c

%s 字符串

%d 整数

%f 浮点数(可指定小数的位数)

%o 对象

%0 对象(JSON格式)

%c CSS样式(第二个参数为样式字符串)

      t = 'hello'
      console.log('字符:%s', t)
      t = 123
      console.log('整数:%d', t)
      t = 1.11
      console.log('浮点数:%f', t)
      t = {
        name: 'zs',
        age: 12,
      }
      console.log('对象:%o', t)
      t = "{'name': 'zs','age': 12,}"
      console.log('JSON格式对象:%o', t)
      t = 'color:#f00'
      console.log('%cCSS样式', t)

image.png