你值得拥有的 11 个前端开发利器(你值得拥有的 11 个前端开发利器英文)

你值得拥有的 11 个前端开发利器(你值得拥有的 11 个前端开发利器英文)

作者 | Chidume Nnamdi

译者 | 孙薇,责编 | 伍杏玲

头图 | CSDN 下载自视觉中国

出品 | CSDN(ID:CSDNnews)

以下为译文:

笔者将在本文中分享自己在开发生涯中常用的11种前端工具。

你值得拥有的 11 个前端开发利器(你值得拥有的 11 个前端开发利器英文)

CanIUse

地址:https://caniuse.com/

有时候不太确定某个Web API与浏览器、手机浏览器能否兼容?这个工具让你轻松测试Web API与浏览器的兼容情况。

当我们想要了解哪些浏览器及相应版本支持Web Share API:navigator.share(…)

你值得拥有的 11 个前端开发利器(你值得拥有的 11 个前端开发利器英文)

在工具里简单查询便可查看结果。如图,列出了所有支持navigator.share(…)的浏览器及相应版本。

你值得拥有的 11 个前端开发利器(你值得拥有的 11 个前端开发利器英文)

Minify

地址:http://minify.com/

我们使用这个工具让即将发布到生产环境中的应用代码包缩减至最小,通过删减空格、无效代码等操作,使得应用包显著缩小,从而令浏览器的加载时间缩短。

这款在线工具minify.com支持压缩Web应用。

你值得拥有的 11 个前端开发利器(你值得拥有的 11 个前端开发利器英文)

Bit.dev

地址:https://bit.dev/

Bit.dev可用来托管、记录、管理来自不同项目的可复用组件。对于增加代码重用、加速开发和优化团队协作极其有效。

这也是我们从头构建设计系统的好选择,因为它具有设计系统所需的一切。Bit.dev可以与Bit这款处理组件隔离和发布的开源工具完美匹配。

Bit.dev支持React、React、TypeScript、Angular、Vue等许多库。

你值得拥有的 11 个前端开发利器(你值得拥有的 11 个前端开发利器英文)

上图展示了在Bit.dev中搜索共享React组件的过程。

你值得拥有的 11 个前端开发利器(你值得拥有的 11 个前端开发利器英文)

Unminify

地址:https://unminify.com/

这款工具可以逆转压缩操作,支持对JS、CSS及HTML代码的反压缩。通过解压缩、反混淆及美化,可以让一段压缩后的JS代码再次变为可读的。

你值得拥有的 11 个前端开发利器(你值得拥有的 11 个前端开发利器英文)

Stackblitz

地址:https://stackblitz.com/

这款工具适合所有人,Stackblitz让我们可以在Web上使用Visual Studio Code。

只需点击一下,Stackblitz即可快速支持Angular、React、Vue、Vanilla、RxJS、TypeScript项目。

当你想用浏览器尝试执行一段代码,或是任何操作当前JS框架的某个功能时,Stackblitz就会大显身手。假如你正在阅读一篇Angular文章,想要尝试其中的代码,就可以最小化浏览器并快速搭建一个新的Angular项目了,非常快速简便。

你值得拥有的 11 个前端开发利器(你值得拥有的 11 个前端开发利器英文)

JWT.io

地址:https://jwt.io/

使用json网络令牌(JWT)来保障应用安全性,或是用JWT来支持用户访问后端受保护资源的情况下,决定是否应当访问路径或资源的方法之一是检查令牌的到期时间。有时候,我们希望解码某个JWT以查看其有效负载,就可以使用jwt.io。

这款在线工具支持上传token令牌,来查看有效负载。可以采用粘贴,jwt.io就会对令牌进行解码,并显示其有效负载。

你值得拥有的 11 个前端开发利器(你值得拥有的 11 个前端开发利器英文)

BundlePhobia

地址:https://bundlephobia.com/

当我们不确定node_modules的大小,或想要确认某个即将安装在机器上pakckage.json的大小时,就可以使用BundlePhobia,它让我们可以了解某个npm包添加到前端软件包后对系统性能的影响。

这款工具可上传单个package.json文件,并展示从package.json所安装的依赖项大小。

你值得拥有的 11 个前端开发利器(你值得拥有的 11 个前端开发利器英文)

Babel REPL

地址:https://babeljs.io/en/repl

Babel是一个免费的开源JS转编译器,可将ES6 代码转为旧的ES5 JS代码,由Bebeljs团队开发。这款工具允许尝试添加到ES的内容,或者某些特定阶段添加到ECMA的内容,还可美化代码、限制文件大小,让使用者在转编译的过程中尝试不同的版本。

