Shulou(Shulou.com)06/02 Report--

This article mainly introduces "what are the tools for running JavaScript code snippets". In daily operations, I believe that many people have doubts about running tools for JavaScript code snippets. Xiaobian consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful to answer the questions of "what are the tools for running JavaScript code snippets?" Next, please follow the editor to study!

1. Use iTerm2

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

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

Configuration file

Install dependent babel-cli first

Npm I-g babel-cli

Create a 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 "]}}

Effect picture

3. Use VSCode

In VSCode, we can set up a task to run JS, which is actually using the built-in terminal to execute the node command to run JS.

Shortcut key: CMD + Shift + B

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

Effect picture

4. Use the browser console

We often use the browser's Console function to debug JS code, such as Chrome's DevTools, Firefox's Web console, which we are no stranger to.

5. Use Firefox code draft paper

In Firefox browsers, there is a particularly useful feature called code draft paper, where you can enter some JS code to execute to see the results.

Shortcut key: Shift + F4 in Firefox browser

6. Use the Chrome Sources panel

Chrome provides a powerful DevTools, in which the Sources panel allows you to create some Snippets to facilitate the execution of JS code.

Shortcut key: CMD + Enter execute code

7. Use JS Bin

JS Bin is an open source tool for debug web applications, and the tools panel has Console that can be used to execute JS code.

8. Use JS Fiddle

JS Fiddle is a good place where front-end students often write demo examples. Here you can use some third-party class libraries in the way of CDN, which is very convenient to build page demo.

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

9. Use CodePen

CodePen is a great online code editor that can write almost all front-end Web applications. It is really useless to use it here to execute a piece of JS code.

10. Use MDN's "JavaScript Demo"

Friends who often consult MDN will remember that there is a JavaScript Demo gadget in some JavaScript documents, such as the JavaScript standard built-in object Function, where you can execute some JS code.

11. Use PLAYCODE

PLAYCODE provides an environment for quickly running Web programs online.

12. Use Flems

Flems provides a Web development environment where you can share some front-end small demo.

13. Use JSitor

JSitor is a good online execution JS code tool, I like its code screenshot function, can survive very beautiful code screenshot pictures, but the current function is not very perfect, such as code highlighting is a problem for the time being.

14. Use Code Sandbox

Code Sandbox is an online application that can create Web, characterized by the use of some library templates, such as React/Vue/Angular is a good place to create prototypes, I often use it to write some Vue small Demo.

15. Use Web Maker

Web Maker is a quick way to create offline Web applications in browsers. Web Maker also provides a Chrome plug-in that can be used offline.

16. Use LeetCode Playground

LeetCode provides excellent Playground tools that support switching between versions in various languages, including JavaScript, and can do exercises without a problem.

17. Use Repl.it

Repl.it is an one-stop IDE that can be built and collaborated online, it also provides a Node runtime environment, and you can connect to github to synchronize code snippets using gist.

18. Use RunKit + npm

RunKit + npm We can find a lot of excellent libraries on npm. Npm provides a feature that allows you to use RunKit to run your package and, of course, to test a piece of code.

19. Use StackBlitz

StackBlitz is known as online VSCode, and the editor uses Microsoft's open source Monaco Editor, which is similar to Code Sandbox and provides some library templates, but there is no Vue yet.

20. Use Plunker Next

Plunker Next's new version of Plunker provides the ability to create small demo online, as well as easy to share.

At this point, the study on "what are the tools to run JavaScript code snippets" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.