专栏首页阮一峰的网络日志网页开发的6种在线调试环境

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

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

  * 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三个面板中切换,输入相应代码。代码的运行结果,会自动显示在背景网页上。最后一个面板,显示的是整个网页的源码。

(完)

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Javascript的10个设计缺陷

    前几篇文章,我经常说Javascript的设计不够严谨,有很多失误。 今天的这一篇,前半部分就谈为什么会这样,后半部分将列举Javascript的10个设计缺陷...

    ruanyf
  • 全球主要城市实时天气查询

    作为学习javascript的练习,我制作了一个网页,可以查询全球主要城市此时此刻的天气,请点击进入。

    ruanyf
  • Javascript编程风格

    Douglas Crockford是Javascript权威,Json格式就是他的发明。 去年11月他有一个演讲(Youtube),谈到了好的Javascrip...

    ruanyf
  • 《RUN!MOUSE!》Scratch声控游戏案例

    昨天晚上突然想到如果用声音控制一款游戏会是什么感觉。虽然手机APP已经有了声音控制火柴人跳高的先例,但想想通过积木编程Scratch实现更加丰富的效果也是一件让...

    一石匠人
  • 开始使用Octave

    mwangblog
  • 边玩边入门深度学习,我们帮你找了10个简易应用demo

    大数据文摘
  • JS 变量提升

    问到 JS 一些细节问题的时候发挥比较糟糕,有些是知道反应得太慢,有些是压根没接触过,还是积累的太少了。这篇的 JS 变量提升问题就是从没有接触过的,网上一搜一...

    Alan Zhang
  • LeetCode 984. 不含 AAA 或 BBB 的字符串(贪心)

    来源:力扣(LeetCode) 链接:https://leetcode-cn.com/problems/string-without-aaa-or-bbb ...

    Michael阿明
  • Gym 100952H&&2015 HIAST Collegiate Programming Contest H. Special Palindrome【dp预处理+矩阵快速幂/打表解法】

    H. Special Palindrome time limit per test:1 second memory limit per test:64 mega...

    Angel_Kitty
  • 剑指offer——丑数

    题目描述 把只包含质因子2、3和5的数称作丑数(Ugly Number)。例如6、8都是丑数,但14不是,因为它包含质因子7。 习惯上我们把1当做是第一个丑...

    AI那点小事

扫码关注云+社区

领取腾讯云代金券