你值得拥有的 11 个前端开发利器
作者 | Chidume Nnamdi
译者 | 孙薇,责编 | 伍杏玲
头图 | CSDN 下载自视觉中国
出品 | CSDN(ID:CSDNnews)
以下为译文:
笔者将在本文中分享自己在开发生涯中常用的11种前端工具。
CanIUse
地址:https://caniuse.com/
有时候不太确定某个Web API与浏览器、手机浏览器能否兼容?这个工具让你轻松测试Web API与浏览器的兼容情况。
当我们想要了解哪些浏览器及相应版本支持Web Share API:navigator.share(...)
在工具里简单查询便可查看结果。如图,列出了所有支持navigator.share(...)的浏览器及相应版本。
Minify
地址:http://minify.com/
我们使用这个工具让即将发布到生产环境中的应用代码包缩减至最小,通过删减空格、无效代码等操作,使得应用包显著缩小,从而令浏览器的加载时间缩短。
这款在线工具minify.com支持压缩Web应用。
Bit.dev
地址:https://bit.dev/
Bit.dev可用来托管、记录、管理来自不同项目的可复用组件。对于增加代码重用、加速开发和优化团队协作极其有效。
这也是我们从头构建设计系统的好选择,因为它具有设计系统所需的一切。Bit.dev可以与Bit这款处理组件隔离和发布的开源工具完美匹配。
Bit.dev支持React、React、TypeScript、Angular、Vue等许多库。
上图展示了在Bit.dev中搜索共享React组件的过程。
Unminify
地址:https://unminify.com/
这款工具可以逆转压缩操作,支持对JS、CSS及HTML代码的反压缩。通过解压缩、反混淆及美化,可以让一段压缩后的JS代码再次变为可读的。
Stackblitz
地址:https://stackblitz.com/
这款工具适合所有人,Stackblitz让我们可以在Web上使用Visual Studio Code。
只需点击一下,Stackblitz即可快速支持Angular、React、Vue、Vanilla、RxJS、TypeScript项目。
当你想用浏览器尝试执行一段代码,或是任何操作当前JS框架的某个功能时,Stackblitz就会大显身手。假如你正在阅读一篇Angular文章,想要尝试其中的代码,就可以最小化浏览器并快速搭建一个新的Angular项目了,非常快速简便。
JWT.io
地址:https://jwt.io/
使用JSON网络令牌(JWT)来保障应用安全性,或是用JWT来支持用户访问后端受保护资源的情况下,决定是否应当访问路径或资源的方法之一是检查令牌的到期时间。有时候,我们希望解码某个JWT以查看其有效负载,就可以使用jwt.io。
这款在线工具支持上传token令牌,来查看有效负载。可以采用粘贴,jwt.io就会对令牌进行解码,并显示其有效负载。
BundlePhobia
地址:https://bundlephobia.com/
当我们不确定node_modules的大小,或想要确认某个即将安装在机器上pakckage.json的大小时,就可以使用BundlePhobia,它让我们可以了解某个npm包添加到前端软件包后对系统性能的影响。
这款工具可上传单个package.json文件,并展示从package.json所安装的依赖项大小。
Babel REPL
地址:https://babeljs.io/en/repl
Babel是一个免费的开源JS转编译器,可将ES6+代码转为旧的ES5 JS代码,由Bebeljs团队开发。这款工具允许尝试添加到ES的内容,或者某些特定阶段添加到ECMA的内容,还可美化代码、限制文件大小,让使用者在转编译的过程中尝试不同的版本。
Prettier Playground
地址:https://prettier.io/playground
Prettier是一个偏向JS代码格式化程序。通过解析代码,并使用JS重新输出,来实现一致性样式。这款工具在我们的开发中广泛使用,它有在线平台来美化代码。
Postman
地址:https://www.postman.com/
这款工具可快速测试自己的API:GET、POST、DELETE、OPTIONS、PUT,笔者正在用这款工具,值得一试。
JSLint
地址:https://jslint.com
在JS linter的世界中,JSLint排名最高。这款在线工具可在浏览器中插入一段JS代码或JS文件,这是一款静态代码分析工具,用于检查JS源代码是否符合编码规则。
原文链接:https://blog.bitsrc.io/12-useful-online-tools-for-frontend-developers-bf98f3bf7c63
本文为 CSDN 翻译,转载请注明来源出处。
【End】
《原力计划【第二季】- 学习力挑战》正式开始!
即日起至 3月21日,千万流量支持原创作者,更有专属【勋章】等你来挑战
推荐阅读
☞微信七年「封链」史
☞iOS 开发面试通关指南:67 个必知问题!
☞Javascript函数之深入浅出递归思想,附案例与代码!
☞华为、阿里员工在听的英语资源,即将过期,请自取
☞Javascript函数之深入浅出递归思想,附案例与代码!
☞智能合约编写之Solidity的基础特性
你点的每一个在看,我认真当成了喜欢
你值得拥有的 11 个前端开发利器相关推荐
- 前端开发利器—FIDDLER 转
http://www.cnblogs.com/yuzhongwusan/archive/2012/07/20/2601306.html 前端开发利器-FIDDLER 1.Fiddler相对其他调试工具 ...
- 视频教程-Web前端开发利器 SPRY框架之表单验证-JavaScript
Web前端开发利器 SPRY框架之表单验证 有17年互联网行业从业经验,始终在教学第一线,勇于创新,从有效教学,不断向高效教学转变.始终坚持"学生为主体,教师为主导:商业化案例,企业化情境& ...
- 前端开发利器--PxCook(像素大厨)
前端开发利器 - - PxCook(像素大厨) 1.PxCook简述 2.PxCook安装 3.PxCook基本操作 3.1 通过软件打开设计图 3.2 常用快捷键 3.3 常用工具 3.4 从psd ...
- 视频教程-Web前端开发利器 SPRY框架之页面效果-JavaScript
Web前端开发利器 SPRY框架之页面效果 有17年互联网行业从业经验,始终在教学第一线,勇于创新,从有效教学,不断向高效教学转变.始终坚持"学生为主体,教师为主导:商业化案例,企业化情境& ...
- 视频教程-Web前端开发利器 SPRY框架之数据集XML-JavaScript
Web前端开发利器 SPRY框架之数据集XML 有17年互联网行业从业经验,始终在教学第一线,勇于创新,从有效教学,不断向高效教学转变.始终坚持"学生为主体,教师为主导:商业化案例,企业化情 ...
- 微信公众号开发C#系列-12、微信前端开发利器:WeUI
本文目录 1.前言 2.WeUI基本介绍 2.1 WeUI概述 2.2 为什么选择jQuery WeUI 3.jQuery WeUI基本用法 4.其他基础组件展示 4.1.switch开关 4.2.文 ...
- 前端开发利器Emmet插件的基本使用总结
1.Emmet的简介 Emmet (前身为 Zen Coding) 是一个能大幅度提高前端开发效率的工具,能够实现 HTML.CSS 的快速编写. 官网地址:http://emmet.io/ 官方文档 ...
- 微信公众号开发系列-12、微信前端开发利器:WeUI
1.前言 通过前面系列文章的学习与讲解,相信大家已经对微信的开发有了一个全新的认识.后端基本能够基于盛派的第三方sdk搞定大部分事宜,剩下的就是前端了.关于手机端的浏览器的兼容性问题相信一直是开发者们 ...
- 12、微信前端开发利器:WeUI
1.前言 通过前面系列文章的学习与讲解,相信大家已经对微信的开发有了一个全新的认识.后端基本能够基于盛派的第三方sdk搞定大部分事宜,剩下的就是前端了.关于手机端的浏览器的兼容性问题相信一直是开发者们 ...
最新文章
- 随笔——js中的this指向,apply()与 call()
- Nginx(二):反向代理原理 与 配置文件详解
- 怎样更换UC浏览器的字体?更换UC浏览器的字体的方法
- Python网络爬虫数据抓取思路,静态与动态页面爬取思路,爬虫框架等
- 以前的java游戏平台_手机游戏平台java游戏经典的五款游戏回顾!
- win10:无法加载文件 C:\Users\LENOVO\AppData\Roaming\npm\babel-node.ps1,因为在此 系统上禁止运行脚本
- 【锂电池】关于4.2V锂电池充电IC的一些记录
- 灰狼优化算法--简单易懂附python代码
- jquery调色板_使用jQuery的调色板生成器
- 网络计算机要不要用电脑,电脑连不上网怎么办 电脑连不上网解决方法
- ROCKET PROPULSION ELEMENTS——DEFINITIONS AND FUNDAMENTALS笔记
- 新闻字幕条制作,一款不错的ae字幕模板
- Unix的学习(一)
- 一次ajax多次回调结果,使用jQuery中的when实现多个AJAX请求对应单个回调的例子分享...
- linux用户密码转换为明文,Linux strace 明文密码抓取
- 基于安卓/android/微信小程序的学生考勤签到APP-#计算机毕业设计
- 怎么解除该游戏的地域限制问题
- 基于web_socket_channel 实现弹幕通信
- PMBOK(第六版) PMP笔记——《十》第十章(项目沟通管理)
- java做一个办公用品管理系统,如何使用办公用品管理系统