Web开发者的六个代码调试平台

朴灿烈づ我的快乐病毒、 2022-03-30 06:48 307阅读 0赞

代码调试平台是Web开发者进行开发、测试、分享、协作和交流的网络应用，它们支持实时的编辑、预览HTML、CSS和JavaScript的客户端代码。这些代码调试平台最值得称道的地方在于，它们中的大多数都是免费的，你可以很容易的以学习或者调试程序为目的与他人分享你的工作。

就个人而言，这些web应用程序在日常工作中给我带来了不小的帮助。每当在使用JavaScript或者CSS编程碰到瓶颈的时候，我可以在代码调试平台上分享自己的代码并邀请其他的开发者朋友来解决。这种模式的有趣性和互动性对于新手的学习有很大的帮助。以下就是笔者推荐的六个代码调试平台。

### **Codepen** ###

--------------------

Codepen应该是全世界最受欢迎的代码调试平台了。CSS技巧的原作者Chris Coyier是Codepen的联合创始者之一，这就很好的说明了为什么这款网络应用会如此的受欢迎。此外，Codepen的视觉效果也是很重要的一个原因，它的编辑器可以快速生动的展现代码改变所产生的预览显示，使你能够更容易地找出变化。

![常见代码调试平台Codepen][Codepen]

Codepen用于CSS的预处理器包括SCSS、SASS、LESS和Stylus，用于JS的预处理器包括CoffeeScript和LiveScript，用于HTML包括Haml、Markdown、Slim和Jade。另外，它还包含了8个可用的内置的JS库。在Codepen中，私人和协作的板块功能可以通过付费来获得。 [**访问它>>**][Link 1]

### **JSFiddle** ###

--------------------

JSFiddle是一个可靠的流行代码的调试平台，在这个领域，它是第一个也是最出名的。JSFiddle有30多个可立即使用的JavaScript库，你还可以轻松的添加外部文件。在预处理方面，它有用于CSS的SCSS、用于JS的CoffeeScript以及用于HTML的简单的Vanilla。

![常见代码调试平台JSFiddle][JSFiddle]

如果你是与另外的程序员进行协作编程，我强烈建议你使用JSFiddle。JSFiddle的协作特性是同类型应用中最好的，而且它不同于Codepen，这个功能是易用且免费的。

JSFiddle的短板在于灵活预览方面，你需要点击播放按钮来手动刷新页面。和其它同类型应用相比，JSFiddle算是最慢之一了。另外，JSFiddle还有一个不足就是它的运行按钮不灵敏，有时需要点击几次才能够运行代码（这问题存在于多个浏览器中）。 [**访问它>>**][Link 2]

### **JS Bin** ###

--------------------

JS Bin是由JavaScript开发大师Remy Sharp创建的，他拥有一家专注于JavaScript以及HTML5开发的web开发公司。JS Bin的JS预处理器包括CoffeeScript、TypeScript、Traceur、JSX以及可供使用的超过40个的JS库。你可以添加外部文件，但是必须进行手动编辑。而用于CSS的预处理器，它提供了LESS。

![常见代码调试平台JS Bin][JS Bin]

JS Bin区别于传统的代码调试平台的地方在于它允许你将文件下载到电脑上，这对于开发者尤其是常在离线状态下调试代码的程序员来说是一个很棒的特性。你还可以创建私人的Bin空间，当然这是一个付费功能。另外，JS Bin不支持协作功能。 [**访问它>>**][Link 3]

### **CSSDeck** ###

--------------------

CSSDeck已经存在了好几年了，虽然没有产生出较大的影响力，但是因为其简单性还是吸引了很多人使用它。如果你不喜欢除开编码以外的那些繁杂特性，CSSDeck会是一个不错的选择。

![常见代码调试平台CSSDeck][CSSDeck]

CSSDeck的预处理器包括用于HTML的HAML、Markdown、Slim和Jade，用于CSS的LESS、Stylus、SASS和SCSS，用于JS的CoffeeScript。它还有几个可用的CSS和javascript库，通过将其简单的手动添加进库列表就可以使用了。

CSSDeck令人称道的一个特性就是它支持用户改变字体大小，这是一个非常简单却又有用的功能。总的来说，CSSDeck不适合那些想要很多炫酷功能的用户，它摒弃了许多非必要的功能，专注于从事最重要的工作，它的简单性就是它最大的特点。 [**访问它>>**][Link 4]

### **Dabblet** ###

--------------------

在很久以前，当我还在使用十六进制颜色代码的时候，Dabblet的特性让我惊讶了，它的颜色预览居然显示在代码旁，这是我第一次见到这样的设置。虽然我不确定这是否是一个有用的特性，但是它的整洁性还是给我留下了很深的印象。

![常见代码调试平台Dabblet][Dabblet]

现在，Dabblet更加令人惊叹的地方就是它支持用户用五个不同的视角进行预览：CSS编辑器及视图，HTML编辑器及视图，CSS和HTML的编辑器及视图，JavaScript及运行结果，全部综合视图。我不说全部，至少它拥有的功能绝大部分调试平台都没有。

再说一下它的缺点，第一，Dabblet缺乏HTML和CSS的预处理器，这是令人困惑的。第二，它没有内置的JavaScript库，这点你倒可以通过手动插入JavaScript库来解决。第三，它的每个板块大小是固定的，无法作出调整，这点和以前传统的调试平台是一样的。第四，它缺少一个用于演示其他用户作品的板块。 [**访问它>>**][Link 5]

### **Liveweave** ###

--------------------

Liveweave是一个拥有非常多功能的代码调试平台，比如可关闭实时预览就是其中之一。你也可以为了保护视力，开启夜视模式，将所有界面都变暗。Liveweave提供20多个JavaScript库，甚至还支持SVG。其内置的标尺使测量更加精确，更符合美学上的感受。

![常见代码调试平台Liveweave][Liveweave]

它吸引我眼球的地方在于它简单的协作功能。如果你过去曾经使用过Teamviewer，你会发现两者的工作方式是一样的。你需要做的事就只是点击协作链接，你就可以分享来自于你的weave的链接了。我不清楚是我电脑还是互联网的原因，这有一点轻微的延迟，但是作为一个必不可少的功能，Liveweave在这点上做得很好。

你甚至可以下载你的weave文件，并保存为单一的HTML格式（将JS、CSS和HTML都保存到同一个文件里，这点可做得不够漂亮！），或者保存为包含独立的HTML、CSS和JS文件的zip压缩包（这个还行。）对了，有一点我还忘了说，Liveweave还有一个内置的[Lorem Ipsum][]（乱数假文）生成器。 [**访问它>>**][Link 6]

[Codepen]: /images/20220330/86f271112781481cb2db4341575e77a9.png
[Link 1]: http://codepen.io/
[JSFiddle]: /images/20220330/4f5e668b0da1405ab12fec9445640707.png
[Link 2]: http://jsfiddle.net/
[JS Bin]: /images/20220330/190e22274a2547f6989615dbdf25a99e.png
[Link 3]: http://jsbin.com/
[CSSDeck]: /images/20220330/b714cae81f9948ab89954bc1fd874ca2.png
[Link 4]: http://cssdeck.com/
[Dabblet]: /images/20220330/afa409a3bbd84f6b9bdbe7900c9f5d00.png
[Link 5]: http://dabblet.com/
[Liveweave]: /images/20220330/6713870ef7a64ab887311408a0baeab7.png
[Lorem Ipsum]: http://baike.baidu.com/view/2339924.htm?fr=aladdin
[Link 6]: http://liveweave.com/