适用于每个web开发者的5个实用工具

Top 5 amazing tools for every web developer
翻译：范小饭

简介

我们开发的原因就是让事情变得更有效率，所以我们经常也经常使用其他开发者的开发的工具来提高我们的开发效率。

所以我想介绍给每个开发者介绍下，我在日常工作中最常用的5个开发工具，这5个工具没有进行排序，这些工具都是非常好用的。

Lighthouse

Lighthouse是一个Google开发的非常有用的工具，它可以为我们的网站生成很重要的报告，例如seo，性能，可访问性等等

image.png

Lighthouse可以以多种方式使用，其中最受欢迎的是用官方的谷歌插件，但是不仅限于谷歌插件，其他方式还有：

• Node CLI
• Web UI

注意web ui你不休要安装任何东西，然后，你会被一些选项限制了，使用插件时，你可以模拟cpu节流和访问速度，因此可以看看见网站在低端设备的运行情况，是不是很棒？

chrom 和 火狐的开发插件

就我个人而言，我并没有那么多地使用Firefox devtools，但是我想说同时使用它们是很棒的，因为它们每个都具有另一个没有的惊人功能。例如，Firefox具有出色的辅助功能工具！

我的chrom开发工具技巧

如果你按住Ctrl+Shift+P ，就可以看见一个搜索条，你可以在其中输入你想执行的指令，举个例子，如果您想快速禁用Javascript，不需进入Chrome设置或在devtools中搜索复选框，则可以输入它！

image.png

Can I use

Can I use可能是所有开发者都知道的网站，它可以快速的找到JavaScript API或者css属性在主流浏览器中的支持程度。

下面我们可以看到搜索到的Javascript API的默认视图，它向我们显示了可用的浏览器版本的API，但是还有两个非常有趣的视图，让我们尝试一下！

image.png

另一个试图是Usage relative，
如果你收集了你的用户使用的那种浏览器，你就会判断是否为了你的用户修改一下兼容性来确保用户的正常使用。

image.png

最后一个试图使Date relative，你可以清楚的卡到在哪一个浏览器的那一个版本添加了某个功能。

image.png

Web辅助功能评估工具WAVE

WAVE是一个chrome和火狐的扩展插件，它将使用其UI界面包装您当前访问的网站，您可以在其中看到页面的可访问性摘要访问网站的ui，它显示了诸如对比度错误，可访问性错误之类的内容，还显示了您的站点为改善可访问性而提供的功能。

image.png

Figma

Figma是我最近见过的最神奇的工具之一，有点像 Adobe XD 和Sketch，但是Figma是一个网站，非常强大，它有非常多的有点，比如良好的性能，可以和团队实时协作，免费的定价选项，提供了figma的很多功能，。

image.png

如果我还没有说服你去使用figma，请在官网上阅读更多的信息。我相信你会喜欢它。

productivity：更有效率
official：官方的
Personally：就我自己而言
command：命令
execute：执行
audience：观众，读者