10个最好用的javascript在线编译工具

1. CodePen

CodePen是我最喜欢的代码编辑器之一。 CodePen有一些炫酷而独特的功能，这使得它成为Web开发中最流行的在线代码编辑器之一。

CodePen的特点是：

• 实时预览HTML，CSS和JavaScript

• 您可以使用预处理程序的语法像Sass, LESS, Stylus. Markdown, Haml, Slim, Jade

• 使用CodePen组合展示才华和设计自己的组合主页。

• 您可以使用Hire Me（聘用我）功能服务找到兼职工作。

• 任何资源都可以嵌入在任何其他网站。

2.Dabblet

10个最好用的javascript在线编译工具

Dabblet的界面十分简洁，操作起来并不复杂，特别适合新手和想尝试最新HTML5标签和CSS3样式的前端攻城师使用。Dabblet的一大特色是代码编写时可免加CSS前缀。因为，Lea Verou（工具的作者）本人就是免CSS前缀JavaScript脚本 -prefix-free的作者，Dabblet拥有此功能当然是顺理成章的事。HTML和CSS代码间的切换也很方便，点击隐藏工具栏右上方的标签即可。用户可以根据习惯，调整前端代码的预览效果，浏览器内全屏预览将新标签页中打开。

Dabblet支持用Github帐号登录，测试的代码段既可以匿名保存也可以保存在用户的Github:gist中，以便用户将代码段嵌入自己的站点或是进一步分享给其他人。

3.Thimble

10个最好用的javascript在线编译工具

Mozilla 推出 的HTML/CSS 在线交互式学习网站 Thimble：左侧编辑，右侧实时预览，带有大量真实案例。该站是 Mozilla 新近推出的 Webmaker 计划 的组成部分，旨在帮助普通用户在线学习编写 HTML 和 CSS。

Thimble 提供的是双面板设计， 左侧为带语法高亮的代码编辑，右侧可实时预览 网页效果， 如果用户对效果满意， 可通过右上方的蓝色 “Publish” 按钮一键发布， 还可通过提供的 Twitter 发布按钮与好友分享你的设计成果。

4.JSFiddle

10个最好用的javascript在线编译工具

JSFiddle是一个老牌的在线JavaScript代码调试工具。支持JavaScript、CSS、HTML代码可视化在线调试工具，支持多种应用多种主流框架，用起来非常方便，而且还可以将调试好的结果以非常简洁的页面直接嵌其他网页里。

除了可以调试代码外，还可以方便的发布到社区，论坛或者社交媒体上与朋友们分享或者提问。整合了很多的不同的类库供大家选择。

5.CSSDesk

10个最好用的javascript在线编译工具

CSSDesk工具是一个标准的CSS沙盒，可以给予CSS初学者最大的帮助，网站分成三栏，我们可以非常方便的通过在左侧实时修改代码来查看某个CSS属性的改变给HTML元素带来的影响，甚至我们可以把整个网站都放到其中来进行调试，并将调试完成的文件保存为HTMl。唯一的遗憾是缺少代码提示，需要手工输入CSS属性。

6.CodeMirror

10个最好用的javascript在线编译工具

又一款“Online Source Editor”，基于Javascript，短小精悍，实时在线代码高亮显示，他不是某个富文本编辑器的附属产品，他是许多大名鼎鼎的在线代码编辑器的基础库。

可以看出，CodeMirror的作者是一个十分向往自由的人。但他的CodeMirror绝对不简单，看看下面这份清单：

• Google Earth KML sampler

• Eloquent JavaScript’s console

• The qooxdoo playground

• A cool tutorial about the element

• An online IDE for the Orc programming language

• Google’s API playground

• Raphaël Live

• JS Bin

• The RokPad plugin for Joomla

• The scraperwiki editor

• jsLinb UI Builder

上述的这些在线代码编辑器都是基于CodeMirror的，是不是感到惊讶，里面有你熟悉的JS Library。

CodeMirror本身的定位也很明确，短小精悍，但代码质量很高，在Google Group的群里面，人们热烈的进行着用CodeMirror做各式各样改造的讨论，可见对他的欢迎。

假如你有项目需要在线代码编辑，还等什么？CodeMirror，绝对是你最好的选择。

7.JS Bin

10个最好用的javascript在线编译工具

JSBin 是一个 Web 应用，主要用于帮助测试 JavaScript 和 CSS 的代码片段。功能与 jsFiddle 网站一致。

8.eCoder

10个最好用的javascript在线编译工具

ecoder是一个基于Web的代码编辑器，采用PHP和JavaScript开发。它包括：实时语法加亮，一个文件浏览器，一个文件上传器和一个标签系统能够实现直接在服务器上同时编辑多个文件。

9.Codeanywhere

Codeanywhere在线编辑器

Codeanywhere是一个在线的代码编辑器，你可以在浏览器中编写html、css、javascript、php、XML的代码，目前支持chrome、firefox、Opera、Safari、IE，当然也可以在android、iphone上安装codeanywhere的软件。

Codeanywhere的特点是：随时随地可以写代码（虽然我认为手机上写代码有点搞笑）。

Codeanywhere支持连接FTP Server、Dropbox、Github，比如Dropbox，你只要有一个账号，连上Dropbox后，Codeanywhere能够在Dropbox上创建html等文件，你写的代码都存放在Dropbox上了。

10.AWS Cloud9 IDE

10个最好用的javascript在线编译工具

Cloud9 IDE是一个用来测试运行Node.js 和 JavaScript平台，但也支持Python, Ruby和 Apache+PHP的应用程序，例如Wordpress。前几天分享了支持Node.js、Python、Go、Rails等程序语言的Nitrous.io空间，很快有朋友给部落写邮件，告知Cloud9可以比Nitrous.io更长久地运行应用实例。

Cloud9支持的程序语言有Node.js、HTML5、PHP、Python / Django、Ruby on Rails、C/C++、StrongLoop，提供FTP、S-S-H和空间托管，有MysqL、MongoDB、SQLite数据库，可以一键安装Wordpress，也可以自己上传程序代码，支持协同编辑合作，另外可以和其它的云空间整合。

Cloud9支持将代码一键发布到Heroku、Windows Azure、Google App Engine、CloudFoundry等云空间上，还可以同步应用到Github空间上，总之，除了Cloud9空间不支持绑定自己的域名、无法永久保持应用在线外，Cloud9空间用来测试程序和代码还是不错的。

结束语

以上就是我们为你推荐的10个最好的JavaScript在线编辑器。它们有的是单纯的JavaScript代码编辑器,有些则支持多种语言,还有一些提供完整的IDE。哪一个是你最喜欢的呢?分享你的评价吧。

作者：全栈弄潮儿
链接：https://www.jianshu.com/p/10eefe9c54e5