10 款适合前端爱好者的 Chrome 扩展程序👨‍💻

由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！

市面上有很多面向网页开发者的 Chrome 扩展程序。有些侧重于调试，有些则专注于前端开发。但我本人和你一样，也是个前端爱好者，所以我安装了以下这些扩展程序，既用于工作也用于娱乐！

这些扩展程序适用于前端开发人员和设计师。以下是前端爱好者必备的最佳 Chrome 扩展程序列表……

1️⃣ kepi.cz 出品的滴管

Eye Dropper 是一个开源扩展程序，允许您从网页、颜色选择器和您的个人颜色历史记录中拾取颜色。

当然，还有其他一些工具可以完成同样的任务，比如 ColorZilla、Simple Color Picker 等。我喜欢这款工具的原因是它是开源的，而且我可以用键盘快捷键来使用它Alt+P。

需要注意什么？

1. 快捷易用
2. 将调色板导出为 CSV 文件
3. 提供多种格式的颜色信息，例如十六进制、HSL、RGB 等。
4. 内置调色板。

2️⃣ Kontrast - Kontrast 出品的WCAG 对比度检查器

在浏览器中实时快速检查和调整对比度，以满足 WCAG 2.1 要求。

UI设计师必备。高级版为这款原本就很强大的扩展程序增添了更多功能。

需要注意什么？

1. 自动检查所选元素的对比度并调整对比度
2. 显示WCAG 可访问性比率
3. 内置颜色选择器

3️⃣ ArgyleInk 的VisBug

开源浏览器设计工具

它功能强大，从显示 CSS 属性到实时移动网站的不同模块，应有尽有！请看下面的内容……

需要注意什么？

1. 您可以像编辑画板一样编辑任何页面。
2. 编辑任何文本，替换任何图像
3. 通过这种方式，您的所有 CSS 代码和 Sketch 工作都将通过浏览器途径进行。

4️⃣ WhatFont由 chengyinliu.com 提供

识别网页字体的最简单方法。

这是回答“这里用的是什么字体？”这个问题的最佳方法之一。只需点击两下，就能了解该字体的所有信息。

需要注意什么？

1. 单击一次即可显示字体名称，再次单击即可显示所有必要信息。
2. 显示整个字体系列、字重、样式、大小等信息
3. 它允许您通过 Twitter 与他人分享字体。

5️⃣ BrowserStack Local（由 browserstack.com 提供）

BrowserStack Local 允许您在 700 多个真实的桌面和移动浏览器中测试本地服务器以及 HTML、CSS 和 JS 文件，支持 11 个操作系统。

从技术角度来说，BrowserStack 是一款应用程序，它以在各种设备（包括桌面和移动设备）上测试网站而闻名。这使您可以即时配置和测试本地内部服务器，以及包含 HTML、CSS 和 JavaScript 文件的本地文件夹。

需要注意什么？

1. 响应式设计爱好者的必备之选
2. 能够高效地测试本地文件，也适用于远程浏览器。
3. 内置调试工具和屏幕截图功能

6️⃣ Muzli 2 -通过https://muz.li保持灵感

汇集全网最新最全的设计和交互相关链接。设计师必备！

这款应用会将您的新标签页替换为来自世界各地设计师社区的最新精选内容。它由 Invision Studio 和 Freehand 的开发团队倾力打造。相信他们所说的“设计师必备！”吧！

需要注意什么？

1. UI、UX 和交互设计领域的最新精选和热门推荐
2. 由专业人士精心挑选的“Muzli Picks”特别推荐
3. 它拥有类似Opera 浏览器的快速拨号功能，能够从信息流中下载调色板，以及一个专门用于 UI 和设计的专用搜索引擎！

7️⃣ chrisgallello 的用户体验检查

对您的网站进行启发式评估

就这么简单！这样你就可以手动诊断网站，并根据不同的用户体验类别（例如可见性、错误检查、灵活性和可访问性等）做笔记。

需要注意什么？

1. 快速简便的启发式评估
2. 添加备注和屏幕截图
3. 导出为 docx 文件

8️⃣ CSS Scan由 getcssscan.com 提供

快速检查和复制计算出的 CSS

这可能是目前最成熟的 CSS 检查器了。虽然是付费的，但它功能非常强大，从 HTML 类到状态，几乎涵盖了所有方面。你可以在他们的网站上:hover试用。此外，它还有专业版可供选择。

需要注意什么？

1. 复制任何元素的全部 CSS 规则
2. 随时获取所有动态样式
3. 使用快捷键会更好

9️⃣ mitch.works 的关键帧

浏览器内CSS动画创建器。

我在 2018 年在 Medium 上专门写了一篇文章来探讨这个问题……

使用关键帧为网页元素制作动画 |通过瓦伊巴夫·库尔贝 |代码突发

Vaibhav Khulbe ・2018年7月5日・

codeburst.io

🔟 Wappalyzer，来自 wappalyzer.com

识别网络技术

深入了解网站所使用的技术。适用于大多数网站。

需要注意什么？

1. 检测网站中使用的所有组件，从分析工具到内容分发网络 (CDN) 均有涵盖。
2. 您可以固定一组特定的工具/技术
3. 其网站提供更多功能

4️⃣个额外扩展！🤩

这些工具并非只适用于前端爱好者。任何开发人员/技术人员都可以使用它们：

1. Elocance——只需单击一下，即可将任何网页文章或文档转换为音频。

2. Grepper——面向程序员社区的查询和答案系统

3. Octotree——功能更强大的GitHub

4. 精简版 GitHub - 简化 GitHub 界面并添加实用功能

啊，IntelliSense！没有你我​​们该怎么办？点击此处了解更多关于@Code的“自动完成”功能：https://t.co/EQkQuM1kzi

来源：https://t.co/2DwHAUGuA8 @VisualStudio #DevHumour #Programming #ICYMI pic.twitter.com/RqdJNHGCIU

— Microsoft Developer UK (@msdevUK) 2020年2月23日

📫 订阅我的每周开发者简讯 📫

PS：从今年开始，我决定在 DEV Community 上发表文章。之前我是在 Medium 上写作。如果有人想看看我的文章，这是我的 Medium 个人主页。