面向 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 分类，或者查看我们针对特定推荐的 精选最佳列表。