chrome调试工具使用之css篇

chrome devtools 是前端开发再也熟悉不过的调试工具了。那么我们究竟有多了解它,这里总结了一些常用的CSS调试操作。

查看CSS

查看元素对应的样式

1、打开调试工具,点击调试工具左上角的检查元素按钮或者快捷键(Ctrl/Cmd + Shift + C)
在这里插入图片描述
2、在页面选中需要查看的元素,被检查的元素在DOM树中以蓝色背景突出显示,样式在右侧 styles 选项卡区域内。
在这里插入图片描述

查看外部样式表

1、在 styles 选项卡中,单击CSS规则旁边的链接以打开定义规则的外部样式表。可以查看样式的源文件。
在这里插入图片描述

仅查看实际应用于元素的CSS

1、styles 选项卡中会显示适用于元素的所有规则,包括已被覆盖的声明,如果对覆盖的声明不感兴趣,可以点击与 styles 相邻的 computed 选项卡,仅查看实际应用于元素的CSS规则。

2、其中继承的属性是不透明的。选中 Show All 复选框可以查看所有继承的值。

3、注意属性的显示是按照字母顺序排列的。

4、Filter 过滤器可以按照查询规则搜索符合规则的样式。

5、当鼠标悬浮在某一行属性上时,会出现一个圆形箭头按钮,点击可以跳转到styles 选项卡所对应的样式处。
在这里插入图片描述

查看元素伪状态

1、在 styles 选项卡中点击 :hov 。以 :hover 为例,选中 :hover 复选框,如果
被检查的元素添加了 :hover 样式,在样式列表中就会显示此条样式。并且页面效果不用鼠标悬浮也会触发显示效果。
在这里插入图片描述

添加或更改CSS样式

添加内联样式

1、相当于向HTML的 style 属性的添加属性值。点击 element.style 顶部附近区域,输入新添加的样式属性名,按 Tab 键,再输入样式属性值,并按 Enter 键。这样就添加了一条内联样式。
在这里插入图片描述
2、查看效果:
在这里插入图片描述

向已有样式规则添加声明

1、单击要添加声明的样式规则的括号之间。出现光标,输入属性名,按 tab 键,输入属性值,回车。

修改已有样式规则的声明

1、在需要更改的原有样式上双击,修改样式规则,并按 Enter 键。

给元素添加CSS类

1、在 styles 选项卡中点击 .cls 。会显示一个 Add new class 的输入框,你可以输入你想要添加的类名,然后按 Enter 键。
在这里插入图片描述

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

添加新样式规则

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

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

新版chrome吧那几个按钮去掉了,改成点击阴影属性后面的小白框出现可视化调试。

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根据它在样式表中找到的颜色生成页面调色板。
在这里插入图片描述

使用吸管从页面上取样

打开拾色器时,默认情况下吸管 滴管处于打开状态。要将所选颜色更改为页面上的其他颜色:
1、将鼠标悬停在视口中的目标颜色上。
2、点击确认。

  • 11
    点赞
  • 42
    收藏
  • 打赏
    打赏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:数字20 设计师:CSDN官方博客 返回首页
评论 3

打赏作者

userkang

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值