前端Debug的特点

• 多平台
  • 浏览器、Hybrid、NodeJs、小程序、桌面应用等
• 多环境
  • 本地开发环境、线上环境
• 多工具
  • Chrome devTools、Charles、Spy-Debugger、Whistle、vConsole
• 多技巧
  • Console、BreakPoint、sourceMap、代理等

Chrome DevTools

• 动态修改元素和样式
  • 点击.cls开启动态修改元素的class
  • 输入字符串可以动态的给元素添加类名
  • 勾选/取消类名可以动态的查看类名生效效果
  • 点击具体的样式值（字号、颜色、宽度高度等)可以进行编辑，浏览器内窖区域实时预览
  • Computed下点击样式里的箭头可以跳转到styles面板中的css规则
• Console
  • console.log
  • console.warn
  • console.error
  • console.debug
  • console.info
  • console.table具象化的展示JSON和数组数据
  • console.dir通过类似文件树的方式展示对象的属性
  • 占位符给日志添加样式，可以突出重要的信息
• Sorce Tab
• Break Point 与Watch
  • 使用关键字debugger 或代码预览区域的行号可以设置断点
  • 执行到断点处时代码暂停执行
  • 展开Breakpoints列表可以查看断点列表，勾选/取消可以激活/禁用对应断点
  • 暂停状态下，鼠标hover变量可以查看变量的值
  • 在调试器watch有侧点击＋可以添加对变量的监控，查看该变量的值
• Scope 与 Call Stack
  • 展开Scoope可以查看作用域列表（包含闭包）
  • 展开Call Stack可以查看当前JavaScript代码的调用栈
• Source Map
• NetWork
• Application
• Performance
• Lighthouse

总结

今天主要学习了前端相关的开发调试和Bug的产生以及很多常用调试工具的使用，通过今天所学的调试技巧，我掌握了动态修改元素、样式以及console和断点协调开发的方法