chrome开发者工具怎么查看css代码(2)-木庄网络博客

当前第2页返回上一页

2、点击 title 前方的复选框可以来回切换样式。

添加新样式规则

1、单击 styles 选项卡右上角的加号1?，DevTools会在 element.style 规则下插入一条新规则。

2、如果想在特定位置添加新样式规则，可以鼠标悬浮在插入规则的上一个样式规则处，此时会在右下角出现三个点更多操作的符号，x悬浮上去就会出现加号2?，点击加号2就会在此条样式的后面新增一条样式规则。

3、这里的更多操作还有其他一些功能，从左往右依次是文字阴影、盒子阴影、文字颜色、背景颜色。
在这里插入图片描述

切换样式声明

1、点击样式声明前的复选框就可以切换样式声明
在这里插入图片描述

更改元素尺寸

1、在 styles 选项卡的框模型图中，将鼠标悬浮在需要编辑的区域，双击，填入需要修改的数值，回车。盒模型的默认单位为像素，输入百分比也会转成像素值。
在这里插入图片描述

使用键盘快捷键更改声明值

编辑声明的值时，可以使用以下键盘快捷键将值递增固定量：

Up 将值更改为1，如果当前值介于-1和1之间，则更改0.1。
Option+ Up（Mac）或Alt+ Up （Windows，Linux）增加0.1。
Shift+ Up增加10。
Shift+ Command+ Up（Mac）或 Shift+ Page Up（Windows，Linux）将值增加100。

减量也有效。只需将Up上面提到的每个实例替换为Down。

使用Coverage选项卡查看已使用和未使用的CSS

1、按下Command+ Shift+ P（Mac）或 Control+ Shift+ P（Windows，Linux，Chrome OS），而DevTools则处于焦点以打开命令菜单。
2、开始输入coverage并选择Show Coverage。将显示 coverage 选项卡。
在这里插入图片描述
3、单击“to reload and start capturing coverage” 开始检测覆盖范围并重新加载页面。页面重新加载，Coverage选项卡提供浏览器加载的每个文件使用多少CSS（和JavaScript）的概述。绿色代表使用CSS。红色表示未使用的CSS。
在这里插入图片描述
4、单击一个CSS文件，查看它使用的CSS的逐行细分。

拾色器的使用

面板说明

以下是拾色器的每个UI元素的说明：
1、阴影。
2、吸管。
3、复制到剪贴板。将显示值复制到剪贴板。
4、显示价值。RGBA，HSLA或Hex的颜色表示。
5、调色板。单击其中一个方块可将颜色更改为该方块。
6、色相。
7、透明度。
8、显示值切换器。在当前颜色的RGBA，HSLA和Hex表示之间切换。
9、调色板切换器。在“ 材质设计”调板，自定义调色板或页面调色板之间切换。DevTools根据它在样式表中找到的颜色生成页面调色板。
在这里插入图片描述