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

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

简介

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

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

Lighthouse

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


image.png

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

注意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:观众,读者

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 作为Web开发人员,我们在一个节奏非常快的行业中工作,并且始终掌握最新信息有时是一个挑战。这就是为什么我相信我们应...
    phpCN中文网阅读 894评论 0 0
  • 《不省心》一书为2014央视春晚总导演冯小刚的随笔集,稳坐2013年度话题人物NO.1位置的冯导,将新书取名为“不...
    书亭子阅读 669评论 0 1
  • 今天算是满足了宝宝三个愿望: 1-去图书馆看书 2-看动物 3-吃棉花糖 清早起床问宝宝今天想干嘛?是图书馆还...
    欣萍阅读 303评论 0 1
  • 看过这样一则故事:一位花甲老人越过千重山,万重水,从遥远的异国辛苦跋涉,回来只为再看一眼他几十年前的恋人,那位在...
    斗战圣敌阅读 200评论 0 0
  • 高低肩的危害你认真了解过吗? 今天给大家讲讲高低肩的危害,也不知道大家有没有注意过这个问题,还有留意过家人是不是也...
    华图康复阅读 591评论 0 1