前端日常開發中，我們使用喜愛的 IDE 調試 JavaScript 代碼，比如我喜歡的代碼編輯器有兩個，Sublime Text 3 和 VS Code，前幾年還使用過 Atom，偶爾我們會遇到臨時需要快速分享給同事或者朋友一段代碼的場景，那么在線的 JavaScript 運行環境的重要性就體現出來了。

[[282341]] 

為了解決這樣的問題，業界涌現出了很多很優秀的在線編輯器。比如 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"] } }  

效果圖

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 } } ] }  

效果圖

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

工具對比

總結

其實對于我而言

•  如果想運行一段代碼得到測試結果，最快的方式會選用瀏覽器控制臺，因為瀏覽器就是最棒的工具
•  如果想要寫一個 demo 放在博客上，我會選擇 jsfiddle、codepen、codesandbox，這里提供了寫demo需要的一切
•  如果想分享漂亮的代碼片段，我會使用 Carbonize 生成一張圖片，就像博文開頭的那張圖片

使用在線編輯器的意義我覺得在于快捷、便于分享與協作，而很愛的其實還是VSCode。

沒準兒你正在編寫你的 playground，或者你有更好的工具，希望和大家一起分享