2020 年面向网页设计师的 15 大 Google Chrome 扩展程序

Google Chrome 是目前最受认可的网络浏览器，并不是因为它是由 Google 单独构建的。 它在网络浏览器市场份额排行榜上稳居领先地位，领先最接近的竞争对手 Mozilla Firefox 45% 以上。 它与 WebKit (Safari) 一起在移动网络浏览器市场处于领先地位，WebKit (Safari) 是 iOS 版的 Chrome。 Chrome 以其坚实而稳定的 JavaScript 引擎而闻名，该引擎支持大量技术。 最值得注意的是，Node.js 框架基于支持 Google Chrome 的引擎。

Chrome 为自己赢得了各种声誉； 一些人选择归咎于缺乏安全性和深入的工具。 但是当涉及到更大的图景时，很难想象出比 Chrome 更好的浏览器。 速度、可扩展性、性能以及诸如开发人员工具之类的东西使 Web 设计人员和 Web 开发人员都坚持使用 Chrome 来制定长期战略。

关于 Google Chrome 扩展程序的安全性和隐私性的讨论很多。 但是，归根结底是从真正想要为社区提供一些好处的值得信赖的开发人员和初创公司谨慎选择扩展。 Chrome 功能的扩展为开发人员提供了必要的工具包和功能来构建扩展，这有助于提高生产力，更重要的是，在浏览器中构建事物的可访问性更高。

前端开发人员是使用 Chrome 的最大赢家之一，因为它在为浏览器和移动网络构建网站和应用程序时提供了非常流畅的类似 IDE 的体验。 我们将为设计师介绍最棒的 15 个 Google Chrome 扩展，其中一些开发人员可能也会觉得有用。 该列表是公正的，基于设计师在当今网络上一些最流行的社区论坛上分享的研究。

用户代理切换器

用户代理是您在对页面发出的每个新请求中发送的指纹。 然后，该网站可以检测您的用户代理，并根据您的浏览器功能为您提供适当版本的网站。 这是网站确定某人是从桌面设备还是移动设备浏览网站的标准技术。 User-Agent Switcher 扩展可让您将 User-Agent 更改为任何其他浏览器或移动设备，让您快速试验您的设计在这些设备和浏览器上的显示方式。 这是一个很小的扩展，具有强大的功能，可以帮助开发人员通过节省时间来回切换来提高生产力。

全页

当您进行网页设计或想要捕获网站的全屏以展示您的客户时，GoFullPage 是您的最佳选择。 对于网页设计师来说，这个简单易用的 Chrome 扩展程序是不言自明的。 简而言之，该工具会完整捕获您正在查看的当前页面。 您只需点击按钮即可，无需检查任何其他选项。 除此之外，您还可以使用键盘快捷键使 GoFullPage 工作。

您将看到此扩展程序逐个捕获页面，然后打开一个新选项卡，您可以从中下载图像（PNG、JPG）或 PDF。 当然，您可以将其拖放到桌面上。 无论是简单的博客还是复杂的网站或在线商店，GoFullPage 都能轻松捕捉一切。

救援时间

在进行网页设计时，时间很重要。 毕竟，你不想花太多时间专注于分心，当你可以做更多高质量的工作时。 借助 Chrome 扩展程序 RescueTime，您可以跟踪一整天在 Chrome 中花费的时间。 你有生产力还是没有生产力？ RescueTime 将帮助您解决问题，因此您可以相应地管理您的时间。

这不仅仅是关于您花费在每个网站上的时间跟踪。 RescueTime 还将页面归类为“非常高效”和“非常分散注意力”。 此外，它甚至可以识别您何时离开计算机——在这种情况下，它会停止跟踪。 如果您想知道自己每天在 Chrome 中都在做什么，RescueTime 将帮助您更好地了解自己花了多少时间工作以及有多少时间“只是检查一下”。

清除缓存

虽然 Chrome 有自己的功能，但您可以在使用清除缓存扩展程序清除缓存时加快速度。 您只需单击一下即可将其添加到 Chrome 并立即开始使用。 清除缓存时，该工具不会要求额外确认、创建弹出窗口等。 但是，如果您想全局删除所有数据，则需要额外的权限。 毕竟，您不想意外清洁所有东西。

此外，您可以轻松指定要清除的内容，例如应用程序缓存、cookie、下载、表单数据、历史记录、本地存储等。 您还可以设置清除数据时要包含或排除的域。 Clear Cache 也支持时间段。 快速而直接，这在通过屋顶提升您的工作流程时最重要。

统治者

您想要一个虚拟标尺来帮助测量网站上的元素吗？ 如果是这种情况，Ruler 是实用的 Chrome 扩展程序，可以发挥魔力。 作为一个网页设计师，这个工具在计算每个元素的大小时可能会非常有用，因为你可以测量每个页面上的任何东西，只用你的鼠标技能。

您可以将标尺添加到站点并以像素为单位测量元素。 此外，您还可以将鼠标光标用作标尺，这样您就可以绘制要测量的特定形状。 您将在页面本身上以像素为单位找到有关大小和尺寸的所有必要信息。 只需添加扩展程序，然后单击出现在右上角的按钮。 就是这样，您现在拥有了一个用于测量页面、元素和组件的虚拟标尺。

