面向 Web Designers 的 Chrome Extensions
网页设计离不开浏览器。无论您是在构建布局、挑选颜色、测试响应式效果,还是检查排版,合适的 Chrome 扩展程序都能为您节省在设计工具和浏览器之间来回切换的时间。以下是 2025 年网页设计师必备的扩展程序。
色彩工具
ColorZilla
ColorZilla 是最受欢迎的取色扩展程序,这并非没有道理。它包含高级吸管工具、拾色器、渐变生成器和调色板查看器。点击网页上的任意像素,即可获取其精确的 hex、RGB 或 HSL 数值。它还会记录最近选取的颜色历史,这在处理设计系统时非常有价值。
优点:取色精准、具备渐变生成器、颜色历史记录、适用于包括图像在内的任何元素。
缺点:界面看起来有些过时,偶尔在 iframes 上会出现问题。
CSS Peeper
CSS Peeper 采用了不同的方式——它不依赖 DevTools,而是通过覆盖一个简洁的面板,显示您悬停的任何元素的颜色、字体和尺寸。它就像是一个专注于设计的浏览器检查器。您可以直接从任何页面导出调色板和资源列表。
优点:界面美观、视觉检查快速、支持导出调色板。
缺点:有时无法识别伪元素,不支持渐变检测。
响应式设计测试
Responsive Viewer
Responsive Viewer 让您可以同时预览多种屏幕尺寸下的设计效果。无需反复调整浏览器窗口大小,您可以看到一个设备网格——包括 iPhone、iPad、桌面端和自定义尺寸——所有设备都会实时渲染您的页面。您还可以跨所有视口进行同步截图。
优点:同时查看多个视口、支持自定义设备配置文件、支持截图导出t。
缺点:在开启多个视口时可能会占用较多资源,部分 CSS 的渲染效果可能与真实设备略有差异。
Window Resizer
Window Resizer 的功能更简洁:只需点击一下,即可将浏览器窗口调整为常见的屏幕尺寸。虽然功能不如 Responsive Viewer 丰富,但在进行快速检查时,它更轻量、更快捷。
字体与排版识别
WhatFont
WhatFont 可以通过鼠标悬停在文本上来识别网页上的字体。它会显示字体族、字号、字重、行高和颜色。它还能检测通过 Google Fonts、Typekit 以及其他 Web 字体服务加载的字体。当你看到心仪的字体并想知道它是什么时,这款工具必不可少。
优点:即时识别字体,支持检测 Web 字体服务,显示完整的 CSS 字体堆栈。
缺点:无法显示所有排版属性,如字间距(letter-spacing)或文本转换(text-transform)。
Fonts Ninja
Fonts Ninja 更进一步,允许你直接在页面上测试字体。它不仅能识别字体、显示价格和购买链接,还能让你在任何文本元素上尝试替换其他字体。对于字体发烧友来说,这简直是梦幻般的扩展程序。
CSS 检查与调试
VisBug
VisBug 是由 Google 开发的一款内置于浏览器的设计工具。它允许你通过键盘快捷键和拖拽操作,直接在页面上微调、缩放和移动元素。你可以编辑文本、调整间距、更改颜色,并获得即时的视觉反馈——完全无需打开 DevTools。
优点:直接操作页面元素,非常适合快速进行视觉实验,由 Google 开发。
缺点:更改内容不会保存到代码中,且需要一定的学习成本来掌握键盘快捷键。
Pesticide
Pesticide 会用彩色边框勾勒出页面上的每一个元素,让你能轻松查看盒模型(box model)、发现对齐问题以及查看底层布局。
stand 布局结构。它非常简单——一键开启,一键关闭——并能立即显示布局问题。Design System 和资产工具
SVG Gobbler
SVG Gobbler 可以查找并让你下载任何网页上的 SVG 资产。它能检测页面源代码、内联 SVG 和背景图像中的 SVG,然后将它们呈现在一个整洁的图库中,方便下载或复制。对于研究其他网站如何实现图标系统非常有用。
Muzli
Muzli 会将你的新标签页替换为来自 Dribbble、Behance、Awwwards 和各大设计博客的精选设计灵感源。这是一种无需主动浏览多个网站即可紧跟设计趋势的被动方式。
按角色推荐工具包
| 角色 | 必备扩展程序 |
|---|---|
| UI Designer | ColorZilla + WhatFont + CSS Peeper + Responsive Viewer |
| UX Designer | Responsive Viewer + VisBug + Pesticide |
| Design System Lead | CSS Peeper + ColorZilla + SVG Gobbler + Fonts Ninja |
| Freelance Designer | ColorZilla + Responsive Viewer + WhatFont + Muzli |
如何充分利用这些工具
给使用 Chrome 扩展程序的设计师的几个实用建议:
- 按工作流程对扩展程序进行分组:使用 Chrome 内置的扩展程序分组功能,仅在进入设计模式时启用设计工具。
- 与 DevTools 配合使用:扩展程序是对 DevTools 的补充,而非替代。在学习这些工具的同时,也要掌握 CSS 面板、计算样式 (computed styles) 选项卡和元素检查器。
- 截图并记录:当你发现喜欢的设计模式时,使用 Responsive Viewer 的截图功能将其捕获,存入你的参考库中。
在我们的 developer tools 分类,或者查看我们针对特定推荐的 精选最佳列表。