In daily front-end development, we use our favorite ides to debug JavaScript Code. For example, MY favorite Code editors are Sublime Text 3 and VS Code, and I used Atom a few years ago. Occasionally, we need to quickly share a piece of Code with a colleague or friend. This is where the importance of an online JavaScript runtime environment comes in.
To solve this problem, there are many excellent online editors emerging in the industry. For example, JS Bin, JS Fiddle, Code Pen, Code Sandbox, etc., contact the front end of these years also gradually found some good other choices, look at the browser favorites, there have been more than 20 kinds.
Below we use 20 tools to perform a tail-recursively optimized factorial function
1. Use iTerm2
Installing the Node environment in terminal tools and using the Node runtime environment to execute JS code is a must for learning Node
Use Sublime Text 3
In Sublime Text 3, we can use build System to create build commands and build commands to quickly execute JS code
Shortcut key: CMD + B
The configuration file
The first installation relies on babel-CLI
npm i -g babel-cli
Copy the codeNew 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"]}}Copy the coderendering
3. Use VSCode
In VSCode, we can create a task to run JS, actually running JS with the built-in terminal to execute the node command
Shortcut: CMD + Shift + B
The configuration 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 } } ] }Copy the coderendering
4. Use the browser console
We’re all familiar with debugging JS code using Console functions in browsers, such as DevTools in Chrome and the Web Console in Firefox
5. Use Firefox code scratch paper
In Firefox, there is a handy feature called code scratch paper where you can type in some JS code to see the result
Shortcut keys: Shift + F4 in Firefox
6. Use the Chrome Sources panel
Chrome provides powerful DevTools, in which the Sources panel allows you to build Snippets to execute JS code easily
Shortcut key: CMD + Enter To execute the code
7. Use JS Bin
The JS Bin is an open source tool for debugging Web applications. The tool panel has a Console and can be used to execute JS code
8. Use JS Fiddle
JS Fiddle is a good place to write a lot of front-end demo examples. You can use some third party libraries as CDN to build your web demo.
Because the JS Fiddle tool itself doesn’t provide a console panel, you can use the browser developer tools to print out YOUR JS code
9. Use CodePen
CodePen is a great online code editor that can write almost any front-end Web application. Using it here to execute a piece of JS code is really overkill.
10. JavaScript Demo using MDN
Those of you who read MDN often remember that in some JavaScript documentation there is a JavaScript Demo gadget, such as the JavaScript standard built-in object Function, where you can execute some JS code
11. Use PLAYCODE
PLAYCODE provides an environment for running Web applications quickly online
12. Use Flems
Flems provides a Web development environment for sharing small front-end demos
13. Use JSitor
JSitor is a good tool for executing JS code online. I like its code screenshots function, which can live very beautiful code screenshots, but the function is not perfect so far, for example, the code highlighting is temporarily a problem.
14. Use Code Sandbox
Code Sandbox is an online way to create Web applications. It features library templates such as React/Vue/Angular. It is a great place to create prototypes
15. Use Web Maker
Web Maker is a quick way to create offline Web applications in a browser. Web Maker also provides Chrome plugins that can be used offline
16, Use LeetCode Playground
LeetCode has a great tool for Playground that supports switching between languages, JavaScript as well, and no problem solving
Use repl. it
Repl. It is a one-stop IDE for building and collaborating online, as well as providing a Node runtime environment and connecting to Github to synchronize code snippets using GIST
Use RunKit + NPM
There are many excellent libraries to be found on NPM. NPM provides the ability to run and test your package using RunKit, as well as a piece of code
Use StackBlitz
StackBlitz is known as the online VSCode. The Editor uses Microsoft’s open source Monaco Editor, similar to Code Sandbox, which provides some library templates, but no Vue yet
Use Plunker Next
Plunker Next The new version of Plunker provides the ability to create small demos online as well as being easy to share
other
There are plenty of other tools or solutions to choose from, such as the following four different types, one of which I have chosen to represent
The online programming
- scrimba – The interactive screencasting platform
Local application
- RunJS – A scratchpad for your thoughts, a playground for your creativity…
Editor plug-in
- 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 development environment
- Visual Studio Online – Cloud-powered dev environments accessible from anywhere
👀 Tool comparison
| Run the tool | Recommend star | The Console panel | Available offline |
|---|---|---|---|
| JS Bin | ⭐ ️ ⭐ ️ ⭐ ️ ⭐ ️ | There are | no |
| JS Fiddle | ⭐ ️ ⭐ ️ ⭐ ️ ⭐ ️ ⭐ ️ | There is no | no |
| CodePen | ⭐ ️ ⭐ ️ ⭐ ️ ⭐ ️ ⭐ ️ | There are | no |
| PLAYCODE | ⭐ ️ ⭐ ️ ⭐ ️ | There are | no |
| Flems | ⭐ ️ ⭐ ️ ⭐ ️ | There are | no |
| JSitor | ⭐ ️ ⭐ ️ | There are | no |
| Code Sandbox | ⭐ ️ ⭐ ️ ⭐ ️ ⭐ ️ ⭐ ️ ️ ️ ️ ️ | There are | no |
| Web Marker | ⭐ ️ ⭐ ️ ⭐ ️ ⭐ ️ | There are | is |
| LeetCode | ⭐ ️ ⭐ ️ ⭐ ️ ⭐ ️ ⭐ ️ | There are | no |
| Repl.it | ⭐ ️ ⭐ ️ ⭐ ️ | There are | no |
| RunKit + npm | ⭐ ️ ⭐ ️ ⭐ ️ ⭐ ️ | There are | no |
| StackBlitz | ⭐ ️ ⭐ ️ ⭐ ️ | There are | no |
| Plunker Next | ⭐ ️ ⭐ ️ ⭐ ️ ⭐ ️ ️ ️ | There are | no |
conclusion
Actually for me
- If you want to run a piece of code and get test results, the fastest way is to use the browser console, because browsers are the best tools
- If I wanted to write a demo for my blog, I would choose
jsfiddle,codepen,codesandboxThis provides everything you need to write a demo - If I want to share nice snippets, I use Carbonize to generate an image like the one at the beginning of this post
What I love most about using an online editor is its speed, ease of sharing and collaboration.
Maybe you’re writing your playground, or maybe you have a better tool and would like to share it in the comments
Original text: XLBD me / 20 – kind – -…