您当前的位置:首页 > 电脑百科 > 程序开发 > 编程百科

11个web前端开发人员必备的在线工具,功能强大,值得收藏

时间:2020-03-17 16:59:11  来源:  作者:

互联网上有许多很棒的工具,使Web开发人员的工作更加轻松。在本文中,我将简要介绍我在工作中经常使用的11种工具。

1. caniuse.com

你是否不确定web API是否与特定浏览器兼容,或者是否可以在移动浏览器中访问?此在线工具可以轻松测试web API与浏览器的兼容性。

该工具为桌面和移动设备上的前端Web技术提供了不断更新的浏览器支持表。

假设我们想知道哪些浏览器及其版本支持web资源的API请访问navigator.share,表中列出了支持navigator.share的浏览器及其版本。

11个web前端开发人员必备的在线工具,功能强大,值得收藏

 

 

2.Minify

为了减小应用程序代码的包大小,开发人员会将它们的体积减小到最小。最小化会删除空格、无效代码等,这就大大减少了应用程序的大小,从而加快了浏览器的下载速度。

minify.com在线工具使用户能够最小化Web应用程序代码。

3. Bit.dev

Bit.dev是一个很棒的组件中心。我用它来托管、记录和管理来自不同项目的可重用组件。这是改善代码重用,加快开发速度和优化团队协作的好方法。

从头开始创建设计系统也是一个很好的选择(因为它具有设计系统所需的一切)。Bit.dev与Bit搭配使用非常出色,Bit是一个处理组件隔离和发布的开源工具。

Bit.dev支持React,带有TypeScript的React,Angular,Vue等。

4. Unminify.com

该工具的作用与minify相反。该工具允许通过压缩、解压缩和执行预检查,来使最小化的JS代码的一部分再次变得可读。

5. Stackblitz.com

该工具在许多开发人员中都很流行。Stackblitz为我们提供了使用全球范围内使用最广泛的IDE Visual Studio Code的机会。

一键安装Stackblitz即可快速安装Angular,React,Vue,Vanilla,RxJS,TypeScript项目。

当你想从浏览器中尝试任何现有JS平台中的一段代码或函数时,Stackblitz尤其有用。想象一下,你正在阅读Angular文章,偶然发现了你想要尝试的代码。只需单击几下,你就可以最小化浏览器并创建一个新的Angular项目。

11个web前端开发人员必备的在线工具,功能强大,值得收藏

 

 

6. JWT.io

如果你使用JSON Web令牌(JWT)保护你的应用程序,或者使用JWT为用户提供对后端受保护资源的访问权,则很有用。

决定是否应授予对路由或资源访问权限的一种方法是检查令牌的有效性。当我们想解码JWT以查看其有效负载时,jwt.io恰恰提供了这一点。

这个在线工具允许我们连接令牌以查看其有效载荷。插入令牌后,jwt.io会对其进行解码并显示其有用数据。

7. BundlePhobia.com

你是否曾经不确定过node_modules文件的大小,或者想知道计算机上将安装多大尺寸的pakckage.json?BundlePhobia给出了答案。

该工具允许你下载package.json文件,并显示将从package.json安装的依赖项的大小。

8. Babel REPL

Babel是一个免费的开源JS转译器,用于将现代ES代码转换为旧的ES5 JAVAScript。

该工具是Babeljs团队Web应用程序的在线设置,在其中我们可以将ES6 +代码转换为ES5。

它使你能够测试最近对ES的增补,或者测试在ECMA中增补的某些功能。IT专业人员可以预先优化代码,限制文件大小,并允许我们在整个编译过程中随时移动。

9. Prettier Playground

Prettier是一个功能强大的JS代码格式化程序。它通过分析代码并使用最佳的JS编码方法重写代码。

该工具在开发环境中被广泛使用,但是它也有一个在线平台,可以在该平台上预先优化代码。

11个web前端开发人员必备的在线工具,功能强大,值得收藏

 

 

10. Postman.com

此工具可帮助快速检查API端点:GET、POST、DELETE、OPTIONS、PUT,我一直在使用它。

11. JSLint

JS JSLint是世界上的领先者,这是一个JSLint在线版本,允许运行一个JS代码片段或JS文件浏览器。

11个web前端开发人员必备的在线工具,功能强大,值得收藏

 

 

结论

还有许多有用的工具,但这些是我的最爱。如有任何疑问,请在下面的评论区留言。



