网页开发的5种在线调试环境-亲身体验

http://www.ruanyifeng.com/blog/2012/02/6_online_playgrounds_for_web_developing.html


针对html+css+js:
一.Rendur(没有什么附加功能如社交等等，很简洁，导出功能也有)
网址：http://rendur.com/
Rendur是一个轻量级在线调试环境，功能不多，但是加载和运行都很快。用户可以在HTML、CSS、Javascript三个面板中切换，输入相应代码。代码的运行结果，会自动显示在背景网页上。最后一个面板中可以进行一些设置，如js库的添加，项目名设置等等。同时代码会在本地保存，如果清空浏览器缓存，该代码也会被清除。代码面板左上角，有三个按钮可以调整面板与背景网页的布局。

二.jsFiddle(极力推荐)

网址：http://jsfiddle.net/
jsFiddle是目前最受欢迎的在线调试环境。它的默认界面分成5个区域，左边是参数设置，右边依次是HTML、Javascript、CSS和"效果预览区"。除了加载常见的Javascript库，它还支持SCSS代码和CoffeeScript代码。你甚至可以把它的窗口嵌入自己的网页。有一些新的功能，可以协同编写代码，并分享代码到社交网站等等。可以一键规范代码格式。

三.JS Bin(推荐)

网址：http://jsbin.com
这是一个较早出现的Javascript在线调试环境。它支持加载常用的Javascript库。除此以外，其他特色不多。有console

四.Dabblet(非常简单，仅支持编写原生js)

网址：http://dabblet.com/
它最大的特点有两个，一是动态显示代码效果，代码一输入，效果就自动显示出来；二是显示CSS提示，比如上图的字体效果和长度效果。


针对html+css:

五.CSSDesk

网址：http://cssdesk.com/ 
这个网站是最早出现的在线调试环境之一，主要用于调试CSS。有一键下载代码功能。左侧两个面板，可以分别输入html和css代码，但不支持Javascript调试。你可以改变"预览区"的背景颜色，可以保存或下载调试完成的代码。