文件大小:53.39 MB  文件版本:V 0.0.117

本地下载 官方下载 本地下载

当前位置: 首页 >  浏览器教程 > chrome教程攻略 > 如何在 Chrome 开发工具中使用 CSS 概览?

如何在 Chrome 开发工具中使用 CSS 概览?

2022-05-18 16:14:33    来源:浏览器部落    作者:admin

       如果您是 Web 开发人员,您可能会喜欢一个设计良好且有吸引力的网站。

  您可能会在特定网站上看到要合并到您的博客或网络应用程序中的配色方案或字体。但是您需要浏览器扩展程序才能查看网站的配色方案和其他 CSS 功能。

  Chrome 开发工具中的CSS 概览功能可让您查看这些 CSS 属性。

  在这篇文章中,我们将介绍如何使用 Chrome 开发者工具中的CSS 概览功能。我们还将学习如何使用CSS 概览来获取您想要在创建网页时使用的颜色和其他 CSS 属性。

如何在 Chrome 开发工具中使用 CSS 概览?

  什么是 CSS 概览面板?

  CSS 概览面板是 Chrome 开发者工具的最新功能之一。它用作预览工具,可让您查看创建网页时使用的不同 CSS 属性。

  它显示 CSS 属性,例如:

  网页上使用的颜色。

  网页上使用的每个元素的行高。

  网页上使用的每个元素的字体大小

  网页上每个元素的字体系列。

  网页上使用的每个元素的字体粗细。

  什么是 Chrome 开发者工具?

  Chrome 开发者工具也被称为 Chrome 开发者工具。

  Chrome 开发工具是一套预装在 Chrome 浏览器中的网络开发者工具。

  以下是使用Chrome 开发工具的一些优点:

  1、它使您能够在更短的时间内创建更好的网站。

  2、它使您能够对代码进行更改、测试和检查。

  3、Chrome 开发工具让开发人员可以更好地控制他们的网络应用程序和浏览器。

  4、它使您能够评估网站的总体性能。

  如何在浏览器中访问 Chrome 开发者工具

  您可以通过三种不同的方式访问 Chrome 开发者工具:


  1chrome的菜单


  单击位于 chrome 浏览器右上角的三个垂直点。more tools它将在屏幕底部弹出一个下拉菜单。

  点击更多工具。

  点击开发者工具。


  2、检查:

  右键单击 chrome 浏览器。

  点击检查。


  3、捷径:

  对于 Windows - CTRL+ Shift+IF12

  对于 Mac - CMD+ Shift+ I

  单击快捷键后,将打开开发人员工具。

  当您按CTRL+ Shift+I时,它会显示您默认打开的最后一个面板。它显示元素、控制台、网络或性能面板等。

  CTRL++默认情况下首先Shift打开C元素面板。

  如何在 Chrome 开发工具中使用 CSS 概览

  下面的步骤将引导您了解如何使用 CSS 概览功能来获取网页上使用的 CSS 属性。

  第 1 步 - 打开 Chrome 开发工具

  我们已经介绍了访问 Chrome 开发者工具的各种方法。你现在应该熟悉它们了。

  快速提醒一下,您可以在 Windows Linux 上按++ 打开 Chrome 开发工具Ctrl。在Mac上使用++ShiftICMDOptionI

  第 2 步 - 点击更多工具

  单击位于 Chrome 开发工具右上角的三个垂直点。

  从下拉菜单中选择“更多工具”。

  单击“更多工具”时,您会发现各种选项。从各种选项中,选择CSS 概览功能。

  第 3 步 - 单击捕获概述

  当您单击CSS Overview时,您将看到其功能列表。

  功能如:

  捕获页面 CSS 的概览。

  确定潜在的 CSS 改进。

  在元素面板中找到受影响的元素。


  单击捕获概述按钮。


  单击 Capture Overview 按钮后会出现一个包含五个部分的菜单。

  这五个部分是:

  1、概述摘要

  2、颜色

  3、字体信息

  4、未使用的声明

  5、媒体查询


  让我们一一浏览这五个部分,看看它们是如何工作的。

  CSS 概述总结

  概述摘要包含用于构建网页的 CSS 元素列表。


  概述摘要显示您网站上 CSS 的摘要,例如:

  网页上使用的元素数量。

  创建网页时使用的不同类型的选择器。

  网页上使用的内联样式元素的数量。

  网页上使用的外部样式表的数量。

  上面的示例显示了用于构建网页的各种 CSS 元素。

  颜色

  颜色面板显示创建网页时使用的所有颜色。它有一个用于背景、文本、填充和边框的调色板。它还突出显示网页上的低对比度文本问题。

  颜色面板的美妙之处在于每种颜色都是可点击的。如果单击“颜色”面板中的特定颜色,则会出现使用该颜色的元素列表。当您单击每个元素时,它会将您带到元素面板进行检查。

  您还可以将鼠标悬停在显示的元素列表中的元素上。当您将光标移到元素上时,它会突出显示网页上的元素。

  只是一个简短的说明:悬停是指将光标移动到任何东西上。这意味着将光标放在屏幕上的文本、图像或其他对象上,而不单击它们。

  字体信息

  字体信息面板显示网站开发中使用的字体。它向您显示创建网站时使用的font-size、line-height、font-weight。font families如果单击出现次数,您将看到受影响元素的列表。

  未使用的声明

  您可以使用未使用的声明找到不影响网页的 CSS 样式。

  您还可以单击事件以查看受影响的元素列表,例如字体信息和颜色面板。

  媒体查询

  媒体查询面板显示创建网页时使用的所有媒体查询的列表。您将能够检查创建网页时使用的各种宽度和屏幕分辨率。

  上面的示例显示了创建网页时使用的媒体查询的数量。它按出现的顺序列出了使用的屏幕分辨率,从最高到最低。如果单击出现次数,您将看到受影响元素的列表。

  结论

  在评估网页上的 CSS 属性时,CSS 概览工具会派上用场。它允许前端开发人员和设计人员检查网页上的 CSS 属性。

浏览器推荐下载

  • 本文关键词:
  • chrome
  • chrome开发工具
  • CSS概览
标签:
程序

本站发布的资源与软件仅为个人学习测试使用,请在下载后24小时内删除,不得用于任何商业用途,否则后果自负,请支持或者购买正版!

如侵犯到您的权益,请及时通知我们,我们会及时处理,对系统之家有任何投诉或建议,请与管理员联系. 邮箱:17587008659@163.com

Copyright©2011 浏览器部落(www.liulanqibuluo.com) 版权所有 闽ICP备2022006079号-1