分享 4 个前端开发必备的 Chrome 扩展

作为开发人员，每天都有使用浏览器做各种事情，如从谷歌搜索、在 Stack Overflow 上寻找问题的解决方案、到在 Reddit 上浪费时间等等。除了查找问题答案的资源之外，作为开发人员需要有提高工作效率的工具集，本文分享四个提高工作效率的 chrome 扩展，而这些扩展实际上也是可以扩展到 360 浏览器的。

axe DevTools

Web 可访问性测试工具，可访问性应该是任何 Web 开发人员的首要任务之一。可能大部分人都熟悉 Chrome 的内置 Lighthouse ，有着各种参数可以在网站上进行测试，而 axe DevTools 也是一个不错的可用性测试的工具。

这是一款使用 Deque 开发的 axe-core 可访问性引擎的快速、轻量级和强大的测试工具。

特征：

• 智能引导测试：可以使用简单的 QnA 格式进行更高级的测试，它在后台使用机器学习来快速识别和修复问题。

• 组件级测试：如果想测试网页元素的特定部分，这是个不错的功能。

• 导出、保存和共享：可以轻松地与团队共享测试结果。

Eye Dropper

这是一个开源扩展，作为前端开发人员，很快想知道某些其他网站在其元素之一中使用什么颜色或十六进制代码，这个扩展就非常有用。不仅可以从网页，而且还可以从颜色选择器中选择颜色以进行更精细的控制。

特征：

• 从网页中选择一种颜色：当选择一种颜色时，它会自动将其十六进制代码复制到剪贴板中。

• 从颜色选择器中选择一种颜色：借助其集成的颜色选择器，可以手动找到需要的颜色以及不同的颜色值。

• 从历史中选择一种颜色：选择的每种颜色都将像调色板一样存储，以便稍后回来时，所有颜色都触手可及。

• 开源 ：所有代码都在其 GitHub 存储库中开源。

daily.dev

Daily.dev 是一个 Chrome 扩展程序，它带有一个包含技术和开发世界中所有最新和最伟大内容的 feed，feed 根据喜好进行个性化设置，来自世界各地的开发人员可以通过此方式节省大量时间。

不必从一个新闻/博客位置跳到另一个位置，全世界有超过 100K 的开发人员在使用它！

特征：

• 精选资源：对喜欢的某个网站有偏好吗？从 400 多个来源中挑选它并仅从这些来源中获取内容！

• 标签：开发世界中所有最热门的话题都按标签分组，因此如果只想了解 #cloud、#javascript 和 #frontend，那么 feed 将使用这些进行个性化。

• 不要错过任何一个趋势：一旦在网站上发布了全新的内容，就会得到全新的内容。Daily.dev 获取这些信息，并将其展示，以便能够获得最新的消息!

• 社区：这是 daily.dev 与其竞争对手的不同之处，有一个由学习者、开发者和其他人组成的完整社区，可以在其中评论他人的文章、在社交媒体上分享，甚至为最喜欢的文章添加书签。

SVG Gobbler

有没有想过在最喜欢的网站上使用这些图标、图像或其他资产，例如插图？如果有一个简单的工具，可以轻松地一次提取所有这些内容会怎样？

好吧，SVG Gobbler 扩展可轻松完成所有这些工作，可以下载、优化和转换图标、徽标和矢量 SVG 的代码。

特征：

• 优化 SVG 内容：使用 SVGO 可以优化从网站或上传内容中选择的 SVG。

• 转化为 React 代码：可以快速将 SVG 转化为 React 组件代码。

• 导出选项：可以将所有 SVG 和 PNG 导出为多种尺寸。

• 快速设计工具集成：当选择喜欢的 SVG 元素时，可以简单地将其复制并粘贴为任何喜欢的设计工具（如 Figma、Sketch 或 Framer）中的矢量。

总结

扩展可以让开发工作变得更轻松，就像本文列出的扩展一样，这些扩展可以安装到支持的浏览器上，如 360 浏览器、Opera。