Internet上有很多很棒的工具，让我们前端开发者的生活更轻松。在本文中，我将简要介绍我在开发工作中经常使用的11种工具。Node.green用于查询当前Node版本是否具备某些功能。例如，在Nodev8.3.0以下可以看到对象传播器（Rest/SpreadProperties）不受支持。分别在Nodev8.5.0和v8.2.1下运行以下代码片段consta={foo:1};console.log({...a,b:2});遇到以上错误，多半是Node版本问题。在线地址：https://node.green/CanIUse当你想判断某个WebAPI的兼容性时，这个在线工具可以轻松搞定。假设我们想知道哪些浏览器及其版本会支持WebShareAPI：navigator.share(...查看结果。支持navigator.share(...)的浏览器和版本都列出来了。在线地址：https://caniuse.com/Minify为了减少应用程序代码的包大小，我们需要在发布到生产环境时将它们最小化。最小化消除了空白、死代码等。这可以显着减少应用程序包的大小减少以节省浏览器加载时间。（虽然目前有webpackuglifyJS等插件，但是当我开发一个不打包的简单应用时，这是一个不错的选择。）在线地址：https://www.minifier。org/Bit.devBit.dev是一个很棒的组件中心。用它来托管、记录和管理来自不同项目的可重用组件。这是增加代码重用、加速开发和优化团队协作的好方法。这也是一个很好的方式从头开始构建设计系统的选项（因为它基本上包含设计系统所需的一切）。Bit.dev与Bit完美配合，Bit是处理组件隔离和发布的开源工具。Bit.devdev支持React、ReactwithTypeScript、Angular、Vue等。在线地址：https://bit.dev/Unminify免费在线工具，用于最小化（解压缩、反混淆）JavaScript、CSS和HTML代码，使其可读性和美观在线地址：https://unminify.com/Stackblitz这个是大家的最爱工具。Stackblitz让我们可以访问世界上最流行和使用最多的IDE，即Web上的VisualStudioCode。Stackblitz一键快速提供Angular、React、Vue、Vanilla、RxJS、TypeScript项目的框架。当您想从浏览器尝试任何当前JS框架中的一段代码或功能时，Stackblitz非常有用。假设您正在阅读Angular文章，并且遇到了您想尝试的代码。您可以最小化浏览器并快速启动一个新的Angular项目。网上还有其他很棒的IDE，但我相信Stackblitz的转折点是使用每个人都喜欢的VisualStudioCode感觉和工具。（ps：我自己的体验，很快很流畅，附上图片，比sandbox快很多）在线地址：https://stackblitz.com/JWT.io如果你使用JSONWebToken（JWT）来保护应用安全，或者使用JWT允许用户访问后端受保护的资源。决定是否应该访问路由或资源的一种方法是检查令牌的到期时间。有时我们想解码JWT以查看其有效负载，而jwt.io正好提供了这一功能。这个在线工具允许我们插入令牌以查看其有效负载。一旦我们粘贴了令牌，jwt.io就会解码令牌并显示其有效负载。在线地址：https://jwt.io/BundlePhobia你是否曾经不确定node_modules的大小，或者只是想知道在你的电脑中安装多大的pakckage.json？BundlePhobia提供了答案。这个工具允许我们加载一个package.json文件并显示将从package.json安装的依赖项的大小，以及查询单个包的体积。在线地址：https://bundlephobia.com/BabelREPLBabel是一个免费开源的JS转译器，用于将现代ES代码转换为纯ES5JavaScript。这个工具是Babeljs团队在Web上构建的一个Web应用程序，可以将ES6+代码转译为ES5。我总结的两种比较方便的方法是面试的时候在线写高级语法。您可以快速查看某些polyfill是如何编写的。在线地址：https://babeljs.io/en/replPrettierPlaygroundPrettier是一个自以为是的JS代码格式化器。它通过解析代码并使用JS最佳编码实践重新打印来强制执行一致的样式。这个工具在我们的开发环境中被广泛使用，但它也有一个在线位置，您可以在其中美化您的代码。在线地址：https://prettier.io/playgroundpostwomanpostwoman是一款功能强大的Chrome插件，用于网页调试和模拟发送HTTP请求。支持几乎所有类型的HTTP请求，操作简单方便。可以用来做接口测试，比如测试你用easy-mock生成的接口。在线地址：https://postwoman.io/本文翻译自https://blog.bitsrc.io/12-use...但它不仅仅是简单的翻译，它取代了我原来的一些原文觉得不是很实用，加点自己的总结。最后，如果我的文章对你有帮助，希望你也能帮到我。欢迎关注我的微信公众号秋风的手记，回复好友两次，可以加微信加入交流群，秋风的手记永远伴随你左右。
