前端:收集前端开发者手边必备的11款神器

时间:2021-12-07 04:29:02

前端:收集前端开发者手边必备的11款神器

1 . Wappalyzer

 

全球用户数:1,000,000+

前端:收集前端开发者手边必备的11款神器

Wappalyzer可以帮助我们了解目标网站的构建方式。工作当中存在大量此类情况,客户需要我们参照某些网站来做开发,作为一款建站前的研究工具,Wappalyzer可以在这方面有效的支持到我们,有助于帮我们了解目标网站具体有哪些技术应用。

尤其是在做大型项目开发前,这个工具可以给我们带来很好启发。

  1. 相关链接: 
  2. https://chrome.google.com/webstore/detail/wappalyzer/gppongmhjkpfnbhagpmjfkannfbllamg 

2 . Window Resizer 响应式测试

 

全球用户数:600,000+

前端:收集前端开发者手边必备的11款神器

在Web开发中,响应式网站设计已经相当普遍。而在相关开发测试中,你大概率会在不同设备上查看正在构建中的网页效果、调整浏览器窗口的大小以及模拟不同的屏幕分辨率,那就用Window Resizer就好,它可以帮助我们查看网页布局在特定分辨率下的外观,自定义分辨率,设置窗口的宽度和高度和窗口位置等。

  1. 相关链接: 
  2. https://chrome.google.com/webstore/detail/window-resizer/kkelicaakdanhinjdeammmilcgefonfh?hl=en 

3 . Marmoset 代码快照

 

全球用户数:10,000+

 前端:收集前端开发者手边必备的11款神器

我们日常工作中向客户或上级展示代码也是很常见的,常规的屏幕截图可能并不太具有展示和“提案”性,有没有考虑过让代码截图更加生动有趣?

我使用Marmoset捕捉很酷的代码快照,改变下视角和色彩主题,而后把置入到演示文稿或者线上,非常帅气了呢~

  1. 相关链接: 
  2. https://chrome.google.com/webstore/detail/marmoset/npkfpddkpefnmkflhhligbkofhnafieb 

4 . Code Cola:source code viewer

 

全球用户数:30,000+

前端:收集前端开发者手边必备的11款神器

如果你平时倾向于用Chrome,可能会在页面上编写CSS,当用到Inspect Element时,一定感觉相当麻烦。Code Cola是一个Chrome的扩展,是我所知道的最棒的Chrome CSS编辑器,尤其对于前端入门者来说,界面非常的友好和易用。

  1. 相关链接: 
  2. https://chrome.google.com/webstore/detail/code-cola/lomkpheldlbkkfiifcbfifipaofnmnkn?hl=en 

5 . CSSViewer

 

全球用户数:100,000+

前端:收集前端开发者手边必备的11款神器

如果你只需要查看网页上的CSS属性,那么CSSViewer就是不错的选择;只需单击图标,将鼠标指针悬停在我们要查看的任何元素上,即可看到其CSS属性。

由于具有上面所说的悬停功能,因此个人感觉它与Chrome的Inspect Element相比,要更快捷,更易于使用。

  1. 相关链接: 
  2. https://chrome.google.com/webstore/detail/cssviewer/ggfgijbpiheegefliciemofobhmofgce?hl=en 

6 . JSONView

 

全球用户数:1,000,000+

前端:收集前端开发者手边必备的11款神器

前端开发工作涉及到对数据传输的处理时,JSON就会被用到,没什么可说的,前端开发者必须了解有关JSON的原理,我们日常的大量工作也都会需要去查看和验证网页上的JSON文档。

JSONView是帮助你执行相关操作的一个简单工具,这么多年了,它一直是我知道的同类工具中最好的。

  1. 相关链接: 
  2. https://chrome.google.com/webstore/detail/jsonview/chklaanhfefbnpoihckbnefhakgolnmc?hl=en 

 7 . Lighthouse

 

全球用户数:600,000+

前端:收集前端开发者手边必备的11款神器

如今,自动化越来越成为前端发展的一个大趋势,Lighthouse 正是一款开源的自动化工具,用于改进网络应用的质量;你可以借助这个工具来查看性能、访问性、SEO情况等等。它将针对此页面运行一连串的测试,然后生成一个有关页面性能的报告。

Lighthouse绝对为我和我身边的朋友提供了一种梦寐以求的网页性能提升途径,无法想象没有它,我的日常工作会成什么样子。

  1. 相关链接: 
  2. https://developers.google.com/web/tools/lighthouse?hl=zh-cn 

8 . Clear Cache

 

全球用户数:800,000+

前端:收集前端开发者手边必备的11款神器

每当需要清除Web浏览器上的缓存时,大多必须手动转到设置页面;前端开发人员往往被困在往返执行这种低效工作的测试里。如果你拥有Clear Cache这个扩展工具,就可以提高效率,我一直在使用它,只需单击即可完成操作,省下了大量宝贵时间。

  1. 相关链接: 
  2. https://chrome.google.com/webstore/detail/clear-cache/cppjkneekbjaeellbfkmgnhonkkjfpdn?hl=en 

9 . Cookie Manager

 

全球用户数:20,000+

 前端:收集前端开发者手边必备的11款神器

cookie管理器是前端开发的另一个关键“法宝“。市场上有很多cookie管理器,但我感觉这个Cookie Manager更适合我的工作流程,同时让工作过程更加简单高效。此外值得一提的是,它不仅为前端开发人员设计,而且还为注重隐私的Web用户而设计。

  1. 相关链接: 
  2. https://chrome.google.com/webstore/detail/cookiemanager-cookie-edit/hdhngoamekjhmnpenphenpaiindoinpo 

10 . LiveReload

 

全球用户数:100,000+

前端:收集前端开发者手边必备的11款神器

可以想象得到,我们有时很想确切地知道自己的网页背后的一些运行情况,譬如:运行和使用中的哪些文件会被修改,这方面LiveReload能够帮到我们;它是一个很好的预览工具,让我们了解网页正在做什么,我们需要对网页做什么调试,特别是帮我们知晓过往有哪些误操作影响到了网页的运行。

  1. 相关链接: 
  2. https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei?hl=en 

11 . Postman

 

全球用户数:3,000,000+

前端:收集前端开发者手边必备的11款神器

最后,我们介绍API,其实这个貌似也没什么好说的了,作为程序员你必须听说过!

前端开发者在开发过程中必须处理API,才能将网页与各种Web服务集成在一起。在全球范围内编写代码并不是最容易的事情,因此您需要一种可以更有效地执行此操作的工具。

Postman名气太大了,它是简化API构建过程的绝佳工具,并且还简化了我们的联调协作。我和自己的团队完全不知道离开Postman的日子,该怎么过!

前端:收集前端开发者手边必备的11款神器

  1. 相关链接: 
  2. https://chrome.google.com/webstore/detail/postman/fhbjgbiflinjbdggehcddcbncdddomop?hl=en 

原文地址:https://mp.weixin.qq.com/s/sz5GKyuXWyaG-KSplyCkYw