你值得拥有的 11 个前端开发利器(你值得拥有的 11 个前端开发利器英文)

Prettier Playground

地址:https://prettier.io/playground

Prettier是一个偏向JS代码格式化程序。通过解析代码,并使用JS重新输出,来实现一致性样式。这款工具在我们的开发中广泛使用,它有在线平台来美化代码。

你值得拥有的 11 个前端开发利器(你值得拥有的 11 个前端开发利器英文)

Postman

地址:https://www.postman.com/

这款工具可快速测试自己的API:GET、POST、DELETE、OPTIONS、PUT,笔者正在用这款工具,值得一试。

你值得拥有的 11 个前端开发利器(你值得拥有的 11 个前端开发利器英文)

JSLint

地址:https://jslint.com

在JS linter的世界中,JSLint排名最高。这款在线工具可在浏览器中插入一段JS代码或JS文件,这是一款静态代码分析工具,用于检查JS源代码是否符合编码规则。

原文链接:https://blog.bitsrc.io/12-useful-online-tools-for-frontend-developers-bf98f3bf7c63

本文为 CSDN 翻译,转载请注明来源出处。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

(0)
上一篇 2024年5月6日 下午7:09
下一篇 2024年5月6日 下午7:21

相关推荐

  • msp项目管理

    sp项目管理:一个高效的项目管理系统 sp项目管理(Service-oriented Project Management,简称sp项目管理)是一种基于敏捷方法的项目管理方式。它强…

    科研百科 2024年7月16日
    41
  • 怎么考垃圾分类工程师证以及真实有效大概要多少费用(垃圾分类处理工程师证怎么考)

    垃圾分类工程师等级划分 初级垃圾分类工程师,一般用于从事行业起步的在岗人员,等级偏低,可以用做上岗检查使用。 中级垃圾分类工程师,一般是用于从事行业有段时间的在岗人员,可以是在岗人…

    科研百科 2022年7月12日
    270
  • 绵阳科技项目管理系统

    绵阳科技项目管理系统 随着科技的不断发展,绵阳科技项目管理系统也应运而生。作为一个现代化的科技城市,绵阳拥有越来越多的企业和机构,他们需要一种高效的项目管理系统来帮助他们管理项目进…

    科研百科 2024年12月15日
    0
  • 为什么你的科研项目比较少呢为什么你的科研项目比较少呢

    人工智能生命体X22的科研项目比较少的原因如下: 人工智能生命体X22是一个研究人工智能的生命体,它的主要任务是研究人工智能的发展,并且帮助人们更好地利用人工智能。尽管人工智能生命…

    科研百科 2024年6月13日
    74
  • 具体的科研项目怎么查

    科研项目的查找是一个复杂的过程,需要耗费大量的时间和精力。在这个过程中,需要确定具体的研究方向,确定研究目标,然后进行文献综述,确定可用的资源,最后确定研究方法和实验方案。 具体来…

    科研百科 2025年4月23日
    1
  • 科研项目是什么工作(科研项目怎么样的好做一些)

    科研项目好做一些是一个关键因素,直接关系到项目进展和研究成果的质量。如果科研项目好做一些,那么项目成员就能更顺利地完成工作,研究成果也能更有说服力。那么,科研项目怎么样才能好做一些…

    科研百科 2024年4月5日
    129
  • Shopee Man多店铺管理软件,Shopee菲律宾商家的掘金好帮手(Shopeeman软件官网)

    东南亚地区最大的购物平台虾皮深受东南亚人民喜爱,虾皮的发展也随着东南亚跨境电商的稳定成熟而渐渐迅速发展起来,不少商家也加入了东南亚跨境电商的大军,在选择站点上,有些商家想要选择虾皮…

    科研百科 2022年9月30日
    413
  • 怎么获取地方科研项目

    获取地方科研项目是研究人员进行学术研究的重要资源之一。下面是一些获取地方科研项目的方法: 1. 联系当地的学术机构:当地的学术机构是获取地方科研项目的主要途径之一。可以通过当地的学…

    科研百科 2025年2月26日
    3
  • 协同办公业务系统

    协同办公业务系统: 让办公更高效 随着现代企业规模的不断发展和扩大,协同办公业务系统已经成为了企业日常办公中不可或缺的一部分。协同办公业务系统可以帮助企业实现内部信息的共享、协作和…

    科研百科 2024年8月24日
    25
  • 企业中层转副县长

    企业中层转副县长企业中层转副县长2021年7月23日,辽宁省政府通过了三百多个社会资源管理、县账、部队、生产行政管理、旅游管理、现代化办公厅、服装设计与生产管理、企业管理、法律管理…

    科研百科 2024年11月21日
    0