代碼調(diào)試平臺(tái)是Web開(kāi)發(fā)者進(jìn)行開(kāi)發(fā)、測(cè)試、分享、協(xié)作和交流的網(wǎng)絡(luò)應(yīng)用，它們支持實(shí)時(shí)的編輯、預(yù)覽HTML、CSS和JavaScript的客戶端代碼。這些代碼調(diào)試平臺(tái)最值得稱道的地方在于，它們中的大多數(shù)都是免費(fèi)的，你可以很容易的以學(xué)習(xí)或者調(diào)試程序?yàn)槟康?與他人分享你的工作。

就個(gè)人而言，這些web應(yīng)用程序在日常工作中給我?guī)?lái)了不小的幫助。每當(dāng)在使用JavaScript或者CSS編程碰到瓶頸的時(shí)候，我可以在代碼調(diào)試平臺(tái)上分享自己的代碼并邀請(qǐng)其他的開(kāi)發(fā)者朋友來(lái)解決。這種模式的有趣性和互動(dòng)性對(duì)于新手的學(xué)習(xí)有很大的幫助。以下就是筆者推薦的六個(gè)代碼調(diào)試平臺(tái)。

Codepen

Codepen應(yīng)該是全世界最受歡迎的代碼調(diào)試平臺(tái)了。CSS技巧的原作者Chris Coyier是Codepen的聯(lián)合創(chuàng)始者之一，這就很好的說(shuō)明了為什么這款網(wǎng)絡(luò)應(yīng)用會(huì)如此的受歡迎。此外，Codepen的視覺(jué)效果也是很重要的一個(gè)原因，它的編輯器可以快速生動(dòng)的展現(xiàn)代碼改變所產(chǎn)生的預(yù)覽顯示，使你能夠更容易地找出變化。

Codepen用于CSS的預(yù)處理器包括SCSS、SASS、LESS和Stylus，用于JS的預(yù)處理器包括CoffeeScript和LiveScript，用于HTML包括Haml、Markdown、Slim和Jade。另外，它還包含了8個(gè)可用的內(nèi)置的JS庫(kù)。在Codepen中，私人和協(xié)作的板塊功能可以通過(guò)付費(fèi)來(lái)獲得。

JSFiddle

JSFiddle是一個(gè)可靠的流行代碼的調(diào)試平臺(tái)，在這個(gè)領(lǐng)域，它是第一個(gè)也是最出名的。JSFiddle有30多個(gè)可立即使用的JavaScript庫(kù)，你還可以輕松的添加外部文件。在預(yù)處理方面，它有用于CSS的SCSS、用于JS的CoffeeScript以及用于HTML的簡(jiǎn)單的Vanilla。

如果你是與另外的程序員進(jìn)行協(xié)作編程，我強(qiáng)烈建議你使用JSFiddle。JSFiddle的協(xié)作特性是同類型應(yīng)用中最好的，而且它不同于Codepen，這個(gè)功能是易用且免費(fèi)的。

JSFiddle的短板在于靈活預(yù)覽方面，你需要點(diǎn)擊播放按鈕來(lái)手動(dòng)刷新頁(yè)面。和其它同類型應(yīng)用相比，JSFiddle算是最慢之一了。另外，JSFiddle還有一個(gè)不足就是它的運(yùn)行按鈕不靈敏，有時(shí)需要點(diǎn)擊幾次才能夠運(yùn)行代碼（這問(wèn)題存在于多個(gè)瀏覽器中）。

JS Bin

JS Bin是由JavaScript開(kāi)發(fā)大師Remy Sharp創(chuàng)建的，他擁有一家專注于JavaScript以及HTML5開(kāi)發(fā)的web開(kāi)發(fā)公司。JS Bin的JS預(yù)處理器包括CoffeeScript、TypeScript、Traceur、JSX以及可供使用的超過(guò)40個(gè)的JS庫(kù)。你可以添加外部文件，但是必須進(jìn)行手動(dòng)編輯。而用于CSS的預(yù)處理器，它提供了LESS。

JS Bin區(qū)別于傳統(tǒng)的代碼調(diào)試平臺(tái)的地方在于它允許你將文件下載到電腦上，這對(duì)于開(kāi)發(fā)者尤其是常在離線狀態(tài)下調(diào)試代碼的程序員來(lái)說(shuō)是一個(gè)很棒的特性。你還可以創(chuàng)建私人的Bin空間，當(dāng)然這是一個(gè)付費(fèi)功能。另外，JS Bin不支持協(xié)作功能。

