适合每个 Web 开发人员的 5 大神奇工具

介绍

介绍

我们都希望尽可能地提高效率，这就是为什么我们要开发能够提高我们（和其他人）生产力的东西，但我们也在使用其他开发人员的工具，他们出于同样的原因制作这些工具。

所以我想向大家介绍我日常使用的五大工具（针对 Web 开发者）。这份列表没有任何排序，但这些工具都非常棒，让我们的生活更加轻松。

您可以在下面留下评论，列出您最喜欢的 Web 开发人员工具列表！

那么，让我们开始吧🚀

灯塔

Lighthouse是 Google 打造的一款出色的开源工具。它可以报告我们网页的重要方面，例如 SEO、性能、可访问性、最佳实践等等！

Lighthouse 的惊人功能在于它可以以多种方式使用，最流行的方式是使用官方的Google Chrome 扩展程序，但您不必只使用 Chrome 扩展程序，其他方式包括：

• 节点 CLI
• Web 用户界面

请注意，使用 Web UI 您无需安装任何东西，但可用选项会受到限制。使用扩展程序时，您可以“模拟” CPU 节流和网速，这样您就可以看到您的网站在低端硬件设备上的运行情况，是不是很棒？

Chrome 和 Firefox 开发者工具

我个人不太常用 Firefox DevTools，但我觉得同时使用这两个工具还是很不错的，因为它们各自都有一些彼此不具备的优秀功能。比如，Firefox 就有一个非常棒的辅助功能工具！

我的 Chrome 开发者工具小贴士

如果你点击Ctrl+Shift+P（在 DevTools 打开的情况下），你会看到一个搜索栏，你可以在其中输入要执行的命令。例如，如果你想快速禁用 JavaScript，而无需进入 Chrome 设置或在 DevTools 中搜索复选框，只需输入即可！

我可以使用

犬科动物

Can I Use可能是所有开发者最熟悉的网站。它能让你快速了解大多数主流浏览器对 JavaScript API 或 CSS 属性的支持情况。

下面我们可以看到搜索到的 JavaScript API 的默认视图。它显示了该 API 在哪些浏览器版本中可用，此外还有两个非常有趣的视图，让我们来尝试一下吧！

另一种视图是Usage relative，如果您收集了有关您的受众使用哪些浏览器的数据，并且您需要填充（或更改）应用程序中的某些功能以便为您的受众正确工作，那么这是一个非常方便的视图。

最后一个视图是Date relative，您可以清楚地看到在哪个版本的浏览器中添加了某个功能。

网页可访问性评估工具（WAVE）

海浪

WAVE是 Chrome 和 Firefox 的扩展程序。当您在扩展程序列表栏中点击它时，它会将您当前访问的网站与其 UI 界面包裹在一起，您可以在其中查看页面的可访问性摘要。它不仅会显示对比度错误、可访问性错误等信息，还会显示您的网站为提高可访问性而提供的功能。

Figma

Figma

Figma是我最近见过的最棒的工具之一。它是一款 UI 设计和原型设计工具。与 Adob​​e XD 和 Sketch 等工具类似，但 Figma 是基于网页的（当然，你也可以下载桌面应用），功能非常强大。它有很多优点，例如性能出色、可以与团队成员实时协作，并且提供免费的定价方案，该方案提供 Figma 的所有功能（包括无限导出等等）。如果你是学生，还可以免费获得专业版！

如果我还没说服你尝试 Figma，请尝试阅读 Figma 官方网站上的更多信息。我相信你会爱上它！

这篇文章已发布在我的博客上，您可以在这里查看。