一.Bug与Debug
1.前端DeBug的特点
(1)多平台
浏览器、Hybrid、NodeJs、小程序、桌面应用等
(2)多环境
本地开发环境、线上环境
(3)多工具
Chrome、devTools、Charles、spy-Debugger、Whistle、vConsole
(4)多技巧
Console、BreakPoint、sourceMap、代码等
二.Chrome DevTools
1.动态修改元素和样式
(1)点击.cls开启动态修改元素的class
(2)输入字符串可以动态的给元素添加类名
(3)勾选/取消类名可以动态的查看类名生效效果
(4)点击具体的样式值（字号、颜色、宽度高度等）
(5)Computed下点击样式里的箭头可以跳转到styles面板中的css规则
可以用以下两种方法强制激活伪类 （1）选中具有伪类的元素，点击：hov （2）DOM树右键菜单，选择Force State
2.Console
（1）console.log
(2)console.warn
(3)console.error
(4)console.debug
(5)console.info
(6)console.table
具象化的展示JSON和数组数据
(7)console.dir
通过类似文件树的方式展示对象的属性
(8)占位符
给日志增加样式，可以突出重要的信息
