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.
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
| Tool | Star Rate | Console Panel | offline |
|---|---|---|---|
| JS Bin | ⭐️⭐️⭐️⭐️ | has | no |
| JS Fiddle | ⭐️⭐️⭐️⭐️⭐️ | no | no |
| CodePen | ⭐️⭐️⭐️⭐️⭐️ | has | no |
| PLAYCODE | ⭐️⭐️⭐️ | has | no |
| Flems | ⭐️⭐️⭐️ | has | no |
| JSitor | ⭐️⭐️⭐️ | has | no |
| Code Sandbox | ⭐️⭐️⭐️⭐️⭐️ | has | no |
| Web Marker | ⭐️⭐️⭐️⭐️ | has | yes |
| LeetCode | ⭐️⭐️⭐️⭐️⭐️ | has | no |
| Repl.it | ⭐️⭐️⭐️ | has | no |
| RunKit + npm | ⭐️⭐️⭐️⭐️ | has | no |
| StackBlitz | ⭐️⭐️⭐️ | has | no |
| Plunker Next | ⭐️⭐️⭐️ | has | no |
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.
Top comments (3)
Check out github.com/evilsoft/evil-playground
Try npmjs.com/package/terminal-playground
Wow, this seems a very unfair comparison to me. JSitor is given just 2 stars (⭐️⭐️) 😔