在前端日常开发中，我们使用自己喜欢的IDE来调试JavaScript代码。例如，我有两个最喜欢的代码编辑器，SublimeText3和VSCode。几年前我也用过Atom，偶尔会遇到临时需要快速分享一段代码给同事或者朋友，所以线上JavaScript运行环境的重要性就体现出来了。为了解决此类问题，业界涌现出许多优秀的在线编辑器。比如JSBin,JSFiddle,CodePen,CodeSandbox等等。接触前端这些年，也陆续发现了一些不错的选择。翻看浏览器收藏夹，已经有20多种了。下面我们使用20个工具来执行尾递归优化的阶乘函数。1、使用iTerm2在终端工具中安装node环境，使用node运行环境执行JS代码是我们学习node必须要知道的。2、使用SublimeText3在SublimeText3中，我们可以使用构建系统创建构建命令，使用构建命令快速执行JS代码。快捷键：CMD+B首先安装配置文件，依赖babel-clinpmi-gbabel-cli新建构建系统{"path":"/usr/local/bin","working_dir":"${project_path:${folder}}","selector":"source.js","encoding":"utf-8","shell":true,"windows":{"cmd":["taskkill/f/imnode.exe>nul2>nul&node$文件"]},"osx":{"cmd":["killallnode>/dev/null2>&1;node$file"]},"linux":{"cmd":["killallnode>/dev/null2>&1;node$file"]}}效果图3.使用VSCode在VSCode中，我们可以创建一个任务来运行JS，实际上是使用内置的终端执行node命令来运行JS。快捷键：CMD+Shift+B配置文件/.vscode/tasks.json{//参见https://go.microsoft.com/fwlink/?LinkId=733558//forthedocumentationaboutthetasks.jsonformat"version":"2.0.0","tasks":[{"label":"RunES6","type":"shell","command":"node${file}","group":{"kind":"build","isDefault":true}}]}效果图4.使用浏览器控制台我们经常会用到浏览器的Console功能来调试JS代码，比如Chrome的DevTools，Firefox的Web控制台，这些我们都不陌生。5、使用FirefoxCodeScratchPaper在Firefox浏览器中，有一个特别好用的功能叫做CodeScratchPaper，你可以在其中输入一些JS代码来执行并查看结果。快捷键：Firefox浏览器下的Shift+F46，使用ChromeSources面板Chrome提供了一个强大的DevTools，Sources面板可以让你创建一些Snippets，方便执行JS代码。快捷键：CMD+Enter执行代码7、使用JSBinJSBin是一个开源的web应用调试工具。工具面板有一个控制台，可以用来执行JS代码。8、使用JSFiddleJSFiddle是前端同学经常写demo例子的好地方。这里可以使用CDN形式的一些第三方库，非常方便的搭建页面demo。因为JSFiddle工具本身不提供控制台面板，所以可以配合浏览器开发者工具打印出JS代码结果。9.使用CodePenCodePen是一个很棒的在线代码编辑器，几乎可以编写所有的前端Web应用程序。在这里用它来执行一段JS代码，实在是大材小用。10、使用MDN的“JavaScriptDemo”经常参考MDN的朋友一定记得在一些JavaScript文档中会有一个JavaScriptDemowidget，比如JavaScript标准内置对象Function，可以在其中执行一些JS代码。11.使用PLAYCODEPLAYCODE提供了一个快速在线运行Web程序的环境。12.使用FlemsFlems提供了一个web开发环境，可以分享一些前端小demo。13、使用JSitorJSitor是一个在线执行JS代码的好工具。比较喜欢它的代码截图功能，可以保存漂亮的代码截图图片，但是目前功能还不是特别完善。比如代码的高亮暂时是个问题。14.使用CodeSandboxCodeSandbox是一个可以创建的在线网络应用程序。它的特点是使用了一些类库模板。例如，React/Vue/Angular是创建原型的好地方。我经常用它来写一些Vue的小demo。15.使用WebMakerWebMaker是一款可以快速创建离线Web应用程序的浏览器。WebMaker还提供了一个可以离线使用的Chrome插件。16.使用LeetCodePlaygroundLeetCode提供了一个优秀的playground工具，支持在包括JavaScript在内的各种语言版本之间切换，让你可以刷题。17.使用Repl.itRepl.it是一个在线构建和协作的一站式IDE。它还提供了Node运行环境，也可以连接到github，使用gist同步代码片段。18.使用RunKit+npmRunKit+npm我们可以在npm上找到很多优秀的库，npm提供了一个功能，你可以使用RunKit来获取并运行你的包，当然你也可以测试一段代码。19.使用StackBlitzStackBlitz被称为在线VSCode。编辑器使用微软开源的MonacoEditor，类似于CodeSandbox，提供了一些类库模板，但是目前还没有Vue。20.使用PlunkerNextPlunkerNext新版本的Plunker提供了在线创建小演示的能力，也很容易分享。其他有用的工具层出不穷。事实上，还有一些其他的工具或解决方案可以作为选择。例如，我为以下四种不同类型分别选择了具有代表性的工具。在线编程scrimba-交互式截屏平台本地应用程序RunJS-思想的便签本，创造力的游乐场......编辑器插件Quokka.js-Quokka.js是用于快速JavaScript/TypeScript原型制作的开发人员生产力工具。当您键入时，运行时值会更新并显示在您的代码旁边。ClouddevelopmentenvironmentVisualStudioOnline-Cloud-powereddevenvironmentsaccessiblefromanywhere工具比较总结其实对我来说，如果要运行一段代码得到测试结果，最快我会选择浏览器控制台，因为浏览器是最好的工具。如果你想写一个demo放在博客上，我会选择jsfiddle、codepen、codesandbox，它们提供了你写demo所需的一切。如果你想分享一个漂亮的代码片段，我会使用Carbonize生成一张图片，就像博文开头的图片一样。我认为使用在线编辑器的意义在于它快速、易于共享和协作，我仍然非常喜欢VSCode。也许你正在写你的游乐场，或者你有更好的工具，希望能分享给大家
