运行 JavaScript 代码片断的 20 种器材

前端一般开拓中，我们行使喜欢的 IDE 调试 JavaScript 代码，好比我喜好的代码编辑器有两个，Sublime Text 3 和 VS Code，前几年还行使过 Atom，无意我们会碰着姑且必要快速分享给同事可能伴侣一段代码的场景，那么在线的 JavaScript 运行情形的重要性就浮现出来了。

为了办理这样的题目，业界涌现出了许多很优越的在线编辑器。好比 JS Bin、JS Fiddle、Code Pen、Code Sandbox 等，打仗前端这些年也陆延续续发明白一些不错的其他选择，再看下赏识器保藏夹，已经有20余种。

下面我们行使20种器材执行一段颠末端递归优化过的阶乘函数

1、行使 iTerm2

在终端器材中安装 node 情形，行使 node 运行情形来执行 JS 代码是我们进修 node 时辰必知必会的一件事

2、行使 Sublime Text 3

在 Sublime Text 3 中，我们可以行使 build system 来建设构建呼吁，行使构建呼吁来快速执行 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 中，我们可以成立一个 task 来运行 JS，现实上是借助内置终端来执行 node 呼吁运行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、行使赏识器节制台

我们常常行使赏识器的 Console 成果来调试 JS 代码，好比 Chrome 的 DevTools，火狐的 Web 节制台，这些我们已经不生疏了

5、行使 Firefox 代码草稿纸

在 Firefox 赏识器中，有一个出格好用的成果叫 代码草稿纸，你可以在这内里输入一些 JS 代码执行查察功效

快捷键：在火狐赏识器下 Shift + F4

6、行使 Chrome Sources 面板

Chrome 提供了强盛的 DevTools，个中 Sources 面板应承你成立一些 Snippets利便执行 JS 代码

快捷键：CMD + Enter 执行代码

7、行使 JS Bin

（编辑：河北网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!