运行 JavaScript 代码片段的 20 种工具
前端日常开发中,我们使用喜爱的 IDE 调试 JavaScript
代码,比如我喜欢的代码编辑器有两个,Sublime Text 3 和 VS Code,前几年还使用过 Atom,偶尔我们会遇到临时需要快速分享给同事或者朋友一段代码的场景,那么在线的 JavaScript 运行环境的重要性就体现出来了。
为了解决这样的问题,业界涌现出了很多很优秀的在线编辑器。比如 JS Bin
、JS Fiddle
、Code Pen
、Code Sandbox
等,接触前端这些年也陆陆续续发现了一些不错的其他选择,再看下浏览器收藏夹,已经有20余种。
下面我们使用20种工具执行一段经过尾递归优化过的阶乘函数
# 1、使用 iTerm2
在终端工具中安装 node
环境,使用 node 运行环境来执行 JS 代码是我们学习 node 时候必知必会的一件事
# 2、使用 Sublime Text 3
在 Sublime Text 3 中,我们可以使用 build system
来创建构建命令,使用构建命令来快速执行 JS 代码
快捷键:CMD + B
# 配置文件
首先安装依赖 babel-cli
npm i -g babel-cli
新建 build system
{
"path": "/usr/local/bin",
"working_dir": "${project_path:${folder}}",
"selector": "source.js",
"encoding": "utf-8",
"shell": true,
"windows": {
"cmd": ["taskkill /f /im node.exe >nul 2>nul & node $file"]
},
"osx": {
"cmd": ["killall node >/dev/null 2>&1; node $file"]
},
"linux": {
"cmd": ["killall node >/dev/null 2>&1; node $file"]
}
}
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# 效果图
# 3、使用 VSCode
在 VSCode 中,我们可以建立一个 task
来运行 JS,实际上是借助内置终端来执行 node
命令运行JS
快捷键:CMD + Shift + B
# 配置文件
/.vscode/tasks.json
{
// See https://go.microsoft.com/fwlink/?LinkId=733558
// for the documentation about the tasks.json format
"version": "2.0.0",
"tasks": [
{
"label": "Run ES6",
"type": "shell",
"command": "node ${file}",
"group": {
"kind": "build",
"isDefault": true
}
}
]
}
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# 效果图
# 4、使用浏览器控制台
我们经常使用浏览器的 Console 功能来调试 JS 代码,比如 Chrome 的 DevTools,火狐的 Web 控制台,这些我们已经不陌生了
# 5、使用 Firefox 代码草稿纸
在 Firefox
浏览器中,有一个特别好用的功能叫 代码草稿纸,你可以在这里面输入一些 JS 代码执行查看结果
快捷键:在火狐浏览器下 Shift + F4
# 6、使用 Chrome Sources 面板
Chrome 提供了强大的 DevTools,其中 Sources
面板允许你建立一些 Snippets
方便执行 JS 代码
快捷键:CMD + Enter
执行代码
# 7、使用 JS Bin
JS Bin 是一个开源的用于 debug
web 应用的工具,工具面板具有 Console
,可以用于执行 JS 代码
# 8、使用 JS Fiddle
JS Fiddle 是一个前端同学经常写 demo 例子的好地方,这里可以以 CDN 的方式使用一些第三方类库,很方便搭建页面demo。
因为 JS Fiddle 工具本身并没有提供 console 面板,所以可以配合浏览器开发者工具来打印输出 JS 代码结果
# 9、使用 CodePen
CodePen 是一个非常棒的在线代码编辑器,几乎可以编写所有的前端Web应用。在这里使用它来执行一段 JS 代码真的是大才小用了。
# 10、使用 MDN 的 “JavaScript Demo”
经常查阅 MDN 的小伙伴一定能记得,在一些 JavaScript 文档中会有一个 JavaScript Demo
小工具,比如说 JavaScript 标准内置对象 Function,在这里可以执行一些 JS 代码
# 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
# 👀 工具对比
运行工具 | 推荐星级 | Console 面板 | 离线可用 |
---|---|---|---|
JS Bin | 🌟🌟🌟🌟 | 有 | 否 |
JS Fiddle | 🌟🌟🌟🌟🌟 | 无 | 否 |
CodePen | 🌟🌟🌟🌟🌟 | 有 | 否 |
PLAYCODE | 🌟🌟🌟 | 有 | 否 |
Flems | 🌟🌟🌟 | 有 | 否 |
JSitor | 🌟🌟🌟 | 有 | 否 |
Code Sandbox | 🌟🌟🌟🌟🌟 | 有 | 否 |
Web Marker | 🌟🌟🌟🌟 | 有 | 是 |
LeetCode | 🌟🌟🌟🌟🌟 | 有 | 否 |
Repl.it | 🌟🌟🌟 | 有 | 否 |
RunKit + npm | 🌟🌟🌟🌟 | 有 | 否 |
StackBlitz | 🌟🌟🌟 | 有 | 否 |
Plunker Next | 🌟🌟🌟 | 有 | 否 |
# 总结
其实对于我而言
- 如果想运行一段代码得到测试结果,最快的方式会选用浏览器控制台,因为浏览器就是最棒的工具
- 如果想要写一个 demo 放在博客上,我会选择
jsfiddle
、codepen
、codesandbox
,这里提供了写demo需要的一切 - 如果想分享漂亮的代码片段,我会使用 Carbonize 生成一张图片,就像博文开头的那张图片
使用在线编辑器的意义我觉得在于快捷、便于分享与协作,而最爱的其实还是VSCode。
没准儿你正在编写你的 playground,或者你有更好的工具,希望留言和大家一起分享。