前端日常開(kāi)發(fā)中，我們使用喜愛(ài)的 IDE 調(diào)試 JavaScript 代碼，比如我喜歡的代碼編輯器有兩個(gè)，Sublime Text 3 和 VS Code，前幾年還使用過(guò) Atom，偶爾我們會(huì)遇到臨時(shí)需要快速分享給同事或者朋友一段代碼的場(chǎng)景，那么在線的 JavaScript 運(yùn)行環(huán)境的重要性就體現(xiàn)出來(lái)了。

[[282341]] 

為了解決這樣的問(wèn)題，業(yè)界涌現(xiàn)出了很多很優(yōu)秀的在線編輯器。比如 JS Bin、JS Fiddle、Code Pen、Code Sandbox 等，接觸前端這些年也陸陸續(xù)續(xù)發(fā)現(xiàn)了一些不錯(cuò)的其他選擇，再看下瀏覽器收藏夾，已經(jīng)有20余種。

下面我們使用20種工具執(zhí)行一段經(jīng)過(guò)尾遞歸優(yōu)化過(guò)的階乘函數(shù)。

1、使用 iTerm2

在終端工具中安裝 node 環(huán)境，使用 node 運(yùn)行環(huán)境來(lái)執(zhí)行 JS 代碼是我們學(xué)習(xí) node 時(shí)候必知必會(huì)的一件事。

2、使用 Sublime Text 3

在 Sublime Text 3 中，我們可以使用 build system 來(lái)創(chuàng)建構(gòu)建命令，使用構(gòu)建命令來(lái)快速執(zhí)行 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 中，我們可以建立一個(gè) task 來(lái)運(yùn)行 JS，實(shí)際上是借助內(nèi)置終端來(lái)執(zhí)行 node 命令運(yùn)行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、使用瀏覽器控制臺(tái)

我們經(jīng)常使用瀏覽器的 Console 功能來(lái)調(diào)試 JS 代碼，比如 Chrome 的 DevTools，火狐的 Web 控制臺(tái)，這些我們已經(jīng)不陌生了。

5、使用 Firefox 代碼草稿紙

在 Firefox 瀏覽器中，有一個(gè)特別好用的功能叫 代碼草稿紙，你可以在這里面輸入一些 JS 代碼執(zhí)行查看結(jié)果。

快捷鍵：在火狐瀏覽器下 Shift + F4

6、使用 Chrome Sources 面板

Chrome 提供了強(qiáng)大的 DevTools，其中 Sources 面板允許你建立一些 Snippets方便執(zhí)行 JS 代碼。

快捷鍵：CMD + Enter 執(zhí)行代碼

7、使用 JS Bin

JS Bin 是一個(gè)開(kāi)源的用于 debug web 應(yīng)用的工具，工具面板具有 Console，可以用于執(zhí)行 JS 代碼。

8、使用 JS Fiddle

JS Fiddle 是一個(gè)前端同學(xué)經(jīng)常寫 demo 例子的好地方，這里可以以 CDN 的方式使用一些第三方類庫(kù)，很方便搭建頁(yè)面demo。

因?yàn)?JS Fiddle 工具本身并沒(méi)有提供 console 面板，所以可以配合瀏覽器開(kāi)發(fā)者工具來(lái)打印輸出 JS 代碼結(jié)果。

9、使用 CodePen

CodePen 是一個(gè)非常棒的在線代碼編輯器，幾乎可以編寫所有的前端Web應(yīng)用。在這里使用它來(lái)執(zhí)行一段 JS 代碼真的是大才小用了。

10、使用 MDN 的 “JavaScript Demo”

經(jīng)常查閱 MDN 的小伙伴一定能記得，在一些 JavaScript 文檔中會(huì)有一個(gè) JavaScript Demo小工具，比如說(shuō) JavaScript 標(biāo)準(zhǔn)內(nèi)置對(duì)象 Function，在這里可以執(zhí)行一些 JS 代碼。

11、使用 PLAYCODE

PLAYCODE 提供了在線快速運(yùn)行 Web 程序的環(huán)境。

12、使用 Flems

Flems 提供了一個(gè) Web 開(kāi)發(fā)環(huán)境，可以分享一些前端小demo。

13、使用 JSitor

JSitor 是一個(gè)不錯(cuò)的在線執(zhí)行 JS 代碼工具，我比較喜歡它的代碼截圖功能，能生存很漂亮的代碼截圖圖片，不過(guò)目前功能還不是特別完善，比如代碼的高亮?xí)簳r(shí)是個(gè)問(wèn)題。

14、使用 Code Sandbox

Code Sandbox 是一個(gè)在線的可以創(chuàng)建Web應(yīng)用，特點(diǎn)是可以使用一些類庫(kù)模版，比如 React/Vue/Angular 是創(chuàng)作原型的好地方，我經(jīng)常使用它來(lái)編寫一些 Vue 小 Demo。

15、使用 Web Maker

Web Maker 是一個(gè)可以快速在瀏覽器創(chuàng)建離線Web應(yīng)用，Web Maker 還提供了 Chrome 插件，可以離線使用。

16、使用 LeetCode Playground

LeetCode 提供了優(yōu)秀的 Playground 工具，支持各種語(yǔ)言版本切換，其中也支持 JavaScript，還能沒(méi)事兒刷刷題不是。

17、使用 Repl.it

Repl.it 是一個(gè)一站式可在線構(gòu)建、協(xié)作的IDE，同時(shí)也提供了 Node 運(yùn)行環(huán)境，還可以連接 github 使用 gist 同步代碼片段。

18、使用 RunKit + npm

RunKit + npm 在 npm 上我們能發(fā)現(xiàn)很多優(yōu)秀的庫(kù)，npm 提供了一個(gè)功能，可以使用 RunKit取運(yùn)行測(cè)試你的 package，當(dāng)然也能測(cè)試一段代碼。

19、使用 StackBlitz

StackBlitz 有在線 VSCode 之稱，編輯器使用的是微軟開(kāi)源的 Monaco Editor，和 Code Sandbox 類似，提供了一些類庫(kù)模版，但是目前還沒(méi)有 Vue 的。

20、使用 Plunker Next

Plunker Next 新版的 Plunker 提供了在線創(chuàng)建小 demo 的能力，同時(shí)也便于分享。

其他

好用的工具層出不窮，其實(shí)還有一些其他的工具或者解決方案可以作為選擇，比如下面四個(gè)不同的類型，我每個(gè)挑選了一個(gè)代表工具。

在線編程

•  scrimba - The interactive screencasting platform

本地應(yīng)用

•  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.

云開(kāi)發(fā)環(huán)境

•  Visual Studio Online - Cloud-powered dev environments accessible from anywhere

工具對(duì)比

總結(jié)

其實(shí)對(duì)于我而言

•  如果想運(yùn)行一段代碼得到測(cè)試結(jié)果，最快的方式會(huì)選用瀏覽器控制臺(tái)，因?yàn)闉g覽器就是最棒的工具
•  如果想要寫一個(gè) demo 放在博客上，我會(huì)選擇 jsfiddle、codepen、codesandbox，這里提供了寫demo需要的一切
•  如果想分享漂亮的代碼片段，我會(huì)使用 Carbonize 生成一張圖片，就像博文開(kāi)頭的那張圖片

使用在線編輯器的意義我覺(jué)得在于快捷、便于分享與協(xié)作，而很愛(ài)的其實(shí)還是VSCode。

沒(méi)準(zhǔn)兒你正在編寫你的 playground，或者你有更好的工具，希望和大家一起分享