窗口调整器

Window Resizer 扩展在所有技术社区拥有超过 500,000 多个活跃用户，可帮助设计人员欺骗不同类型的分辨率，以更好地了解这些分辨率如何与您的设计交互。 建立一个适用于大多数人口的网站至关重要。 此扩展可帮助您查明可能开始发生错误的位置，因此您可以及时进行任何必要的代码更改。 您可以快速更改浏览器窗口的宽度和高度、它所在的位置，并且有一个内置的短代码功能，可以大大提高您在进行实时编码时检查不同屏幕分辨率的能力。

什么字体

有数以百万计的活跃网站，以及我们每天访问的大量新网站，总有一些东西吸引我们的眼球，一个特定的小部件或动态功能，或者一个看起来很出色的特定字体，但我们无法查明它的名称。 使用 WhatFont 扩展程序，您可以快速检查任何给定网站页面上的字体并快速了解字体的名称，以便您可以开始搜索它。 除此之外，WhatFont 还有助于了解用于提供字体的服务类型，以防它们来自 Google Fonts 或 Typekit 等高级或免费服务。

标签打包器

设计师，甚至开发人员，都在努力保持他们的标签整洁有序。 在进行设计工作时，我们会不断查看其他来源、研究内容、灵感工作以及如何完善我们的设计的示例，而这些选项卡往往会堆积得相当快！ 使用 Tab Packager，您现在可以享受将所有标签打包在一个 URL 中的简单方法，然后从该 URL 访问它们。 这提高了生产力，因为我们可以不断返回到我们的列表并快速获取我们需要的内容，而不是浏览标签猜测每个标签包含的内容。

CSS-Shack

Photoshop 不是处理图层的唯一工具。 事实上，每个前端开发人员都必须在他们的 CSS 配置中处理层。 这个面向网页设计师的 Chrome 扩展程序可帮助您创建样式层，然后将这些层导出到您的 CSS 文件中以便于访问。 只需单击几下，您就可以快速构建设计、线框或按钮等简单元素。 无论是随机实验和沙盒测试，还是您正在尝试构建的完整样式指南，CSS-Shack 都提供了在这些部门为您提供帮助的工具。

平面颜色指南

使用 FLAT 样式指南构建新的网页设计，但不确定要使用的正确颜色代码？ 使用简单的平面颜色指南扩展，担心很快就会消失。 安装扩展程序，只需单击扩展程序按钮即可加载通常用于 FLAT 设计的颜色。

彩色Zilla

ColorZilla 在 Mozilla 浏览器上拥有数百万活跃用户。 最后，还提供了 Google Chrome 扩展程序，它已经积累了超过 800,000+ 的活跃用户。 使用 ColorZilla，您可以快速评估任何给定页面上的颜色。 您可以使用这些颜色来优化它们并将它们加载到您用于构建设计的任何其他工具中。 轻松访问页面内单个像素的颜色，在任何情况下为您的颜色提供正确的深度。 快捷方式可实现更快的颜色操作和优化。

造型机器人

Stylebot 是一种实时编辑工具，用于操作您当前浏览的任何网站和元素的 CSS 代码。 您可以使用 CSS 快速选择单个元素并更改外观。 使用自动内置工具更改您喜欢的任何内容，或编写您自己的 CSS。 这有助于您了解有关 CSS 的更多信息。 它还让您了解实时编辑的工作原理，以及您可以以多快的速度创建所需的设计更改。 拥有超过 150,000 多个用户，这是每个网页设计师应该在他们的工具包中拥有的扩展。

享受CSS

EnjoyCSS 是一个直接在您的浏览器中的网页设计套件工作室！ 它是一个直接的 CSS3 生成器，可让您管理自己选择的任何元素的 UI 设置。 创建过渡、变换元素、处理渐变、阴影等等。 EnjoyCSS 也有一个预先构建的转换库，你可以直接应用到你的元素上。

艾米特现场风格

当您在文本编辑器中编辑 CSS、LESS 或 SCSS 文件时，Emmet LiveStyle 会立即更新您的网页样式表。 无需保存文件或重新加载页面：纯实时体验！ 这是第一个以正确方式将更新从 DevTools 传输回源代码的工具。 这个扩展的很多评论都提到他们无法想象没有这个工具的网页设计工作流程。

Web开发人员

Mozilla Firefox 有自己的开发工具，就像 Google Chrome 一样。 近年来发生的事情是，许多 Firefox 用户已切换到 Chrome。 但还是感觉特定部门缺少或缺少某些功能。 切换人员的最大损失之一是 Mozilla 开发人员工具的丢失。 由于对它的需求如此巨大，一些开发人员聚集在一起并为 Chrome 构建了 Firefox Dev Tools 的精确镜像。 已有超过 100 万活跃用户，对于希望扩展浏览器工具包以在实时环境中处理网页设计的成熟和有抱负的设计师来说，此扩展程序取得了巨大的成功。