网上有很多很棒的工具,让作为前端开发人员的咱们生存的更加轻松。在这篇文章中,我将疾速介绍一下我在开发工作中常常应用的 11 种工具。
Node.green
用来查问以后 Node 版本是否某些性能。例如, 对象开展符(Rest/Spread Properties)
能够看到在 Node v8.3.0
以下是不反对的。别离在 Node v8.5.0
和 v8.2.1
下运行以下代码片段
const a = {foo: 1};
console.log({...a, b: 2});
当你遇到以上谬误,那大多就是 Node
版本问题啦。
在线地址: https://node.green/
CanIUse
当你想要确定某个 Web API 的兼容性的时候,这个在线工具将轻松搞定。
假如咱们想晓得哪些浏览器及其版本将反对 Web Share API:navigator.share(...
查看后果。浏览器和反对 navigator.share(…)
的版本都列出了。
在线地址: https://caniuse.com/
Minify
为了缩小利用程序代码的包大小,咱们在公布到到生产环境的时候,须要使它们最小化。最小化打消了空格,有效代码等。这可能使利用程序包大小的显着减小,从而节俭浏览器上的加载工夫。(尽管在当下,有 webpack uglifyJS 等插件,然而当我在开发非打包的简略利用的时候,这个是一个不错的抉择。)
在线地址: https://www.minifier.org/
Bit.dev
Bit.dev
是一个十分棒的组件核心。能够用它来托管,记录和治理来自不同我的项目的可复用组件。这是减少代码复用,减速开发并优化团队合作的好办法。
这也是从头开始构建设计零碎的不错抉择(因为它实质上具备设计零碎所需的所有)。Bit.dev
与 Bit
完满配合,Bit 是解决组件隔离和公布的开源工具。
Bit.dev
反对 React
,带有TypeScript
的React
,Angular
,Vue
等。
在线地址: https://bit.dev/
Unminify
收费的在线工具,用于最小化(解压,反混同)JavaScript,CSS 和 HTML 代码,使其可读性强,好看
在线地址: https://unminify.com/
Stackblitz
这是每个人都喜爱的工具。Stackblitz 使咱们可能应用世界上最风行和应用最多的 IDE,即 web 上的 Visual Studio 代码。
只需单击一下,Stackblitz
即可疾速提供 Angular
,React
,Vue
,Vanilla
,RxJS
,TypeScript
我的项目的框架。
当你想从浏览器中尝试一段代码或任何以后 JS 框架中的性能时,Stackblitz
十分有用。假如你正在浏览 Angular
文章,并且遇到了想要尝试的代码。您能够最小化您的浏览器并疾速搭建一个新的 Angular 我的项目。
还有其余很棒的在线 IDE,然而我置信 Stackblitz
的转折点是应用每个人都喜爱的 Visual Studio Code
感觉和工具。(ps: 自己应用体验, 十分疾速晦涩, 附上图,比 sandbox 快很多)
在线地址: https://stackblitz.com/
JWT.io
如果您应用 JSON Web 令牌(JWT)爱护应用程序平安,或者应用 JWT 容许用户拜访后端的受爱护资源。
决定是否应拜访路线或资源的一种办法是查看令牌的到期工夫。有时候咱们想要解码 JWT 以查看其无效 payload
,jwt.io 恰好提供了这一点。
这个在线工具使咱们可能插入令牌以查看其无效 payload
。一旦咱们粘贴了令牌,jwt.io
便对该令牌进行解码并显示其无效payload
。
在线地址: https://jwt.io/
BundlePhobia
您是否已经不确定过 node_modules
的大小,或者只是想晓得将 pakckage.json
装置在您的计算机中的大小?BundlePhobia 提供了答案
该工具使咱们可能加载 package.json 文件,并显示将从 package.json 装置的依赖项的大小,也能够查问单包的体积。
在线地址: https://bundlephobia.com/
Babel REPL
Babel
是一个收费的凋谢源代码 JS 转编译器,用于将古代 ES 代码转换为一般的 ES5 JavaScript。
该工具是 Babeljs 团队在网上建设的 Web 利用,能够将 ES6 + 代码转换为 ES5。
自己总结的两个比拟不便的应用形式
- 方面面试时在线写高级语法。
- 能够疾速查看某些 polyfill 是怎么写的。
在线地址: https://babeljs.io/en/repl
Prettier Playground
Prettier 是一个自以为是的 JS 代码格式化程序。它通过解析代码并应用 JS 最佳编码实际将其从新打印来施行统一的款式。
该工具已在咱们的开发环境中宽泛应用,但它也具备一个在线地址,你能够在其中丑化您的代码。
在线地址: https://prettier.io/playground
postwoman
postwoman
是一款功能强大的网页调试和模仿发送 HTTP 申请的 Chrome 插件,反对简直所有类型的 HTTP 申请,操作简略且不便。可用于接口测试,比方测试你用 easy-mock 生成的接口。
在线地址: https://postwoman.io/
本文翻译自 https://blog.bitsrc.io/12-use… 然而不仅仅是单纯地翻译,替换了原文中一些我感觉不太实用的并退出一些本人的总结。
最初
如果我的文章有帮忙到你,心愿你也能帮忙我,欢送关注我的微信公众号 秋风的笔记
,回复 好友
二次,可加微信并且退出交换群, 秋风的笔记
将始终陪伴你的左右。