你值得拥有的 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年12月26日
    0
  • 科研项目对申研有用吗吗

    科研项目对申研有用吗? 科研项目是申请研究生时非常重要的一项指标,因为一个好的科研项目可以证明申请人具备较强的科研能力和研究潜力。但是,对于哪些科研项目对申研真正有用,这个问题并没…

    科研百科 2025年5月12日
    1
  • 管理施工进度系统

    管理施工进度系统 随着建筑行业的快速发展,管理施工进度成为了建筑行业中至关重要的一部分。一个好的施工进度系统可以帮助项目经理和工程师更好地管理项目,确保项目按时完成,并且符合预算和…

    科研百科 2024年5月30日
    81
  • 20件作品进入四川省第五届食品营养产业创新大赛决赛(四川省食品营养产业青年人才产学研创新设计大赛)

    中国食品网播报 10月19日下午,2019 年“四川省第五届食品营养产业青年人才产学研创新设计大赛”复赛在成都师范学院进行。13位食品领域资深专家对80件进入复赛的参赛作品及创作人…

    科研百科 2024年4月21日
    119
  • plm项目管理系统操作

    项目管理系统是一种用于管理和组织项目的工具,能够帮助项目经理和团队成员更好地协作和推进项目。本文将介绍如何使用PLM项目管理系统进行操作。 1. 登录 要使用PLM项目管理系统,首…

    科研百科 2025年6月17日
    0
  • 项目管理书籍排行资讯

    项目管理书籍排行资讯 随着信息技术的不断发展,项目管理已经成为企业和个人提高管理能力的必要工具。市场上有很多优秀的项目管理书籍可供选择,以下是一些目前最受欢迎的项目管理书籍。 1….

    科研百科 10小时前
    1
  • APP定制开发有哪些步骤?-浩太软件(app定制开发完整流程)_1

    一、需求分析 1、了解客户需求 APP定制开发的首先步骤就是要了解客户的需求,客户可以将自己的需求描述清楚,以便开发者能够更好地了解客户的需求,从而为客户提供更准确的服务,满足客户…

    科研百科 2023年5月14日
    209
  • 如何制定有效的项目管理计划?(如何做项目管理计划)

    完善的项目管理计划,会涵盖项目发展过程中需要的所有细节。这个计划就好比一张地图,有了它,你就能按照既定的路线朝目标前进,但是不是所有团队都会实实在在把计划列明,他们也因此面临着因小…

    科研百科 2022年5月20日
    278
  • 实验室管理系统项目

    实验室管理系统项目 实验室是科学研究和实验的重要场所,也是保证科学研究质量和成果的重要保障。随着实验室规模的不断扩大和科学研究的深入发展,实验室管理也需要越来越高效和智能化。因此,…

    科研百科 2024年12月31日
    0
  • 十亿像素照片下载

    下载十亿像素照片是一项具有挑战性的任务,需要使用特殊的软件和工具,但是,如果您有足够的耐心和资源,您可以轻松地下载这些巨大的照片。 十亿像素照片是指由一幅图像所拥有的像素数量达到十…

    科研百科 2024年10月14日
    17