CSS 概览:发现潜在的 CSS 改进机会
使用集合让一切井井有条
根据您的偏好保存内容并对其进行分类。
使用 CSS Overview 面板更好地了解网页的 CSS 并确定潜在的改进空间。
概览
CSS 概览面板会创建一份您网站的 CSS 统计信息报告。此报告会收集与所有 CSS 事件甚至未使用的声明相关的数据。CSS 概览面板可帮助您通过突出显示网页或在 Elements 面板中直接链接到受影响的代码,进一步调查发生的情况。
了解如何生成和重新生成“CSS 概览”报告以及了解“CSS 概览”报告。
打开“CSS 概览”面板
- 打开任一网页,例如此页面。
- 打开开发者工具。
选择
自定义和控制开发者工具 >更多工具 >CSS 概览。
![CSS 概览。](https://developer.chrome.com/static/docs/devtools/css-overview/image/css-overview-the-menu-f3ef2aaf18e75.png?authuser=002&hl=zh-cn)
或者,使用命令菜单打开 CSS Overview 面板。
![在“命令”菜单中显示“CSS 概览”命令。](https://developer.chrome.com/static/docs/devtools/css-overview/image/show-css-overview-command-9e250260adc21.png?authuser=002&hl=zh-cn)
生成并重新生成“CSS 概览”报告
点击获取概览按钮,生成网页的“CSS 概览”报告。
![捕获 CSS 概览。](https://developer.chrome.com/static/docs/devtools/css-overview/image/capture-css-overview-8e5987ade03eb.png?authuser=002&hl=zh-cn)
如需重新运行 CSS Overview,请点击
Clear overview 图标,然后重复第一步。
![清除概览。](https://developer.chrome.com/static/docs/devtools/css-overview/image/clear-overview-9027a6591e697.png?authuser=002&hl=zh-cn)
了解“CSS 概览”报告
该报告包含以下五个部分:
- 概览摘要。网页 CSS 的简要摘要。
![概览摘要。](https://developer.chrome.com/static/docs/devtools/css-overview/image/overview-summary-0926d3de96f52.png?authuser=002&hl=zh-cn)
颜色。网页上的所有颜色。颜色按类型(例如背景颜色、文字颜色等)分组。此部分还会显示对比度较低的文字。
![颜色。](https://developer.chrome.com/static/docs/devtools/css-overview/image/colors-4e9bcaf388448.png?authuser=002&hl=zh-cn)
每种颜色均可点击。例如,假设 #DADCE0
边框颜色与您网站的配色方案不符。若要获取使用此颜色的元素的列表,请点击相应颜色。
![使用该颜色的元素的列表。](https://developer.chrome.com/static/docs/devtools/css-overview/image/a-list-elements-use-co-366529686af6a.png?authuser=002&hl=zh-cn)
若要突出显示页面上的相应元素,请将鼠标悬停在列表中的相应元素上。
![将鼠标悬停在某个元素上,即可在网页上突出显示该元素。](https://developer.chrome.com/static/docs/devtools/css-overview/image/hover-an-element-highli-a3fbd448a6a28.png?authuser=002&hl=zh-cn)
若要在元素面板中打开相应元素,请在列表中点击相应元素。
字体信息。网页上的所有字体及其出现位置,按不同的字体大小、字体粗细和行高进行分组。与颜色部分类似,如需查看受影响元素的列表,请点击其出现位置。
![字体信息。](https://developer.chrome.com/static/docs/devtools/css-overview/image/font-info-5325e4e179895.png?authuser=002&hl=zh-cn)
未使用的声明。所有不起作用的样式,按原因分组。
![未使用的声明。](https://developer.chrome.com/static/docs/devtools/css-overview/image/unused-declarations-ea01b8bc72572.png?authuser=002&hl=zh-cn)
例如,上述两个声明均未使用,因为其内容决定内嵌元素的高度和宽度。如需查看相应的元素,请点击发生实例。
媒体查询。在您的页面上定义的所有媒体查询,按出现次数降序排序。如需查看受影响元素的列表,请点击其出现次数。
![媒体查询。](https://developer.chrome.com/static/docs/devtools/css-overview/image/media-queries-4d2a940ed77e7.png?authuser=002&hl=zh-cn)
如未另行说明,那么本页面中的内容已根据知识共享署名 4.0 许可获得了许可,并且代码示例已根据 Apache 2.0 许可获得了许可。有关详情,请参阅 Google 开发者网站政策。Java 是 Oracle 和/或其关联公司的注册商标。
最后更新时间 (UTC):2021-10-21。
[{
"type": "thumb-down",
"id": "missingTheInformationINeed",
"label":"没有我需要的信息"
},{
"type": "thumb-down",
"id": "tooComplicatedTooManySteps",
"label":"太复杂/步骤太多"
},{
"type": "thumb-down",
"id": "outOfDate",
"label":"内容需要更新"
},{
"type": "thumb-down",
"id": "translationIssue",
"label":"翻译问题"
},{
"type": "thumb-down",
"id": "samplesCodeIssue",
"label":"示例/代码问题"
},{
"type": "thumb-down",
"id": "otherDown",
"label":"其他"
}]
[{
"type": "thumb-up",
"id": "easyToUnderstand",
"label":"易于理解"
},{
"type": "thumb-up",
"id": "solvedMyProblem",
"label":"解决了我的问题"
},{
"type": "thumb-up",
"id": "otherUp",
"label":"其他"
}]
{"lastModified": "\u6700\u540e\u66f4\u65b0\u65f6\u95f4 (UTC)\uff1a2021-10-21\u3002"}