文章插图
11、使用 PLAYCODE
PLAYCODE 提供了在线快速运行 Web 程序的环境 。
文章插图
12、使用 Flems
Flems 提供了一个 Web 开发环境，可以分享一些前端小demo 。
文章插图
13、使用 JSitor
JSitor 是一个不错的在线执行 JS 代码工具，我比较喜欢它的代码截图功能，能生存很漂亮的代码截图图片，不过目前功能还不是特别完善，比如代码的高亮暂时是个问题 。
文章插图
14、使用 Code Sandbox
Code Sandbox 是一个在线的可以创建Web应用，特点是可以使用一些类库模版，比如 React/Vue/Angular 是创作原型的好地方，我经常使用它来编写一些 Vue 小 Demo 。
文章插图
15、使用 Web Maker
Web Maker 是一个可以快速在浏览器创建离线Web应用，Web Maker 还提供了 Chrome 插件，可以离线使用 。
文章插图
16、使用 LeetCode Playground
LeetCode 提供了优秀的 Playground 工具，支持各种语言版本切换，其中也支持 JavaScript，还能没事儿刷刷题不是 。
文章插图
17、使用 Repl.it
Repl.it 是一个一站式可在线构建、协作的IDE，同时也提供了 Node 运行环境，还可以连接 github 使用 gist 同步代码片段 。
文章插图
18、使用 RunKit + npm
RunKit + npm 在 npm 上我们能发现很多优秀的库，npm 提供了一个功能，可以使用 RunKit取运行测试你的 package，当然也能测试一段代码 。
文章插图
19、使用 StackBlitz
StackBlitz 有在线 VSCode 之称，编辑器使用的是微软开源的 Monaco Editor，和 Code Sandbox 类似，提供了一些类库模版，但是目前还没有 Vue 的 。
文章插图
20、使用 Plunker Next
Plunker Next 新版的 Plunker 提供了在线创建小 demo 的能力，同时也便于分享 。
文章插图
其他
好用的工具层出不穷，其实还有一些其他的工具或者解决方案可以作为选择，比如下面四个不同的类型，我每个挑选了一个代表工具 。
在线编程
- scrimba - The interactive screencasting platform
- RunJS - A scratchpad for your thoughts, a playground for your creativity...
Quokka.js - Quokka.js is a developer productivity tool for rapid JavaScript / TypeScript prototyping. Runtime values are updated and displayed in your IDE next to your code, as you type.
云开发环境
- Visual Studio Online - Cloud-powered dev environments accessible from anywhere
文章插图
总结
其实对于我而言
- 如果想运行一段代码得到测试结果，最快的方式会选用浏览器控制台，因为浏览器就是最棒的工具
- 如果想要写一个 demo 放在博客上，我会选择 jsfiddle、codepen、codesandbox，这里提供了写demo需要的一切
- 如果想分享漂亮的代码片段，我会使用 Carbonize 生成一张图片，就像博文开头的那张图片
【运行 JavaScript 代码片段的 20 种工具】没准儿你正在编写你的 playground，或者你有更好的工具，希望和大家一起分享
推荐阅读
- 博士|复旦博士写了130行代码：2分钟搞定繁琐的核酸筛查
- 十五个常见的WordPresswp-config.php设置代码
- 如何优雅的在头条插入代码，介绍几款在线源代码转图片工具
- 暴雪|魔兽正式服：玩家复原暴雪代码，10.0增加新职业，兼顾3个职责？
- Java｜剖析类内的五类成员：属性、方法、构造器、代码块、内部类
- win10激活提示错误代码的解决办法
- JavaScript 中对于Promise的理解
- 淘宝客选品库php代码
- 哈雷特彗星绕太阳的运行周期 哈雷彗星绕太阳周期为
- 让你的Mac运行流畅的5个实用技巧