加入收藏 | 设为首页 | 会员中心 | 我要投稿 辽源站长网 (https://www.0437zz.com/)- 云专线、云连接、智能数据、边缘计算、数据安全!
当前位置: 首页 > 运营中心 > 建站资源 > 优化 > 正文

运行 JavaScript 代码片段的 20 种工具

发布时间:2019-11-13 07:12:28 所属栏目:优化 来源:佚名
导读:【线上直播】11月21日晚8点贝壳技术总监侯圣文《数据安全之数据库安全黄金法则》 前端日常开发中,我们使用喜爱的 IDE 调试 JavaScript 代码,比如我喜欢的代码编辑器有两个,Sublime Text 3 和 VS Code,前几年还使用过 Atom,偶尔我们会遇到临时需要快速

JS Bin 是一个开源的用于 debug web 应用的工具,工具面板具有 Console,可以用于执行 JS 代码

201911_runjs-jsbin

8、使用 JS Fiddle

JS Fiddle 是一个前端同学经常写 demo 例子的好地方,这里可以以 CDN 的方式使用一些第三方类库,很方便搭建页面demo。

因为 JS Fiddle 工具本身并没有提供 console 面板,所以可以配合浏览器开发者工具来打印输出 JS 代码结果

201911-runjs-jsfiddle

9、使用 CodePen

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

201911-runjs-codepen

10、使用 MDN 的 “JavaScript Demo”

经常查阅 MDN 的小伙伴一定能记得,在一些 JavaScript 文档中会有一个 JavaScript Demo小工具,比如说 JavaScript 标准内置对象 Function,在这里可以执行一些 JS 代码

201911-runjs-js-demo

11、使用 PLAYCODE

PLAYCODE 提供了在线快速运行 Web 程序的环境

201911_runjs-playcode

12、使用 Flems

Flems 提供了一个 Web 开发环境,可以分享一些前端小demo

201911_runjs-flems

13、使用 JSitor

JSitor 是一个不错的在线执行 JS 代码工具,我比较喜欢它的代码截图功能,能生存很漂亮的代码截图图片,不过目前功能还不是特别完善,比如代码的高亮暂时是个问题。

201911_runjs-jsito

14、使用 Code Sandbox

Code Sandbox 是一个在线的可以创建Web应用,特点是可以使用一些类库模版,比如 React/Vue/Angular 是创作原型的好地方,我经常使用它来编写一些 Vue 小 Demo

201911_runjs-codesandbox

15、使用 Web Maker

Web Maker 是一个可以快速在浏览器创建离线Web应用,Web Maker 还提供了 Chrome 插件,可以离线使用

201911_runjs-webmake

16、使用 LeetCode Playground

LeetCode 提供了优秀的 Playground 工具,支持各种语言版本切换,其中也支持 JavaScript,还能没事儿刷刷题不是

201911_runjs-leetcode

17、使用 Repl.it

Repl.it 是一个一站式可在线构建、协作的IDE,同时也提供了 Node 运行环境,还可以连接 github 使用 gist 同步代码片段

201911_runjs-repl-it

18、使用 RunKit + npm

RunKit + npm 在 npm 上我们能发现很多优秀的库,npm 提供了一个功能,可以使用 RunKit取运行测试你的 package,当然也能测试一段代码

201911_runjs-runkit-np

19、使用 StackBlitz

StackBlitz 有在线 VSCode 之称,编辑器使用的是微软开源的 Monaco Editor,和 Code Sandbox 类似,提供了一些类库模版,但是目前还没有 Vue 的

201911_runjs-stackblitz

20、使用 Plunker Next

Plunker Next 新版的 Plunker 提供了在线创建小 demo 的能力,同时也便于分享

201911_runjs-plunke

其他

好用的工具层出不穷,其实还有一些其他的工具或者解决方案可以作为选择,比如下面四个不同的类型,我每个挑选了一个代表工具

在线编程

  • 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

(编辑:辽源站长网)

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

推荐文章
    热点阅读