网页开发的6种在线调试环境

作者: 阮一峰

日期: 2012年2月13日

珠峰培训

如今的网页代码,一般由三个部分组成:

  * HTML,语义层,提供网页的内容。

  * CSS,表现层,规定网页的外观。

  * Javascript,动作层,定义用户与网页的互动。

理想的开发环境,应该既可以分别调试这三种代码,又可以轻松查看它们合并在一起的整体效果。

浏览器是最合适的效果查看工具,所以很多人想到,代码调试环境也可以直接部署在浏览器中,以网站的形式提供服务。

下面,我根据Design Shack的文章,总结一下目前最常见的6种网页开发在线调试环境。它们大大方便了网页设计师的工作,极大地提供了工作效率。

一、CSSDesk

网址:http://cssdesk.com/ (需翻墙)

这个网站是最早出现的在线调试环境之一,主要用于调试CSS。

左侧两个面板,可以分别输入html和css代码,但不支持Javascript调试。

你可以改变"预览区"的背景颜色,可以保存或下载调试完成的代码。

二、Dabblet

网址:http://dabblet.com/

Dabblet也是一个CSS调试环境,不支持Javascript调试。

它将网页效果分成"CSS效果"、"HTML效果"和"整体效果"三个面板,方便单独调试。

它最大的特点有两个,一是动态显示代码效果,代码一输入,效果就自动显示出来;二是显示CSS提示,比如上图的字体效果和长度效果。

三、JS Bin

网址:http://jsbin.com

这是一个较早出现的Javascript在线调试环境。

它分成Javascript、html和"效果预览"三个区域,你可以自行勾选显示哪些区域。它没有独立的CSS代码区,CSS代码必须嵌入html代码,这点很不方便。

它支持加载常用的Javascript库。除此以外,其他特色不多。

四、jsFiddle

网址:http://jsfiddle.net/

jsFiddle是目前最受欢迎的在线调试环境。

它的默认界面分成5个区域,左边是参数设置,右边依次是HTML、Javascript、CSS和"效果预览区"。

除了加载常见的Javascript库,它还支持SCSS代码和CoffeeScript代码。你甚至可以把它的窗口嵌入自己的网页。

五、Tinkerbin

网址:http://tinkerbin.com/

Tinkerbin很像jsFiddle,也是分成HTML、Javascript、CSS和"效果预览区"。

它的特点在于,你可以选择某种代码独占整个编辑区,这样就增大了代码编辑的可视空间。另外,它可以实时显示代码运行结果,这是jsFiddle不支持的。

它支持的代码种类相当多,比如 HAML、SCSS、LESS和CoffeeScript。

六、Rendur

网址:http://rendur.com/

Rendur是一个轻量级在线调试环境,功能不多,但是加载和运行都很快。

用户可以在HTML、CSS、Javascript三个面板中切换,输入相应代码。代码的运行结果,会自动显示在背景网页上。最后一个面板,显示的是整个网页的源码。

(完)

QCon

腾讯课堂

留言(20条)

深入一点就好了

了解一下

第一次知道还有这么好的东西,调试JS什么的方便很多额。

学习啦,感觉做web的要学习的东西太多啦

其实有chrome就了可以了。

引用sunjourney的发言:

其实有chrome就了可以了。

線上偵錯可以給網路彼端的伙伴或別人看。

支持阮老师,我是来学习的!

昨日买亚马逊买书,没到免费配送的额度,就买了一本阮兄翻译的《黑客与画家》凑数。
书到手后,原先想买的书令我失望。阮兄的译作倒是爱不释手。

要是有Chrome扩展会更好。。就可以离线搞了,速度也会快很多

Eclipse.org下的Orion好像更强大,能开发调试php,python,跟git集成

http://www.eclipse.org/orion/

通常都用fiddler

http://rendera.heroku.com/
这个也不错。

工欲善其事必先利其器、 呵呵。。

一直用JSBIN 真心觉得不错

请教一下,这些在线调试工具和浏览器自带的开发人员工具相比有什么长处呢?

引用hasbee的发言:

请教一下,这些在线调试工具和浏览器自带的开发人员工具相比有什么长处呢?

同问。

引用LungZeno的发言:


線上偵錯可以給網路彼端的伙伴或別人看。

对啊,尤其是做一些教程示例,或者在线提问啊,解答之类的很方便

最近,也看到一个不错的在线调试工具,叫做codepen.io,还挺不错的。
优点的话,html输入支持zen-coding的写法,输入之后动态啊刷新就可以看到效果。
总之,挺不错的。

这六个工具,不知道如何选择? 谁能再进一步作指教一下。

黑客与画家我也买了 不错 算是我的启蒙书籍了=]

我要发表看法

«-必填

«-必填,不公开

«-我信任你,不会填写广告链接