这是我参与「第四届青训营 」笔记创作活动的第6天

一、Elements

通过.cls开启动态修改元素的class

1.输入字符串可以动态的给元素添加类名
2.勾选/取消类名可以动态的查看类名生效效果
3.点击具体的样式值(字号、颜色、宽度高度等)
4.可以进行编辑，浏览器内容区域实时预览

Computed下点击样式里的箭头可以跳转到styles面板中的CSS规则

在computed板块可以借助上面的搜索框快速找到样式，如下图

激活伪类元素：

选中具有伪类的元素，点击: hov DOM树右键菜单，选择Force State

二、console

常规打印：console.log

效果==常规打印：console.debug、console.info

警告打印：console.warn

错误打印：console.error

实现效果：

表格打印：console.table将数据以表格形式呈现（有奇效）

打印节点树形结构：console.dir

占位符打印：

%s：字符串占位符

%o：对象占位符

%c：样式占位符

%d：数字占位符

三、Sources

1.使用关键字debugger或代码 预览区域的行号可以设置断点
2.执行到断点处时代码暂停执行
3.展开Breakpoints列表可以查看断点列表，勾选/取消可以激活/禁用对应断点
4.暂停状态下，鼠标hover变量可以查看变量的值
5.在调试器`Watch`右侧点击+可以添加对变量的监控，查看该变量的值

四、Performance

区域1：控制面板

区域2：概览面板

FPS：每秒的帧数

CPU：处理各个任务花费的时间

NET：各个请求花费的时间

区域3：线程面板，

Frames：帧线程，

Main：主线程，负责执行JavaScript，解析HTML/CSS，完成绘制；

Raster：Raster线程，负责完成某个layer或者某些块的绘制

区域4：统计面板