这是我参与「第五届青训营 」伴学笔记创作活动的第11天
Bug与Debug
Bug的产生
在日常开发过程中，总是会遇到数不胜数的程序故障也就是我们俗称的Bug，那Bug这个称呼是怎么来的呢？
第一个bug是真实的虫子。有一天，计算机发生故障，程序员经过排查，发现是故障因为一个小虫子导致的，程序员就将程序故障命名为Bug。之后人们也习惯地把排除程序错误称为Debug。
前端Debug的特点
前端Debug具有四个特点
- 多平台：浏览器，Node.js,小程序，桌面应用等
- 多环境：本地开发环境，线上环境等
- 多工具：Spy-Debugger,Charles等
- 多技巧：Console，BreakPoint，代理等
Chrome DecTools
将从以下几个方面讲解：Elements，Console，Source，Performance，Network
动态修改元素和样式
- 点击.cls开启动态修改元素的class
- 输入字符串动态地给元素添加类名
- 勾选或取消类名可以动态地查看类名生效效果
- 点击具体样式值可以进行编辑，浏览器中相关内容会实时更新供浏览
- Computed下点击样式里的箭头可以跳转到style面板中的css规则
可以用以下两种方式强行激活伪类
- 选中带有伪类的元素，点击:hov
- DOM树右键菜单，选择Force State
Console
console.log
console.warm
console.error
console.debug
console.info
console.table
具象化展示JSON和数组数据
console.dir
通过类似文件树的方式展示对象的属性。 占位符
给日志添加样式，可以突出重要信息
Source Tab
页面1：页面资源文件目录树
页面2：代码预览区
页面3：Debug工具栏从左到右依次为
- 暂停/继续
- 单步跳过
- 进入函数
- 跳出函数
- 单步执行
- 激活/关闭所有短点
- 代码执行异常处自动
区域4：断点调试器
