专栏首页腾讯IVWEB团队的专栏【译】Chrome的新功能:CSS概述

【译】Chrome的新功能:CSS概述

原文地址:New in Chrome: CSS Overview 作者:Robin Rendle

这是Chrome中一个实验性的新奇功能,我们可以通过这个能力来获取一个网站上CSS的使用情况——从使用了哪些色值到未使用的声明数量,甚至是已定义的媒体查询总数等等。

再次声明,这是一项实验性功能。这不仅意味着其还在完善中,还意味着必须启用这个能力才能在DevTools中使用。

启用步骤:

  1. 打开DevTools(Mac环境,Command+Option+I;Windows环境,Control+ Shift+ I
  2. 打开DevTools设置(Mac环境,Function+F1;Windows环境,F1
  3. 点击实验选项
  4. 启用CSS Overview选项

Chrome DevTools实验设置窗口的屏幕截图,其中显示了选中的CSS Overview选项。

接着,关闭设置后,我们就能在DevTools菜单中看到一个名为CSS Overview的标签。如果没看到的话,请确保不是隐藏在溢出菜单中了。

Screenshot of the CSS Overview window in Chrome DevTools. It shows an overview of the elements, selectors, styles and colors used on the site, which is CSS-Tricks in this screenshot.

请注意,该报告是分为多个部分的,包括概要、颜色、字体信息、未使用的声明、媒体查询。我们可以从小小的面板中获取到很多信息。

这是不是很棒。我喜欢浏览器中开始加入这类工具。思考一下,这不仅能帮助前端人员,还有助于我们与设计师之间的合作。譬如,设计师可以通过这个能力,来检查我们开发的页面中有关色值的内容是否都是符合要求的。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 【IVWeb知识weekly】第5期

    5. Front-End Performance Checklist 2017 (PDF, Apple Pages)

    腾讯IVWEB团队
  • Web 推送技术

    伴随着今年 Google I/O 大会的召开,一个很火的概念--Progressive Web Apps 诞生了。这代表着我们 web 端有了和原生 APP 媲...

    腾讯IVWEB团队
  • 人生想要开挂,快来学习“画中画”!

    首先请允许我介绍下“画中画”:画中画(英文Picture-in-picture,缩写PiP)是指将一个电视节目(或其他画面)显示在整个画面上,同时将另一个或多个...

    腾讯IVWEB团队
  • java list集合操作

    使用java8新特性stream进行List去重  List newList = list.stream().distinct().collect(Collec...

    似水的流年
  • 细说TCP的MSS选项(2)

    上周因为发烧没办法坚持每“周一”更 —— 再次感叹“每周一更”这个名字,先给大家道声抱歉。

    glinuxer
  • 什么影响了数据库查询速度?

    1.慢查询:很难在短时间内过滤出需要的数据 查询字区分度低 -> 要在大数据量的表中筛选出来其中一部分数据会产生大量的磁盘io -> 降低磁盘效率

    芋道源码
  • 游戏服务器之多线程发送(中)

    4、拷贝数据到会话的发送缓冲区 交换发送队列和添加队列,拷贝会话的发送队列的数据到会话的发送缓冲区 BOOL ExecSockDataMgr::CopyWait...

    李海彬
  • Entity Framework ModelFirst尝试

    Model First我们称之为“模型优先”,这里的模型指的是“ADO.NET Entity Framework Data Model”,此时你的应用并没有设计...

    aehyok
  • 最新!有道文档翻译免费获取方法。有道翻译文档复制方法。解决有道文档翻译不能复制问题

    有道的文档翻译真的不错呢,不但翻译的好,排出的版也好看。 但是我们想下载的话需要付钱呢。

    小蓝枣
  • 基础网络设施成为云计算的最大弱点?

    无论你选择软件即服务、平台即服务或者是基础架构即服务,有一件事是不能避免的:你需要一个良好的、可靠的网络连接到云。自从云彻底改变了网络的作用及相关的硬件和软件,...

    静一

扫码关注云+社区

领取腾讯云代金券