Tags:前端开发   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
作者:damyxu,腾讯 PCG 前端开发工程师iframe是一个天然的微前端方案,但受限于跨域的严格限制而无法很好的应用,本文介绍一种基于 iframe 的全新微前端方案,继承iframe的优点,补足...【详细内容】
2021-12-16  Tags: 前端开发  点击:(17)  评论:(0)  加入收藏
React 简介 React 基本使用<div id="test"></div><script type="text/javascript" src="../js/react.development.js"></script><script type="text/javascript" src="../js...【详细内容】
2021-11-30  Tags: 前端开发  点击:(19)  评论:(0)  加入收藏
一、Vue框架的开发流程介绍 当我们从github上下载一个前端模板框架到本地后,框架中经常会自带有一些跳转显示类的功能,我们可以通过查看这些功能是如何实现的,进而一步步改造为...【详细内容】
2021-11-03  Tags: 前端开发  点击:(34)  评论:(0)  加入收藏
一、Vue介绍1、什么是Vue 可以独立完成前后端分离式web项目的JavaScript框架2、学习Vue的原因三大主流框架之一:Angular React Vue先进的前端设计模式:MVVM可以完全脱离服务器...【详细内容】
2021-10-22  Tags: 前端开发  点击:(51)  评论:(0)  加入收藏
Web前端开发工程师需要核心掌握HTML/CSS/JS开发,在几年前HTML5标准进入国内后,得到了快速的应用于推广,开发人员为了实现更多的效果和功能,将HTML5的应用推崇到了极高的位置。作...【详细内容】
2021-09-17  Tags: 前端开发  点击:(61)  评论:(0)  加入收藏
前端开发一定会遇到框架的问题,那前端开发时用哪个框架好呢?哪个框架更适合前端初学者呢?我们就来梳理一下三大主流框架。 Reat.js(react)是脸书推出的一个用来构建用户界面的Jav...【详细内容】
2021-07-23  Tags: 前端开发  点击:(119)  评论:(0)  加入收藏
前言后端程序员们常常会争论“什么是最好的语言”,而对于前端来说,我们没有选择,无论爱与恨,我们只能选择 JavaScript 。所以前端日常的争论就变成了“什么是最好的框架”以及...【详细内容】
2021-04-08  Tags: 前端开发  点击:(291)  评论:(0)  加入收藏
基于Vue官方风格指南整理一、强制1. 组件名为多个单词组件名应该始终是多个单词的,根组件 App 除外。正例:export default { name: &#39;TodoItem&#39;, // ...}复制代码反例:e...【详细内容】
2021-03-10  Tags: 前端开发  点击:(287)  评论:(0)  加入收藏
不久之前,我开始为自己的新项目构建一套仪表板。这套仪表板中包含一个 Node.js API 网关(仍处于起步阶段),外加用于记录的 Clickhouse:https://github.com/restyler/api-gateway...【详细内容】
2020-11-05  Tags: 前端开发  点击:(97)  评论:(0)  加入收藏
在这篇文章中,我们向您展示了一个将工具和服务分类为bucket的框架,它可能会在前端开发过程中对您有所帮助。在每个类别中,我们都会讨论一个受欢迎的选择,同时也会给您一个可供选...【详细内容】
2020-09-21  Tags: 前端开发  点击:(64)  评论:(0)  加入收藏
▌简易百科推荐
本文分为三个等级自顶向下地分析了glibc中内存分配与回收的过程。本文不过度关注细节,因此只是分别从arena层次、bin层次、chunk层次进行图解,而不涉及有关指针的具体操作。前...【详细内容】
2021-12-28  linux技术栈    Tags:glibc   点击:(3)  评论:(0)  加入收藏
摘 要 (OF作品展示)OF之前介绍了用python实现数据可视化、数据分析及一些小项目,但基本都是后端的知识。想要做一个好看的可视化大屏,我们还要学一些前端的知识(vue),网上有很多比...【详细内容】
2021-12-27  项目与数据管理    Tags:Vue   点击:(2)  评论:(0)  加入收藏
程序是如何被执行的&emsp;&emsp;程序是如何被执行的?许多开发者可能也没法回答这个问题,大多数人更注重的是如何编写程序,却不会太注意编写好的程序是如何被运行,这并不是一个好...【详细内容】
2021-12-23  IT学习日记    Tags:程序   点击:(9)  评论:(0)  加入收藏
阅读收获✔️1. 了解单点登录实现原理✔️2. 掌握快速使用xxl-sso接入单点登录功能一、早期的多系统登录解决方案 单系统登录解决方案的核心是cookie,cookie携带会话id在浏览器...【详细内容】
2021-12-23  程序yuan    Tags:单点登录(   点击:(8)  评论:(0)  加入收藏
下载Eclipse RCP IDE如果你电脑上还没有安装Eclipse,那么请到这里下载对应版本的软件进行安装。具体的安装步骤就不在这赘述了。创建第一个标准Eclipse RCP应用(总共分为六步)1...【详细内容】
2021-12-22  阿福ChrisYuan    Tags:RCP应用   点击:(7)  评论:(0)  加入收藏
今天想简单聊一聊 Token 的 Value Capture,就是币的价值问题。首先说明啊,这个话题包含的内容非常之光,Token 的经济学设计也可以包含诸多问题,所以几乎不可能把这个问题说的清...【详细内容】
2021-12-21  唐少华TSH    Tags:Token   点击:(10)  评论:(0)  加入收藏
实现效果:假如有10条数据,分组展示,默认在当前页面展示4个,点击换一批,从第5个开始继续展示,到最后一组,再重新返回到第一组 data() { return { qList: [], //处理后...【详细内容】
2021-12-17  Mason程    Tags:VUE   点击:(14)  评论:(0)  加入收藏
什么是性能调优?(what) 为什么需要性能调优?(why) 什么时候需要性能调优?(when) 什么地方需要性能调优?(where) 什么时候来进行性能调优?(who) 怎么样进行性能调优?(How) 硬件配...【详细内容】
2021-12-16  软件测试小p    Tags:性能调优   点击:(20)  评论:(0)  加入收藏
Tasker 是一款适用于 Android 设备的高级自动化应用,它可以通过脚本让重复性的操作自动运行,提高效率。 不知道从哪里听说的抖音 app 会导致 OLED 屏幕烧屏。于是就现学现卖,自...【详细内容】
2021-12-15  ITBang    Tags:抖音防烧屏   点击:(25)  评论:(0)  加入收藏
11 月 23 日,Rust Moderation Team(审核团队)在 GitHub 上发布了辞职公告,即刻生效。根据公告,审核团队集体辞职是为了抗议 Rust 核心团队(Core team)在执行社区行为准则和标准上...【详细内容】
2021-12-15  InfoQ    Tags:Rust   点击:(25)  评论:(0)  加入收藏
最新更新
栏目热门
栏目头条