CSS
以下操作前首先在页面对应元素上 右键选择 inspect 或在开发者模式下 Elements 面板选中元素
一、动态添加/修改元素样式
修改类名在条件逻辑中比较常见，可以通过 devtools 动态修改/激活/禁用类
- 点击
.cls显示当前元素使用的类 - 通过
Add new class输入框添加类 - 通过选择框动态修改是否使用类
更简便的方式可以双击元素的类名进行修改
除了给元素添加/修改类名，还可以新增 CSS 样式规则
二、强制添加伪类状态
页面中一些动效是基于例如 :active、 :hover 等，当鼠标移动到控制台时，这些伪类就不生效，在控制台中也无法调试 CSS 样式，此时可以手动添加伪类状态
- 点击
:hov - 勾选想要的伪类
- 在 Styles 面板可以动态调试伪类样式
也可在 DOM 树中右键菜单 -> Force State -> 勾选对应伪类
三、查看实际应用于元素的 CSS
Styles 面板显示了应用于元素的所有样式，包括被覆盖的，例如 font-size 这一样式属性，就可能存在多层覆盖。可以使用 Computed 选项卡查看实际应用于元素的 CSS。
- 打开 Computed 面板
- 通过 Filter 筛选目标样式属性
- 点击样式属性展开所有定义的位置，第一个为实际应用属性
- 选中属性定义位置进行跳转
在盒模型上还可以直接修改对应的属性值
四、用颜色选择器修改颜色
在调试 CSS 中，设置颜色相关属性的值，颜色有 RGBA、HSLA、Hex 的形式，我们可以通过 Chrome 提供的颜色选择器动态修改颜色相关属性值
类似的交互形式还有角度选择器和阴影选择器分别对应
**rotate** 和 **box-shadow** 样式属性
五、CSS 属性值快速调整
鼠标滚轮可以实现 CSS 属性值的微调或快速调整，比如字体大小、旋转角度、宽高数值等，鼠标滚轮不只是+-1
- +-0.1：
Option+鼠标滚轮，windows 是Alt+滚轮 - +-1：滚轮前后滚动
- +-10：
Shift+鼠标滚轮 - +-100：
Command+鼠标滚轮，Windows 是Ctrl+滚轮
六、动画的调试
元素动画效果可以通过 keyframes、transition 等实现，开发实现过程中的代码过于抽象，实际上可以在 Chrome 开发工具 animation 的面板调试效果。该面板可提供动画重播、暂停、预览、修改操作方法：
- 控制动画执行过程：播放、暂停、重播、减速动画、调整执行时间
- 预览动画执行过程、动画时间曲线
- 侦听记录所有动画过程
七、查看代码覆盖率
代码使用率统计，支持运行时录制统计。
Console
一、复制控制台变量到剪贴板
Console 面板输出了很多日志，当我们想要复制一个打印的复杂对象时，发现直接复制会导致数据丢失，此时只需要一个copy()函数，即可将变量复制到剪贴板。当然也可以通过右键直接 copy。
二、函数监控器
通过 monitor 和 unmonitor 指定监听函数，执行的时候会在控制台输出一条信息，里面包含了函数的名称及执行时所传入的参数。当解除监视（也就是执行 unmonitor 时）就不再在控制台输出信息了。
Network
一、模拟弱网、断网环境
在 Network 面板下，可在 No throtting 下拉框选择模拟弱网、断网环境
二、过滤请求列表
日常开发对接口大部分情况下我们只关心 XHR 的请求内容，如果要单独查看特定类型请求，我们可以通过 Network 下的筛选工具进行操作
三、复制请求数据
针对 XHR 请求，我们还可以通过在请求项上右键选择复制 link address、response、cURL 等操作
Performance
性能监控，在调试某个 web 网页，想要查看从HTML渲染到屏幕的过程或运行时用户交互时的渲染、重绘、重排，内存占用、页面变化过程。那么就可以在 Performace 面板下，点击红色小圆点即可录制页面的完整变化过程
通过各个维度分析遇到的性能问题
其他
一、命令面板
命令面板提供了一些完成常见任务的操作，比如禁用 JavaScript。类似于 Visual Studio Code 中的命令面板
- 按下** Control+Shift+P / Command+Shift+P (Mac)**，或者打开设置选择 Run command
- 删除 '<' 输入 '?' 可以查看更多可用命令
