前端日常开发中,我们使用喜爱的 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
JS Bin 是一个开源的用于 debug web 应用的工具,工具面板具有 Console,可以用于执行 JS 代码 。

文章插图
8、使用 JS Fiddle
JS Fiddle 是一个前端同学经常写 demo 例子的好地方,这里可以以 CDN 的方式使用一些第三方类库,很方便搭建页面demo 。
因为 JS Fiddle 工具本身并没有提供 console 面板,所以可以配合浏览器开发者工具来打印输出 JS 代码结果 。

文章插图
9、使用 CodePen
CodePen 是一个非常棒的在线代码编辑器,几乎可以编写所有的前端Web应用 。在这里使用它来执行一段 JS 代码真的是大才小用了 。

文章插图
10、使用 MDN 的 “JavaScript Demo”
经常查阅 MDN 的小伙伴一定能记得,在一些 JavaScript 文档中会有一个 JavaScript Demo小工具,比如说 JavaScript 标准内置对象 Function,在这里可以执行一些 JS 代码 。
推荐阅读
- 博士|复旦博士写了130行代码:2分钟搞定繁琐的核酸筛查
- 十五个常见的WordPresswp-config.php设置代码
- 如何优雅的在头条插入代码,介绍几款在线源代码转图片工具
- 暴雪|魔兽正式服:玩家复原暴雪代码,10.0增加新职业,兼顾3个职责?
- Java|剖析类内的五类成员:属性、方法、构造器、代码块、内部类
- win10激活提示错误代码的解决办法
- JavaScript 中对于Promise的理解
- 淘宝客选品库php代码
- 哈雷特彗星绕太阳的运行周期 哈雷彗星绕太阳周期为
- 让你的Mac运行流畅的5个实用技巧