这是我参与「第五届青训营 」伴学笔记创作活动的第 5 天
本堂课重点内容：
了解并学会调试前端BUG
详细知识点介绍
edge F12调试介绍
-
点击.cls开启动态修改元素的class
-
输入字符串可以动态的给元素添加类名
-
勾选/取消类名可以动态的查看类名生成效果
-
点击具体的样式值（字号、颜色、宽高等）可以进行编辑，浏览器内容区域实时预览
-
在Computed(已计算)下点击样式里的箭头可以跳转到styles(样式)面板中的css规则
-
可以使用以下两种方式强制激活伪类
① 选中具有伪类的元素，点击:hov
②DOM树右键菜单，权责Force State(强制状态)以我自己的一个盒子案例为例，当鼠标在黑框内悬停时，盒子内部的渐变色小盒子会变成居中状态，这时候用法①：
在强制状态下点击:hover之后，盒子就会飘到中间去：
不难发现，在图片的右半部分:hov由黑变蓝，这里就是法②的操作位置。让我们用法②重新做这件事： 选中黑框盒子，点击:hov，勾选:hover:
状态变为如下：
Console(控制台)
- console. log/warn/error/debug/info 有不同的颜色显示
-
console.table 具象化的展示JSON和数组数据
-
console.dir 通过类似文件树的方式展示对象的属性
-
占位符
给日志添加样式，可以突出重要的信息
Sources(源代码)
- 区域和对应功能
