网页制作怎么做多个网站,wordpress pdf下载,高端网站制作公,管理信息系统有哪些运行 JavaScript 代码片段的 20 种工具 前端日常开发中#xff0c;我们使用喜爱的 IDE 调试 JavaScript 代码#xff0c;比如我喜欢的代码编辑器有两个#xff0c;Sublime Text 3 和 VS Code#xff0c;前几年还使用过 Atom#xff0c;偶尔我们会遇到临时需要快速分享给同… 运行 JavaScript 代码片段的 20 种工具 前端日常开发中我们使用喜爱的 IDE 调试 JavaScript 代码比如我喜欢的代码编辑器有两个Sublime Text 3 和 VS Code前几年还使用过 Atom偶尔我们会遇到临时需要快速分享给同事或者朋友一段代码的场景那么在线的 JavaScript 运行环境的重要性就体现出来了。 作者佚名 前端日常开发中我们使用喜爱的 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 2nul node $file] }, osx: { cmd: [killall node /dev/null 21; node $file] }, linux: { cmd: [killall node /dev/null 21; node $file] }
} 效果图 3、使用 VSCode 在 VSCode 中我们可以建立一个 task 来运行 JS实际上是借助内置终端来执行 node 命令运行JS 快捷键CMD Shift B 配置文件 /.vscode/tasks.json { // See https://go.microsoft.com/fwlink/?LinkId733558 // 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 代码 11、使用 PLAYCODE PLAYCODE 提供了在线快速运行 Web 程序的环境 12、使用 Flems Flems 提供了一个 Web 开发环境可以分享一些前端小demo 13、使用 JSitor JSitor 是一个不错的在线执行 JS 代码工具我比较喜欢它的代码截图功能能生存很漂亮的代码截图图片不过目前功能还不是特别完善比如代码的高亮暂时是个问题。 14、使用 Code Sandbox Code Sandbox 是一个在线的可以创建Web应用特点是可以使用一些类库模版比如 React/Vue/Angular 是创作原型的好地方我经常使用它来编写一些 Vue 小 Demo 15、使用 Web Maker Web Maker 是一个可以快速在浏览器创建离线Web应用Web Maker 还提供了 Chrome 插件可以离线使用 16、使用 LeetCode Playground LeetCode 提供了优秀的 Playground 工具支持各种语言版本切换其中也支持 JavaScript还能没事儿刷刷题不是 17、使用 Repl.it Repl.it 是一个一站式可在线构建、协作的IDE同时也提供了 Node 运行环境还可以连接 github 使用 gist 同步代码片段 18、使用 RunKit npm RunKit npm 在 npm 上我们能发现很多优秀的库npm 提供了一个功能可以使用 RunKit取运行测试你的 package当然也能测试一段代码 19、使用 StackBlitz StackBlitz 有在线 VSCode 之称编辑器使用的是微软开源的 Monaco Editor和 Code Sandbox 类似提供了一些类库模版但是目前还没有 Vue 的 20、使用 Plunker Next Plunker Next 新版的 Plunker 提供了在线创建小 demo 的能力同时也便于分享 其他 好用的工具层出不穷其实还有一些其他的工具或者解决方案可以作为选择比如下面四个不同的类型我每个挑选了一个代表工具 在线编程 scrimba - The interactive screencasting platform本地应用 RunJS - A scratchpad for your thoughts, a playground for your creativity...编辑器插件 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. 云开发环境 Visual Studio Online - Cloud-powered dev environments accessible from anywhere工具对比 总结 其实对于我而言 如果想运行一段代码得到测试结果最快的方式会选用浏览器控制台因为浏览器就是最棒的工具如果想要写一个 demo 放在博客上我会选择 jsfiddle、codepen、codesandbox这里提供了写demo需要的一切如果想分享漂亮的代码片段我会使用 Carbonize 生成一张图片就像博文开头的那张图片使用在线编辑器的意义我觉得在于快捷、便于分享与协作而很爱的其实还是VSCode。 没准儿你正在编写你的 playground或者你有更好的工具希望和大家一起分享 阅读目录置顶)(长期更新计算机领域知识 阅读目录置顶)(长期更新计算机领域知识 阅读目录置顶)(长期科技领域知识 歌谣带你看java面试题
