专为开发者设计的 CSS 查看器 Chrome 扩展

---

CSS 查看器扩展是一个 Chrome 扩展，充当属性查看器，由 Nicolas Huon 开发。用户需要点击工具栏图标，然后将鼠标悬停在任何元素上以查看该元素的属性。CSS 查看器扩展需要访问用户历史记录以及网站数据的权限，以便检查页面上的属性。

在这篇文章中，我们将了解什么是 CSS 查看器扩展以及如何使用它？

什么是 CSS 查看器 Chrome 扩展程序，它对 Web 开发人员有什么用？

如果 Web 开发人员访问某个网站并想知道该页面上使用了哪些 CSS 属性，那么 CSS 查看器扩展程序就能派上用场。该扩展程序识别页面上光标指向位置的 CSS 属性，并帮助用户轻松识别页面上使用的 CSS。该扩展程序可以识别图像、按钮、文本等中的 CSS 代码。现在，每个插件都有其自身的特性、优点和缺点，因此让我们来谈谈 CSS 查看器扩展程序在 Chrome 中的优点、特性和缺点。

CSS 查看器的特性

• 该扩展程序快速有效，安装相对简单。

• 它使用户能够即时查看 CSS 代码，从而节省时间。

CSS 查看器的优点

• 该扩展程序提供快速访问。

• 该扩展程序是跨平台的，适用于所有浏览器。

• 它还可以集成对象以及同步云存储和系统，以便在一个工作区中工作。

CSS 查看器的缺点

• 与其他扩展程序一样，它需要不断更新。

• 不同的浏览器需要不同版本的相同扩展程序。

• 该扩展程序需要用户的许多权限，在某些情况下，由于此类权限，可能会发生数据泄露等意外事件。

CSS 查看器扩展程序的快捷键

每个可安装的扩展程序和插件都有其自己的快捷键。CSS 查看器的快捷键为：

• F 用于冻结或解冻网页上显示的弹出窗口。

• C 复制当前查看的元素的代码。

• 用户可以按Esc键关闭扩展程序。

如何安装 CSS 查看器 Chrome 扩展程序？

安装 CSS 查看器是一个简单的过程。安装扩展程序的步骤如下：

步骤 1 - 要安装扩展程序，我们需要访问 Chrome 扩展程序网上应用店或 Firefox 附加组件。扩展程序在网上应用店中的外观如下所示。

步骤 2 - 现在，您需要根据使用的浏览器点击“添加到 Chrome”或“添加到 Firefox”按钮，它看起来如下所示。

安装扩展程序后，您将在浏览器右上角看到一个弹出窗口。

步骤 3 - 现在，我们需要使用 CSS 查看器。因此，首先我们需要通过点击图标启动扩展程序，然后会出现一个“开始”按钮。

现在，您可以将鼠标悬停在任何元素或图像上以查看该特定元素的 CSS 属性。

为了更好地理解扩展程序的功能，让我们看一个示例。

示例

在这个示例中，我们想知道某个网站的 CSS 代码。因此，我们将简单地将鼠标悬停在其上，我们这里使用的网站是 TutorialsPoint 网站。您可以在激活扩展程序之前查看输出。

这是我们在激活扩展程序之前网站的外观，让我们看看在激活扩展程序并悬停在各种元素上之后它的外观。

当我们将鼠标悬停在网站上的任何元素上时，我们会看到一个类似于上图的弹出窗口。此处的图像展示了 CSS 代码中使用的不同属性，例如字体大小、高度、颜色和背景，以及元素的位置。可以将鼠标悬停在网站上具有 CSS 属性的每个元素上以查看此弹出窗口，您还可以复制该特定属性的代码。

结论

CSS 查看器是为开发人员设计的扩展程序，以便开发人员可以查看开发人员悬停在其上的任何网页或网站的 CSS 代码。该扩展程序最初由 Nicolas Huon 为 Firefox 开发，然后又为 Chrome 网上应用店开发。该扩展程序节省了大量开发人员的时间，因为他们无需查找特定元素的代码。该扩展程序需要用户数据和其他某些权限，这可能会导致数据泄露或勒索攻击。