在 element 面板你可以检查每个元素的 CSS,那有没有办法看到整个页面的 CSS 概览呢?

请注意

这是一个实验中的功能,有可能会导致一些问题。

想看到有关页面的所有的 CSS 信息,你需要用到这个实验中的功能:

  • 打开设置,勾选 CSS 概览:

  • 重新打开 devtools 就可以看到啦:

这个面板主要包含这些信息:

# 1. CSS 的概览

汇总:

  • 元素数量数量
  • 行内样式的元素数量
  • 样式规则数量
  • 媒体查询的数量
  • 类型选择器数量
  • ID 选择器数量
  • 类选择器数量
  • 属性选择器数量
  • 通配选择器数量

...

# 2. 颜色

汇总了:

  • 背景颜色
  • 文本颜色
  • 填充颜色
  • 边框颜色

最关键的是,这里出现的每一种颜色,你点进去都是它对应的 CSS 定义!

这极大的方便了你找到那些和设计稿不兼容的颜色,大部分时候你都是靠全局搜索和肉眼去搜索。

# 3. 字体信息

不同字体类型的统计信息,分为字体大小,字重和行高三个维度。和颜色一样,都可以跳转到具体样式定义:

# 4. 未使用的定义

同样可以点进去看看为什么没有被用到,对于优化代码有很大的帮助:

# 5. 媒体查询

一般我们都会做多端适配,有一种普遍的方式是使用媒体查询,但是你知道有哪些会影响到当前页面吗?

微信扫码或搜索: 前端恶霸

在公众号对话框,发送

关注期间 无限制 浏览本站全部内容

内容包括 「Chrome 调试技巧」(持续更新),以及「React 学习指北」(即将上线)

为什么我需要关注?
加入读者交流群 扫描二维码回复 Chrome
Last Updated: 6/30/2020, 12:36:00 PM