/8款Chrome扩展程序任你挑
最新文章2023-05-19

8款Chrome扩展程序任你挑


想要快速、简便、一开即用的设计工具

却种类太多挑花了眼？


那么今天我们就总结了

8款Chrome扩展程序供大家选择。


打开网页即可进行设计

同学们一定值得拥有！！！


01

VisBug

程序添加网址：https://chrome.google.com/webstore/detail/visbug/cdockenadnadldjbbgcallicgledbeoc

VisBug是一款使用JavaScript构建的调试和编辑网页的工具。通过VisBug，我们可以编辑实时网页，就像在Figma或Sketch等设计应用程序中一样进行操作。


除此之外，我们也可以更改页面的任何文本、交换图像、将任何元素移动到任一位置、获取CSS信息等。通常在大家安装之后，按下AltShift D启动，之后我们将看到VisBug的主界面显示在屏幕左侧的工具栏。

Pros：
VisBug预设了很多快捷键，使用起来非常高效，也十分适合Web设计者。

Cons：

仅适用于已编辑制作的网站或模板，无法支持全新的网页构建。


02

SEO Pro Extension

程序添加网址：

https://chrome.google.com/webstore/detail/seo-pro-extension/lajfdngpocmchpihjecojjllfjeehgnl

在我们设计产品或进行用户体验时，有时需要检查自己维护页面的SEO数据。这款扩展程序可以很好地帮助我们检查和分析有关自己网站的主要SEO信息，以提高其在搜索中的性能。
通过使用SEO Pro Extension，我们可以进行检查标题及其长度、URL和元规范URL、结构化数据等一系列操作。此外，它也包含了一些附加功能：以CSV文件格式导出数据、突出显示未关注链接以及其他SEO工具的快速链接。

在UX/UI设计方面，SEO Pro Extension所具备的“图像”选项卡可以允许网站上的图像替代文本，轻松检查页面上是否所有图像都有正确的ALT文本。而在最新的一次更新中，它也增加了显示Core Web Vitals (网络核心数据）的功能。

Pros：
SEO Pro Extension精简了设计流程，易于导航。


03

CSS Peeper

程序添加网址：

https://chrome.google.com/webstore/detail/css-peeper/mbnbehikldjhnfehhnaidhjhoofhpehk?utm_source=chrome-ntp-icon

CSS Peeper是为设计师量身定制的CSS查看器。使用这款扩展程序，我们能够以最简单的方式查看代码，并检查Web上对象、颜色和资产的隐藏CSS样式。如果我们想要立即查看某个内容，就可以选择网站上的任何对象以获得良好的范式，其中也包含一些我们在Sketch或Photoshop中可以轻松使用的属性。
此外，CSS Peeper允许我们以视觉化的方式快速查看整个网站上使用的配色、各部分使用的字体大小、行高、字型等内容，同时也可以帮助我们提取嵌套在代码深处的一些内容。

浏览调色板

立即查看

导出嵌套内容
Pros：
无需挖掘代码，非常清晰简洁，对产品和UI来说非常有帮助。

04

Magic CSS

程序添加网址：

https://chrome.google.com/webstore/detail/live-editor-for-css-less/ifhikkcafabcgolfjegfcgloomalapol

这款扩展程序可以帮助我们实时编辑代码。Live editor for CSS, Less&Sass-Magic CSS提供了一个弹出式控制台来帮助我们写下CSS/Less/SaSS代码，同时会帮助我们将这些代码保存在浏览器扩展的存储空间或站点的本地存储中。
此外，通过使用Live editor for CSS, Less&Sass-Magic CSS，我们无需刷新页面即可测试自己的代码，也可以在任何网站上更改CSS代码。

Pros：
大大提高了开发速度，且可以在网站上自动启动。




05

ColorZilla

程序添加网址：https://chrome.google.com/webstore/detail/colorzilla/bhlhnicpbhignbdhedgjhgdocnmhomnp?utm_source=chrome-ntp-icon

早在正式登陆Chrome之前，ColorZilla就作为FireFox上最流行的取色工具在前端设计师之间盛行开来。如今，ColorZilla可以帮助Web开发人员和图形设计师完成与颜色相关的任务。它包括填色选择器、滴管、渐变生成器和许多其他的高级颜色工具。
通过使用ColorZilla，我们可以从浏览器的任何位置获取颜色读数，快速调整该颜色并将其粘贴到另一个程序之中。值得我们注意的是，在使用ColorZilla前需要“访问所有网站数据”的权限，才能实现其基本功能。

Pros：
ColorZilla具有一系列简单的功能插件，同时使用过程流畅无闪退。

Cons：

稍稍占据内存，并需要权限设置。



06

Lighthouse

程序添加网址：https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk

Lighthouse是由Google提供的一款开源自动化工具，用于提高Web应用程序的性能、质量和正确性。通过这款扩展程序，我们可以检查网站的渲染性能、可访问性程度和SEO性能。
对于想要提高网站性能的用户体验设计师来说，Lighthouse是一款非常好的工具。此外，在审核页面时，它会针对该页面运行的一系列测试，生成相应报告。在进行这一操作时，我们可以使用失败的测试作为改进应用程序的指标。

Pros：
Lighthouse是一款很好用的评估工具，可以检查网页的优化点。

Cons：

其测试环境比较单一，在测试时会产生波动，数据只能反映当前时刻的效果。



07

View Image Info

程序添加网址：

https://chrome.google.com/webstore/detail/view-image-info-propertie/jldjjifbpipdmligefcogandjojpdagn?utm_source=chrome-ntp-icon

View Image Info是一款超级简单的扩展程序，用于显示图像文件的基本信息，即：文件路径、尺寸、文件类型和大小。在使用过程中，我们只需通过右键即可获取图片的这些信息。

单击右键以“查看图像信息”

查看图像以显示基本信息

Pros：
非常好用，且可以自定义文本。




08

Window Resizer

程序添加网址：

https://chrome.google.com/webstore/detail/window-resizer/kkelicaakdanhinjdeammmilcgefonfh?utm_source=chrome-ntp-icon

Window Resizer可以调整浏览器窗口的大小，以此来模拟各种分辨率。此外，它也提供了许多预设选项，而我们也可以创建和储存自定义设置。Window Resizer也为响应式设计提供了各种选项。
在使用过程中，我们可以设置窗口的宽度/高度、窗口的位置、预设图标，甚至可以选择新尺寸应用于整个窗口或仅应用于视口。除此之外，Window Resizer还具有可自定义的全局快捷键、导出设置并将其导入另一台设备的选项。

弹出窗口包含一个可以快速调整窗口或视口的表单

可重新调整大小的工具

Pros：
必备扩展程序，可以灵活且有效地调整窗口大小。

Cons：

在全屏状态下可能出现超分辨率预览的情况。


对于以上这8款Chrome扩展程序，同学们有没有心动的呢？感兴趣的话就不妨去亲自体验一下吧。

TIPS:
文中提及所有扩展程序，均以其在应用商店中的推荐星级排列。

编辑：YAN
图文信息来源于网络，侵权告知即删
原文链接：
https://medium.muz.li/12-essential-chrome-extensions-for-designers-1877e2a0d700


本文来自微信公众号“交互设计小站”（ID：racjiaohu）。大作社经授权转载，该文观点仅代表作者本人，大作社平台仅提供信息存储空间服务。

TAGS:

相关文章