你值得拥有的 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

相关推荐

  • 奋斗永远在路上 – 幼儿园如何细化常规 优化管理(幼儿园如何加强常规管理)

    班级常规管理如何“活而不乱” 教育家叶圣陶先生说: 教育的本质就是培养习惯。 幼儿在园的“一日生活环节” 不仅是幼儿健康成长的保证, 也是进行一切教学活动的基础。 一日生活的有效衔…

    科研百科 2024年1月20日
    111
  • 无纸化会议系统 – 无纸化办公,会议高效(无纸化办公会议系统方案)

    随着全球信息科学技术的飞速发展以及绿色低碳理念的深入人心,为适应信息化时代高速发展的进程,会议模式由“传统纸质会议”向“智能无纸化会议”进行演变,无纸化办公开始成为全球趋势。与此同…

    科研百科 2022年7月4日
    253
  • 科研项目社科分类目录怎么写科研项目社科分类目录怎么写

    科研项目社科分类目录怎么写 科研项目的社科分类目录是科研项目管理中非常重要的一个环节。它有助于项目管理者对项目进行分类和调度,方便项目成员对项目进行定位和协作。在写科研项目社科分类…

    科研百科 2024年6月14日
    77
  • 管理系统的项目的作用

    管理系统的项目的作用 管理系统的项目是一种用于管理组织或个人业务流程的软件系统。这些系统可以帮助组织或个人更高效地完成工作,提高生产力和效率。 管理系统的项目可以用于多种不同的用途…

    科研百科 2025年1月8日
    0
  • 高校老师科研项目是什么

    高校老师科研项目是什么 高校老师是我们社会中非常重要的一部分,他们负责我们的学术和知识发展。然而,很多高校老师并没有足够的资金和资源来支持他们的科研项目,这限制了他们的学术成就。因…

    科研百科 2025年6月3日
    1
  • 科研项目的主持有几个

    科研项目的主持有几个 科研项目的主持是项目成功的关键之一。一个合适的主持能够帮助项目团队协调工作,确保项目按计划进行,并且能够为项目提供必要的资源和支持。因此,在选择科研项目的主持…

    科研百科 2025年5月20日
    0
  • ​从工程监理未来来看建筑企业发展

    从工程监理未来来看建筑企业发展 为了完成一个项目的建设,需要从技术等多方面进行管理。目前国内大部分业主都是第一次做基建工作,对建筑行业不太了解。尽管业主自己也能完成部分项目管理,但…

    科研百科 2023年8月8日
    175
  • pcm项目管理系统

    什么是pcm项目管理系统? pcm项目管理系统是一种用于项目管理的软件系统,它可以帮助项目经理和团队更好地管理项目,提高项目效率,减少项目风险。 PCM项目管理系统的核心功能是项目…

    科研百科 2024年12月14日
    0
  • 科研项目的人工费和劳务费

    科研项目的人工费和劳务费 科研项目的人工费和劳务费是项目中非常重要的开支,它们直接关系到项目的成本和效率。人工费是指用于雇佣科学家,工程师和其他技术人员的开支,而劳务费则是指用于雇…

    科研百科 2024年4月11日
    142
  • 科研项目推进会通讯稿

    科研项目推进会通讯稿 尊敬的各位科学家、工程师和研究人员: 很高兴能在这里与大家一起庆祝我们项目的推进会。在过去的几个月里,我们团队一直在努力工作,致力于完成我们的目标。现在,我们…

    科研百科 2025年5月15日
    0