devtools

打开Chrome开发者工具 - 快捷键

• Dom：Control + Shift + C
• Javascript：Control + Shift + J
• 最近关闭状态：Control + Shift + I

在console中访问节点

• 通过document.querySelectAll访问
• 使用$0快速访问选中的元素，$1为上一次选中元素
• 拷贝 - JS Path

在DOM中断点调试

• 属性修改时打断点：Break on -> attribute modifications
• 节点删除时打断点：Break on -> node removal
• 子树修改时打断点：Break on -> subtree modifications

console

• console.log
  • 接收变量传递，使用%s占位符来接

    var temp = 'imooc';
    console.log('this is %s', temp) // --> 'this is imooc'
  

  • %c：接收样式定制输出信息

    console.log("%c百度2022校园招聘简历投递：https://talent.baidu.com/external/baidu/campus.html", "color:green")
  

• console.error错误信息 - 通常在异常逻辑中catch块的错误信息使用
• console.table展示JSON格式的复杂信息
• console.group组合信息展示

  •  const label = '打印一组组合信息'
     console.group(label)
     console.info('network')
     console.info('error')
     console.groupEnd(label)
    
     // 打印一组组合信息
     //   network
     //   error
    

• console.time()：可检测性能方面，代码执行时间

  •   var fibonacci = function(n) {
        return n < 3 ? 1 : fibonacci(n - 1) + fibonacci(n - 2)
      }
      console.time()
      fibonacci(20)
      console.timeEnd()
    
      // default: 234992.75927734375 ms
    

• console.clear()清除控制台信息

javascript代码调试

• debugger：浏览器内置断点语句
  • 当程序运行到debugger语句时，会自动lock代码执行，将程序暂停在执行环境现场
• 快捷键
  • [F8]：恢复脚本执行
  • [F9] 或者[F11]：单步调试代码
• 在对应代码行数打断点
• Sources中的Event Listener BreakPoints给事件打断点

杂记

• 使用esc在面板下方输出console页面