01 bug 与 debug
Bug的产生：first bug bug or feature node code，no bug
前端debug特点：第一，多平台——浏览器、hybrid、nodels、小程序、桌面应用；第二，多环境——本地开发环境、线上环境；第三，多工具——chrome devtools、 Charles、spy-debugger、whistle、 vchnsole；第四，多技巧——console、breakponit、sourcemap
、代理学
02 chrome devtools
动态修改元素和样式：
点击.cls开启动态修改元素的class
属于字符串可以动态的给元素添加类名
勾选、取消类名可以动态的查看类名生效效果
点击具体的样式值（字号、颜色、宽度高度等）可以进行编辑，浏览器内容区域实时预览
Computed下点击样式里的箭头可以跳转到styles面板中的css规则
可以用以下2种方式强制激活伪类：
选中具有伪类的元素，点击.hov
Dom树右键菜单，选择force state
Console
Console.log
Console.warn
Console.error
Console.debug
Console.info
Console.table
具象化的展示JSON和数组数据
Console.dir
通过类似文件树的方式展示对象的属性
占位符
给日志添加样式，可以突出重要信息
（右侧可以选择等级，对日志进行分类查看）
Sorce tab
区域1：页面资源文件目录树
区域2：代码预览区域
区域3：debug 工具栏
从左到右依次为
暂停（继续）
单步跳过
进入函数
跳出函数
单步执行
激活（关闭）所有断点
代码执行异常自动
区域4：断点调试器
