In the daily development of the front end, we use our favorite IDE to debug JavaScript code. For example, I like two code editors, Sublime Text 3 and VS Code. I also used Atom in previous years.

Occasionally, we find ourselves needing to quickly share and or collaborate with a friend or colleague in our local projects, the importance of the online JavaScript runtime environment is reflected.

In order to slove such problems，many excellent online editors have emerged in the industry. For example JS Bin、JS Fiddle、Code Pen、Code Sandbox, etc. I also found some good other options in the past few years, and then look at the browser favorites, there are more than 20 kinds.

Now we use 20 tools to execute a factorial function that has been optimized by TCO.

1、iTerm2

Installing the node environment in the terminal tool and using the node runtime environment to execute the JS code is a must for us to learn the node.

2、Sublime Text 3

In Sublime Text 3，we can use build system create build command，use build command run js code quickly

Shortcuts：CMD + B

config file

fisrt install the dep babel-cli

npm i -g babel-cli

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

Preview

3、VSCode

In VSCode，we can run JS with task，actually we run js by node use the termnal

Shortcuts：CMD + Shift + B

Config File

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

Preview

4、use browser console

we use browse console feature debug js code offen, like Chrome's devtools、Firefox's web console, we are famlier with this tools

5、Firefox Scratchpad

In the Firefox browser, there is a particularly useful feature called Scratchpad, where you can enter some JS code to see the result.

shortcut：In the Firefox browser Shift + F4

6、Chrome Sources Panel

Chrome provides powerful DevTools, where the Sources panel allows you to create some Snippets for easy execute JS code.

shortcuts：CMD + Enter run code

7、JS Bin

JS Bin is a live pastebin for HTML, CSS & JavaScript and a range of processors, including SCSS, CoffeeScript, Jade and more...

8、JS Fiddle

JS Fiddle is a good place for front-end coder to write demo examples. Here you can use some third-party libraries in CDN mode, which is very convenient to build a page demo.

Because the JS Fiddle tool itself does not provide a console panel, you can use the browser developer tools to print out JS code results.

9、CodePen

CodePen It's a great online code editor that can write almost any front-end web application.

10、“JavaScript Demo” in MDN

If you has been used MDN, maybe you remember that there will be a JavaScript Demo area in some JavaScript documentation, such as JavaScript Standard built-in objects Function, here you can execute some JS code

11、PLAYCODE

PLAYCODE is a Quickly and Easily make Frontend Experiments

12、Flems

Flems is a playground for web development. It's ideal for prototyping ideas & sharing working front-end code examples

13、JSitor

JSitor Alternative of JSFiddle, Codepen & JSbin

14、Code Sandbox

Code Sandbox is an online editor that helps you create web applications, from prototype to deployment.

I use codesandbox to build some vue demo, it's really very nice tool

15、Web Maker

Web Maker is a blazing fast & offline web playground in your browser

Web Maker also provide Chrome Extension, you can use it offline

16、LeetCode Playground

LeetCode Provides excellent Playground tools, supports switching in various languages, and also supports JavaScript

17、Repl.it Stop wasting time setting up a development environment. Repl.it gives you an instant IDE to learn, build, collaborate, and host all in one place.

Repl.it

18、RunKit + npm

RunKit + npm Try any Node.js package right in your browser

19、StackBlitz

StackBlitz Code the Future. In Your Browser（The online code editor for web apps）

20、Plunker Next

Plunker Next Plunker is the best tool to prototype, experiment, share and debug your ideas on the web platform. From idea to implementation, Plunker helps you build something quickly and frictionlessly.

Others

The tools that are easy to use are endless. In fact, there are other tools or solutions that can be chosen. For example, the following four different types, I have selected a representative tool.

Online programming

• scrimba - The interactive screencasting platform

Local Application

• RunJS - A scratchpad for your thoughts, a playground for your creativity...

Editor plugin

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

Cloud-powered dev environments

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

👀 Compare

Conslusion

Actually for myself

• If I want to run a code snippets to get test results, the fastest way is to use the browser console, because the browser is the best tool.
• If I want to write a demo on my blog, I will choose jsfiddle, codepen, codesandbox, which provides everything you need to write a demo.
• If I want to share beautiful code snippets, I will use Carbonize to generate an image, just like the one at the beginning of the blog post

The meaning of using an online editor is that it is fast, easy to share and collaborate, and my favorite is still VSCode.

Maybe you are writing your playground, or you have better tools, I hope to leave a message and share with everyone.