前端console调试技巧

标签断点

• 在chrome中,可以通过给标签添加断点来定位标签属性的变化对应的代码所在行(ps:可能会有点绕…直接看代码)
• 首先添加断点,在F12后的Elements界面,右键想要查看的标签,选择 break on 中的attribute modification即可添加断点
• 这里假设有一个p标签,绑定了click方法,点击后改变字体颜色和字体大小
• 添加断点后刷新页面,点击p标签,就会定位到对应的代码行.
• 之后可以通过点击箭头来依次执行查看效果(途中蓝色箭头)
  

log中的替换

• 我们知道在c语言中有%s,%f,%c等标识不同类型的符号.console中也有与之对应的符号
• console.log("输出一个字符串 %s ", "log") 这段代码中会将 %s 替换为log输出
• console.log("输出一个整数是 %d ", 1.23); //1
• console.log("输出一个小数是 %f ", 1.23); //1.23
• console.log("%c不同样式的输出效果", "color: #00fdff; font-size: 2em;"); %c是将内容以后面的样式输出
• console.log('对象 %o' , {name:'zhy',age:20}) 将第二个参数的内容作为对象输出

不同类型输出

• 警告: console.warn('warn')
• 错误: console.err('err')

打印dom的属性

• 假定选择了一个p标签,可以通过console.dir(p)来打印p标签对应的属性

表格方式输出结果

• 语法: console.table(arr)
• 输出样式:
• 也可以输出指定列:console.table(dogs,'age')

time计算代码执行时间

• 通常我们可能会需要知道某个异步操作需要的时间,比如请求了某个资源

• 通过console.time(‘name’)和对应的console.timeEnd(‘name’)即可在控制台返回它们之间代码的执行时间.注意:name必须前后一致

  console.time('one')
  fetch('https://api.github.com/users/soyaine')
    .then(data => data.json())
    .then(data => {
      console.log(data)
      console.timeEnd('two')
    })