网页开发的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 条评论
登录 后参与评论

相关文章

来自专栏漏斗社区

打个响指Selenium自动化开启

最近斗哥在朋友的影响下,接触了自动化测试工具中的一个项目:appium自动化测试脚本。

852
来自专栏前端杂货铺

IE6下的png透明图片的背景定位

在IE6下PNG透明图片做背景,无法使用background-position进行定位。但是可以使用margin和绝对定位来进行。 另外,由于IE6下的 :ho...

3699
来自专栏BestSDK

Mockplus教程:2钟搞定APP首页原型设计,3000个免费素材库

创建项目 ? 打开Mockplus,点击新建项目,选择“手机”项目类型与合适的页面尺寸,点击“确定”即创建成功,是不是不能更简单!无需任何文件创建操作,无需输入...

3105
来自专栏数据小魔方

动态图表系列4|列表框(index函数)

今天跟大家分享动态图表系列3——列表框(index函数)! 数据与之前的数据一致,核心技巧只有两点: 使用列表框制作动态数据源; 使用 动态数据源插入动态图表。...

3457
来自专栏一“技”之长

标签之美三——超链接的嵌入 原

通常的超链接有两种方式,一种是链接到另一个文件,另一种是链接到当前文件的某个位置。这两种方式都是通过<a></a>标签来创建,其中href属性用来指定链接的目标...

952
来自专栏疯狂的小程序

像 React Native 开发 APP 一样,用wn-cli 开发 weapp (微信小程序)

wn-cli 像React组件开发一样来开发微信小程序

4136
来自专栏GuZhenYin

[EasyUI美化换肤]更换EasyUi图标

前言 本篇文章主要是记录一些换EasyUI皮肤的过程,备忘.也欢迎美工大神各路UI给点好意见,EasyUI我就不介绍了,自行百度吧..(So..所以别问我是不是...

5868
来自专栏极乐技术社区

微信小程序开发小技巧合揖(53个)

微信小程序:wx.navigateTo中url无法跳转问:链接 微信小程序布局之行内元素和块级元素:链接 小程序端JS加密,传输PHP端解密:链接 小程序开发干...

4469
来自专栏mySoul

微信小程序初步入坑指南

https://developers.weixin.qq.com/miniprogram/dev/devtools/beta.html

1414
来自专栏无所事事者爱嘲笑

vue中的v-cloak

2059

扫码关注云+社区

领取腾讯云代金券