如今的网页代码，一般由三个部分组成：
* HTML，语义层，提供网页的内容。
* CSS，表现层，规定网页的外观。
* Javascript，动作层，定义用户与网页的互动。
理想的开发环境，应该既可以分别调试这三种代码，又可以轻松查看它们合并在一起的整体效果。
浏览器是最合适的效果查看工具，所以很多人想到，代码调试环境也可以直接部署在浏览器中，以网站的形式提供服务。
下面，我根据Design Shack的文章，总结一下目前最常见的6种网页开发在线调试环境。它们大大方便了网页设计师的工作，极大地提供了工作效率。
一、CSSDesk
网址：http://cssdesk.com/ （需翻墙）
这个网站是最早出现的在线调试环境之一，主要用于调试CSS。
左侧两个面板，可以分别输入html和css代码，但不支持Javascript调试。
你可以改变"预览区"的背景颜色，可以保存或下载调试完成的代码。
二、Dabblet
Dabblet也是一个CSS调试环境，不支持Javascript调试。
它将网页效果分成"CSS效果"、"HTML效果"和"整体效果"三个面板，方便单独调试。
它最大的特点有两个，一是动态显示代码效果，代码一输入，效果就自动显示出来；二是显示CSS提示，比如上图的字体效果和长度效果。
三、JS Bin
这是一个较早出现的Javascript在线调试环境。
它分成Javascript、html和"效果预览"三个区域，你可以自行勾选显示哪些区域。它没有独立的CSS代码区，CSS代码必须嵌入html代码，这点很不方便。
它支持加载常用的Javascript库。除此以外，其他特色不多。
四、jsFiddle
jsFiddle是目前最受欢迎的在线调试环境。
它的默认界面分成5个区域，左边是参数设置，右边依次是HTML、Javascript、CSS和"效果预览区"。
除了加载常见的Javascript库，它还支持SCSS代码和CoffeeScript代码。你甚至可以把它的窗口嵌入自己的网页。
五、Tinkerbin
Tinkerbin很像jsFiddle，也是分成HTML、Javascript、CSS和"效果预览区"。
它的特点在于，你可以选择某种代码独占整个编辑区，这样就增大了代码编辑的可视空间。另外，它可以实时显示代码运行结果，这是jsFiddle不支持的。
它支持的代码种类相当多，比如 HAML、SCSS、LESS和CoffeeScript。
六、Rendur
Rendur是一个轻量级在线调试环境，功能不多，但是加载和运行都很快。
用户可以在HTML、CSS、Javascript三个面板中切换，输入相应代码。代码的运行结果，会自动显示在背景网页上。最后一个面板，显示的是整个网页的源码。
（完）
学徒 说：
深入一点就好了
2012年2月13日 17:10 | # | 引用
jankerli 说：
了解一下
2012年2月13日 18:20 | # | 引用
怡红公子 说：
第一次知道还有这么好的东西，调试JS什么的方便很多额。
2012年2月13日 18:39 | # | 引用
岭南六少 说：
学习啦，感觉做web的要学习的东西太多啦
2012年2月13日 18:55 | # | 引用
sunjourney 说：
其实有chrome就了可以了。
2012年2月13日 23:12 | # | 引用
LungZeno 说：
2012年2月14日 01:52 | # | 引用
刘永新 说：
支持阮老师，我是来学习的！
2012年2月14日 11:00 | # | 引用
sokoban 说：
昨日买亚马逊买书，没到免费配送的额度，就买了一本阮兄翻译的《黑客与画家》凑数。
书到手后，原先想买的书令我失望。阮兄的译作倒是爱不释手。
2012年2月14日 11:45 | # | 引用
wong2 说：
要是有Chrome扩展会更好。。就可以离线搞了，速度也会快很多
2012年2月14日 12:23 | # | 引用
Kane 说：
Eclipse.org下的Orion好像更强大，能开发调试php，python，跟git集成
http://www.eclipse.org/orion/
2012年2月15日 13:48 | # | 引用
fx 说：
通常都用fiddler
2012年2月15日 14:39 | # | 引用
jlake 说：
http://rendera.heroku.com/
这个也不错。
2012年2月16日 16:29 | # | 引用
小Z的藏经阁 说：
工欲善其事必先利其器、 呵呵。。
2012年2月23日 21:59 | # | 引用
lioff 说：
一直用JSBIN 真心觉得不错
2012年3月 5日 17:04 | # | 引用
hasbee 说：
请教一下，这些在线调试工具和浏览器自带的开发人员工具相比有什么长处呢？
2012年3月17日 10:06 | # | 引用
Yoya 说：
2012年4月 1日 09:16 | # | 引用
SmallDong 说：
对啊,尤其是做一些教程示例,或者在线提问啊,解答之类的很方便
2012年11月 5日 15:33 | # | 引用
hidoos 说：
最近，也看到一个不错的在线调试工具，叫做codepen.io，还挺不错的。
优点的话，html输入支持zen-coding的写法，输入之后动态啊刷新就可以看到效果。
总之，挺不错的。
2013年4月22日 13:50 | # | 引用
caicai 说：
这六个工具，不知道如何选择？ 谁能再进一步作指教一下。
2013年8月27日 23:43 | # | 引用
daemon 说：
黑客与画家我也买了 不错 算是我的启蒙书籍了=]
2014年11月27日 10:02 | # | 引用