【第一篇】 谷歌调试窗口：CSS

【第一篇】 谷歌调试窗口：CSS

 

一. 使用Coverage标签查看已使用和未使用的CSS。还能查看未使用的js代码，绿色表示使用过的CSS。红色表示未使用的CSS。

1. 当DevTools处于焦点状态时，按Command+ Shift+ P（Mac）或 Control+ Shift+ P（Windows，Linux，Chrome OS）以打开“命令菜单”。

2. 开始输入coverage并选择显示覆盖率。覆盖选项卡出现

 

　　3. 打开了Coverage窗口，单击“ 开始检测覆盖率并重新加载页面” 。页面将重新加载，“覆盖率”选项卡概述了浏览器加载的每个文件中使用了多少CSS（和JavaScript）。绿色表示使用过的CSS。红色表示未使用的CSS。

 

　　4. 单击一个CSS文件，以逐行查看其使用的CSS的分类。绿色表示使用过的CSS。红色表示未使用的CSS。

 

 

 

 

二. 使用更多工具栏方便添加css样式调试（可视化添加背景色，颜色，盒子阴影，文本阴影）

 　　1.在“ 样式”选项卡中，将鼠标悬停在样式规则上。样式规则部分的右下方显示了更多操作 。

　　2. 将鼠标悬停在“ 更多动作”上 可以显示上述动作。

 

 

 

 

 

 

三. 使用拾色器更改颜色

1. 选择一个元素。

2. 在“ 样式”选项卡中，找到要更改的color或background-color声明。在color或background-color 值的左侧，有一个小正方形，它是颜色的预览。

 

 

　　3. 单击蓝色小方块的颜色预览以打开拾色器

 

1. 阴影。
2. 吸管。请参阅使用吸管在页面上对颜色进行采样。
3. 复制到剪贴板。将显示值复制到剪贴板。
4. 显示值。颜色的RGBA，HSLA或十六进制表示形式。
5. 调色板。单击这些正方形之一以将颜色更改为该正方形。
6. 色相。
7. 不透明度。
8. 显示值切换器。在当前颜色的RGBA，HSLA和十六进制表示之间切换。
9. 调色板切换器。在“ 材质设计”调色板，自定义调色板或页面颜色调色板之间切换。DevTools根据在样式表中找到的颜色来生成页面调色板。

 　　Tips：可以点击2吸管然后去点击页面得到色值

 

三. 检查和修改动画

原文地址：https://developers.google.com/web/tools/chrome-devtools/inspect-styles/animations

1. 当DevTools处于焦点状态时，按Command+ Shift+ P（Mac）或 Control+ Shift+ P（Windows，Linux，Chrome OS）以打开“命令菜单”。

2. 开始输入Animations并选择显示动画，动画选项卡出现

3. 可以刷新网页看到网页所有动画，可以修改属性并开始选中的动画进行调试