CSSDeck

CSSDeck已經(jīng)存在了好幾年了，雖然沒(méi)有產(chǎn)生出較大的影響力，但是因?yàn)槠浜?jiǎn)單性還是吸引了很多人使用它。如果你不喜歡除開(kāi)編碼以外的那些繁雜特性，CSSDeck會(huì)是一個(gè)不錯(cuò)的選擇。

CSSDeck的預(yù)處理器包括用于HTML的HAML、Markdown、Slim和Jade，用于CSS的LESS、Stylus、SASS和SCSS，用于JS的CoffeeScript。它還有幾個(gè)可用的CSS和javascript庫(kù)，通過(guò)將其簡(jiǎn)單的手動(dòng)添加進(jìn)庫(kù)列表就可以使用了。

CSSDeck令人稱道的一個(gè)特性就是它支持用戶改變字體大小，這是一個(gè)非常簡(jiǎn)單卻又有用的功能。總的來(lái)說(shuō)，CSSDeck不適合那些想要很多炫酷功能的用戶，它摒棄了許多非必要的功能，專注于從事最重要的工作，它的簡(jiǎn)單性就是它最大的特點(diǎn)。

Dabblet

在很久以前，當(dāng)我還在使用十六進(jìn)制顏色代碼的時(shí)候，Dabblet的特性讓我驚訝了，它的顏色預(yù)覽居然顯示在代碼旁，這是我第一次見(jiàn)到這樣的設(shè)置。雖然我不確定這是否是一個(gè)有用的特性，但是它的整潔性還是給我留下了很深的印象。

現(xiàn)在，Dabblet更加令人驚嘆的地方就是它支持用戶用五個(gè)不同的視角進(jìn)行預(yù)覽：CSS編輯器及視圖，HTML編輯器及視圖，CSS和HTML的編輯器及視圖，JavaScript及運(yùn)行結(jié)果，全部綜合視圖。我不說(shuō)全部，至少它擁有的功能絕大部分調(diào)試平臺(tái)都沒(méi)有。

再說(shuō)一下它的缺點(diǎn)，第一，Dabblet缺乏HTML和CSS的預(yù)處理器，這是令人困惑的。第二，它沒(méi)有內(nèi)置的JavaScript庫(kù)，這點(diǎn)你倒可以通過(guò)手動(dòng)插入JavaScript庫(kù)來(lái)解決。第三，它的每個(gè)板塊大小是固定的，無(wú)法作出調(diào)整，這點(diǎn)和以前傳統(tǒng)的調(diào)試平臺(tái)是一樣的。第四，它缺少一個(gè)用于演示其他用戶作品的板塊。

Liveweave

Liveweave是一個(gè)擁有非常多功能的代碼調(diào)試平臺(tái)，比如可關(guān)閉實(shí)時(shí)預(yù)覽就是其中之一。你也可以為了保護(hù)視力，開(kāi)啟夜視模式，將所有界面都變暗。Liveweave提供20多個(gè)JavaScript庫(kù)，甚至還支持SVG。其內(nèi)置的標(biāo)尺使測(cè)量更加精確，更符合美學(xué)上的感受。

它吸引我眼球的地方在于它簡(jiǎn)單的協(xié)作功能。如果你過(guò)去曾經(jīng)使用過(guò)Teamviewer，你會(huì)發(fā)現(xiàn)兩者的工作方式是一樣的。你需要做的事就只是點(diǎn)擊協(xié)作鏈接，你就可以分享來(lái)自于你的weave的鏈接了。我不清楚是我電腦還是互聯(lián)網(wǎng)的原因，這有一點(diǎn)輕微的延遲，但是作為一個(gè)必不可少的功能，Liveweave在這點(diǎn)上做得很好。

你甚至可以下載你的weave文件，并保存為單一的HTML格式（將JS、CSS和HTML都保存到同一個(gè)文件里，這點(diǎn)可做得不夠漂亮！），或者保存為包含獨(dú)立的HTML、CSS和JS文件的zip壓縮包（這個(gè)還行。）對(duì)了，有一點(diǎn)我還忘了說(shuō)，Liveweave還有一個(gè)內(nèi)置的（亂數(shù)假文）生成器。  

本文翻譯自