超实用！设计师必备的 22 款 Chrome 浏览器插件，提升工作效率

Angel Wang・2021-09-08

身为设计师的你常用 Google Chrome 作为你的主要浏览器吗？那你别忘了下载 Chrome 浏览器的插件小工具来帮助你提升设计的生产力及工作效率！以下我们整理了设计师爱用且必备的 Google Chrome 浏览器扩展插件，你可以通过它们：

查看网站字体、字型样式、大小
在网站上自动检测颜色色码
一键下载网页上所有的图像
收集、撷取喜爱的浏览器页面

以下推荐的所有 Google Chrome 浏览器扩展都是免费的，可从 Chrome 在线应用商店下载！祝浏览愉快！

1. ColorZilla

Image from ColorZilla

图像来源：ColorZilla

想要轻松不查 code 的情况下知道网页上颜色的色码吗？ ColorZilla 可以帮助你快速侦测网页上所有的颜色，包括颜色撷取、颜色滴管、渐层…等许多其他颜色功能。也可以快速调整颜色细节，并将色码复制粘贴到其他地方，还可以建立符合 CSS 渐层的语法。

2. Dark Reader

Image from Dark Reader

图像来源：Dark Reader

身为设计师长期盯着计算机是一件无法避免的事情，你是否对于萤幕的亮度很困扰呢？这个 Dark Reader 的浏览器插件就是你必下载的护眼神器，它可以帮助你把网站自动调整成夜间模式，并反转明亮的颜色，让你在夜晚时更容易阅读，不伤害眼睛。你也可以针对你自己的需求调整亮度、对比度、套用棕褐色滤镜、深色模式、配置字体等功能。

3. SVG Grabber

Image from SVG Grabber

图像来源：SVG Grabber

你希望拥有一些网站上很酷或是特别的 logo 吗？原本取得 logo 的方法是到开发人员工具→检查代码→一条又一条地看→下载，这不仅花费很多时间，还超麻烦！有了 SVG Grabber ，现在你只需要点击一下按钮，即可快速预览、下载和复制网站上所有 SVG logo 和插图的 code。

4. Window Resizer

Image from Window Resizer

图像来源：Window Resizer

想要通过调整浏览器窗口的大小模拟各种萤幕的分辨率吗？这个 Windows Resizer 对于网页设计师来说是一个超方便的工具，能够在不同浏览器的分辨率下测试设计图。它的分辨率的选项可以依照你的需求客制（增加/删除/重新排序）。你可以设置浏览器窗口的宽度、高度、窗口的位置、图标…等，调整符合你的手机、平板计算机和计算机的设计图。

5. ColorPicker

Image from ColorPicker

图像来源：ColorPicker

如果你正在寻找一个快速且简单上手的彩色滴管工具，那么 ColorPicker 可能是你正在寻找的工具。它有将网页区域放大、缩小的放大镜功能，可以轻松显示颜色的细节，还可拖动鼠标进行微调， ColorPicker 可以满足你在网页设计工作上面对颜色像素细节的需求。

6. Whatfont

Image from Whatfont

图像来源：Whatfont

如果你想要徒手不靠工具之下，就辨识的出网页上的字体，要花上不少时间，若你没有经验，这个难度简直是天方夜谭！ Whatfont 可以帮助你轻松且优雅的辨识出字体，你只需将鼠标停留在你感兴趣的字体上，答案就一目了然。

7. CSS Peeper

Image from CSS Peeper

图像来源：CSS Peeper

你有没有想过网页上的按钮大小、字体、样式是什么？你还在用开发者工具一一检查它们吗？ CSS Peeper 是为设计师量身打造的 CSS 检测器。只要移动鼠标，即可查看网页上的物件、颜色和元素的 CSS 样式。

8. Eagle

视频来源：Eagle

作为一名设计师，我们喜爱搜藏及保存漂亮的图像或任意的浏览网页寻找灵感。然而，你是否厌倦了一张一张的下载图像？或者有时你遇到了禁止右键下载的的网页？ Eagle 可帮助你轻松地解决全部问题，它支持一键下载该网页上所有的图像，你还可以随意的萤幕截图不同大小，最重要的是帮助你在下载图像的同时，一次整理它！

当存储图像时，Eagle 还会自动帮助你记下 URL，未来当你突然想重新访问下载图像的网页时，你就不会无头绪啦！

PS：你必须下载 Eagle App 才能充分使用浏览器扩展功能。

9. Mobile Simulator

Image from Mobile Simulator

图像来源：Mobile Simulator

你的工作需要一直查看移动端网站分辨率吗？ Mobile simulator 允许你在计算机版中轻松测试。您可以利用这个插件测试所有不同的手机和平板计算机型号。如果你需要与团队讨论工作成果，可以导出 PNG 格式，将文件插入电子邮件、PPT 里轻松展示。

10. Page Ruler Redux（已被移除）

Image from Page Ruler Redux

图像来源：Page Ruler Redux

你想知道网页上的像素尺寸和元素大小吗？ Page Ruler Redux 可以帮助你快速取得网页像素和元素大小。它通过虚线的尺来帮助你测量，你可以用鼠标调整尺的大小以符合你的需求。在边缘也提供定位线，帮助设计师们轻松定位。

11. Image Downloader

Image from Image Downloader

图像来源：Image Downloader

想从网页下载图像吗？像 Eagle ，这款也是一个图像下载工具，当你看到喜欢的任何灵感或图像时，只需点击一下即可随心所欲地下载它们！若遇到太多想要下载的图像时，通过 Image downloader 的筛选器，可以筛选出图像的宽度、高度或 URL，找到你想要下载的目标图像！

12. Fonts Ninja

Image from Fonts Ninja

图像来源：Fonts Ninja

Fonts Ninja 是另一款很棒的字体辨识工具，可以直接告诉你网页上所有字体的样式、CSS 属性并提供有关字体的信息，甚至是价格！特别的是，你可以在插件中为网站上找到的字体增添书签，未来如果要使用相同字体时，利用书签就可以直接找到，帮助你加快设计的工作流程。

如果你想在绘图软件中使用在网站上发现的字体，你可以下载它们的 macOS/Windows 应用进程，帮助你同步使用新发现的字体。（支持：Illustrator、Photoshop、Figma）。

13. Loom

Image from Loom

图像来源：Loom

俗话说「一画胜千言」，那么一个视频又传递了多少讯息呢？Loom 是一个免费的萤幕录影扩展插件，你可以一键录制动效、用户使用流程、产品实测、给予回复、检测 Bug 等，并立即分享给你的同事或朋友，加速你们的沟通效率！甚至还可以用于会议纪录，让你不用再打下一堆文本，是不是超方便！

身为一个设计师，你永远不会对新的灵感说不！这里我们推荐 Muzli Chrome 扩展插件，让你每天打开浏览器就能看到最新、最潮流的设计作品集，内容包括摄影作品、平面设计、界面设计等等，轻松收集世界各地设计师的最酷创作！不仅如此，他还可以跟 Dribbble、Designer News、Sidebar、CSS Winner、The Next Web 等设计类媒体平台集成在一起，省下浏览各家网站的时间！