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

2020-03-17

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

1. caniuse.com

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

结论

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