你值得拥有的 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年8月5日
    41
  • 海口滨江西路新增两座天桥 预计本月中旬投入使用(海口滨江西路规划)

    凤翔东路与滨江西路交叉口的天桥。 南国都市报、南海网、南海网客户端5月5日讯(记者 党朝峰 文/图)近期,路过海口市滨江西路的市民发现,在滨江西路与其他道路的两个交叉路口处,工人正…

    科研百科 2022年7月17日
    331
  • 【党建引领“五治融合”】高湾镇:“党建引领”网格化 织密织牢防控网

    疫情就是命令,防控就是责任。面对连日来严峻复杂的疫情形势,高湾镇党委、政府高度重视,迅速响应、安排部署,紧紧围绕“外防输入、内防扩散”工作要求,推行“党建引领”网格化管理模式,层层…

    科研百科 2023年6月23日
    133
  • 强化党建链 提升业务链(强化党建链 提升业务链乡镇搜狐手机)

    来源:人民网-人民日报 湖北武汉市东西湖区有6200余家快递物流相关业态企业,近些年,符合组建条件的均已建立党组织,但大部分党组织书记和党务工作者身兼多职,从事党建工作时间短,工作…

    科研百科 2023年6月27日
    111
  • 国外科研经费管理

    科研经费管理是顺利进行科学研究的重要保障。在国外,科研经费管理也面临着许多挑战。本文将介绍国外科研经费管理的特点和发展趋势。 一、国外科研经费管理的特点 1. 高度重视科研经费的合…

    科研百科 2024年5月24日
    104
  • ao 办公系统

    ao办公系统: 创新工作方式的引领者 随着科技的不断发展,工作方式也在不断地变革。ao办公系统,一个创新工作方式的引领者,正在慢慢地改变着人们的工作方式。 ao办公系统是一种基于云…

    科研百科 2024年8月20日
    61
  • 教授贪污科研项目

    教授贪污科研项目 最近,有关教授贪污科研项目的报道越来越多。这些教授们利用他们的职位和权力,贪污了大量的科研经费,使得他们的项目无法继续进行,最终对学术界和国家利益造成了严重的损失…

    科研百科 2025年2月9日
    0
  • 美国本科summer term注册提供的课程

    美国本科summer term注册提供的课程 随着新冠疫情的爆发,许多学校都暂停了传统的秋季学期,而采用 summer term 的方式继续教学。作为 summer term 的一…

    科研百科 2024年10月18日
    0
  • 科研项目 银行转账

    科研项目银行转账 随着科技的不断发展,银行转账已经成为了人们日常生活中必不可少的一部分。然而,传统的银行转账方式存在一些问题,比如转账速度较慢、转账过程中容易受到网络干扰、转账信息…

    科研百科 2025年2月12日
    0
  • 项目文件管理工具(项目文件管理软件)

    项目文件管理软件 项目文件管理软件是一种用于管理项目文件的软件,可以帮助项目团队更好地组织、存储和共享项目文件。随着现代项目管理的日益复杂,项目文件管理软件变得越来越重要。本文将介…

    科研百科 2024年6月9日
    73