每个开发者都应该拥有的 Chrome 扩展程序

昨天，我和一位开发者在 Google Meet 上通话。通话过程中，她需要向我展示她 GitHub 个人资料上的一些内容，于是分享了她的屏幕。我注意到的第一件事是她的 GitHub 处于黑暗模式。我心想，这有多酷？我一直讨厌浅色模式。它让我头疼。于是我问她，你是如何在 GitHub 个人资料上实现黑暗模式的？然后她告诉我 OctoTree 是什么。我问她什么是 OctoTree？我说没关系，我会在 Google 上研究一下。

我的研究不仅让我发现了 OctoTree，还让我发现了一些更棒的 Chrome 扩展程序，我认为每个开发者都应该了解并开始使用它们。让我们深入了解一下吧。

适合每个开发者的出色 Chrome 扩展程序

1.OctoTree：此扩展增强了 Github 代码审查和探索功能。此外，它还新增了一些功能，例如暗黑模式（我的最爱）、代码字体设置、书签、侧边栏停靠等。Octotree 的使用体验很像 Github 中的 Visual Studio Code。我个人认为……

看起来 真可爱，不是吗？ 这里有直接下载链接：https://chrome.google.com/webstore/detail/octotree/bkhaagjahfmjljalopjnoealnfndnagc

2.Wappalyzer：这款浏览器扩展程序是一款技术分析器，可以显示网站和 Web 应用程序的构建方式。想知道构建网站或 Web 应用程序使用了哪些技术、框架、JavaScript 库等吗？使用 Wappalyzer 就对了。

它的外观如下这是将其添加到浏览器的直接链接： https://chrome.google.com/webstore/detail/wappalyzer/gppongmhjkpfnbhagpmjfkannfbllamg?hl= en

3.Web Developer：这个扩展名的名字真奇怪。但它的功能一点也不奇怪。它很神奇。这个浏览器扩展添加了一个小工具栏按钮，里面有各种与图片、表单等相关的 Web 开发者工具。

它的外观如下 这是将其添加到浏览器的直接链接：https://chrome.google.com/webstore/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm

4.Windows Resizer：响应式网页设计是开发过程中最重要的方面之一。这款扩展程序可以帮助您调整浏览器窗口大小，以模拟各种设备分辨率。它可以帮助网页设计师和开发者在不同的浏览器分辨率下测试布局。
分辨率列表完全可自定义（添加/删除/重新排序）。
您可以设置窗口的宽度/高度、窗口位置、预设图标（手机、平板电脑、笔记本电脑、台式机），甚至可以选择将新尺寸应用于整个窗口或仅应用于视口。
它还具有可自定义的全局快捷键，以及导出设置并将其导入其他计算机的选项！太棒了！

它的外观如下这是将其添加到浏览器的直接链接： https://chrome.google.com/webstore/detail/window-resizer/kkelicaakdanhinjdeammmilcgefonfh? hl=en

5.检查我的链接：这款浏览器扩展程序是一款链接检查器，它会抓取你的网页并查找失效链接。它非常适合开发包含多个链接的 Web 应用程序或网站的 Web 开发者。它能帮你免去手动搜索失效链接的麻烦。它会高亮显示失效的、有效的、重定向到其他页面的链接等等。非常方便。

它的外观如下这是将其添加到浏览器的直接链接： https://chrome.google.com/webstore/detail/check-my-links/ojkcdipcgfaekbeaelaapakgnjflfglf? hl=en

6.What Font：了解 Web 应用程序和网站上使用的字体从未如此简单。使用此扩展程序，您只需将鼠标悬停在 Web 字体上即可检查字体。它还可以检测用于提供 Web 字体的服务。支持 Typekit 和 Google Font API。

它的外观如下这是将其添加到浏览器的直接链接： https://chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm? hl=en

7.ColorZilla：这是一款浏览器扩展程序，可帮助 Web 开发人员和图形设计师完成与颜色相关的任务。只需将鼠标悬停在网站或应用程序中的某个元素上，即可获取与其颜色相关的所有信息。它包含拾色器、吸管、渐变生成器等等……
它与 Color By Fardos 非常相似。也请务必了解一下。

它的外观如下 这是将其添加到浏览器的直接链接：https://www.colorzilla.com/chrome/

8.Web 开发人员检查表：此浏览器扩展程序有助于分析和检查他们的网站或网络应用程序是否违反了网页设计的最佳实践。

它的外观如下这是将其添加到浏览器的直接链接： https://chrome.google.com/webstore/detail/web-developer-checklist/iahamcpedabephpcgkeikbclmaljebjp? hl=en

9.CSS Viewer：这款浏览器扩展程序让访问元素的 CSS 属性变得非常简单，只需将鼠标悬停在元素上即可。它的功能与 Code Cola 扩展程序非常相似。

它的外观如下这是将其添加到浏览器的直接链接： https://chrome.google.com/webstore/detail/cssviewer/ggfgijbpiheegefliciemofobhmofgce? hl=en

10.Pesticide：这是在 CSS 中可视化盒子大小最简单的方法。不信？看看这个。使用 Pesticide，你可以将每个元素视为一个带有边框的盒子。看看边框、边距、填充等元素如何影响元素。这是一个非常棒的扩展。

这是将其添加到浏览器的直接链接： https://chrome.google.com/webstore/detail/pesticide-for-chrome-with/eipbgplchlidkojmppclhkechkhmlefi? hl=en

你会尝试以下哪款扩展程序？
请在下方评论

如果您发现这篇文章有用，请分享。

联系我：
Twitter：https://twitter.com/EfereyanK