代碼調試平臺是Web開發者進行開發、測試、分享、協作和交流的網絡應用，它們支持實時的編輯、預覽HTML、CSS和JavaScript的客戶端代碼。這些代碼調試平臺最值得稱道的地方在于，它們中的大多數都是免費的，你可以很容易的以學習或者調試程序為目的與他人分享你的工作。

就個人而言，這些web應用程序在日常工作中給我帶來了不小的幫助。每當在使用JavaScript或者CSS編程碰到瓶頸的時候，我可以在代碼調試平臺上分享自己的代碼并邀請其他的開發者朋友來解決。這種模式的有趣性和互動性對于新手的學習有很大的幫助。以下就是筆者推薦的六個代碼調試平臺。

Codepen

Codepen應該是全世界最受歡迎的代碼調試平臺了。CSS技巧的原作者Chris Coyier是Codepen的聯合創始者之一，這就很好的說明了為什么這款網絡應用會如此的受歡迎。此外，Codepen的視覺效果也是很重要的一個原因，它的編輯器可以快速生動的展現代碼改變所產生的預覽顯示，使你能夠更容易地找出變化。

Codepen用于CSS的預處理器包括SCSS、SASS、LESS和Stylus，用于JS的預處理器包括CoffeeScript和LiveScript，用于HTML包括Haml、Markdown、Slim和Jade。另外，它還包含了8個可用的內置的JS庫。在Codepen中，私人和協作的板塊功能可以通過付費來獲得。

JSFiddle

JSFiddle是一個可靠的流行代碼的調試平臺，在這個領域，它是第一個也是最出名的。JSFiddle有30多個可立即使用的JavaScript庫，你還可以輕松的添加外部文件。在預處理方面，它有用于CSS的SCSS、用于JS的CoffeeScript以及用于HTML的簡單的Vanilla。

如果你是與另外的程序員進行協作編程，我強烈建議你使用JSFiddle。JSFiddle的協作特性是同類型應用中最好的，而且它不同于Codepen，這個功能是易用且免費的。

JSFiddle的短板在于靈活預覽方面，你需要點擊播放按鈕來手動刷新頁面。和其它同類型應用相比，JSFiddle算是最慢之一了。另外，JSFiddle還有一個不足就是它的運行按鈕不靈敏，有時需要點擊幾次才能夠運行代碼（這問題存在于多個瀏覽器中）。

JS Bin

JS Bin是由JavaScript開發大師Remy Sharp創建的，他擁有一家專注于JavaScript以及HTML5開發的web開發公司。JS Bin的JS預處理器包括CoffeeScript、TypeScript、Traceur、JSX以及可供使用的超過40個的JS庫。你可以添加外部文件，但是必須進行手動編輯。而用于CSS的預處理器，它提供了LESS。

JS Bin區別于傳統的代碼調試平臺的地方在于它允許你將文件下載到電腦上，這對于開發者尤其是常在離線狀態下調試代碼的程序員來說是一個很棒的特性。你還可以創建私人的Bin空間，當然這是一個付費功能。另外，JS Bin不支持協作功能。

CSSDeck

CSSDeck已經存在了好幾年了，雖然沒有產生出較大的影響力，但是因為其簡單性還是吸引了很多人使用它。如果你不喜歡除開編碼以外的那些繁雜特性，CSSDeck會是一個不錯的選擇。

CSSDeck的預處理器包括用于HTML的HAML、Markdown、Slim和Jade，用于CSS的LESS、Stylus、SASS和SCSS，用于JS的CoffeeScript。它還有幾個可用的CSS和javascript庫，通過將其簡單的手動添加進庫列表就可以使用了。

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

Dabblet

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

現在，Dabblet更加令人驚嘆的地方就是它支持用戶用五個不同的視角進行預覽：CSS編輯器及視圖，HTML編輯器及視圖，CSS和HTML的編輯器及視圖，JavaScript及運行結果，全部綜合視圖。我不說全部，至少它擁有的功能絕大部分調試平臺都沒有。

再說一下它的缺點，第一，Dabblet缺乏HTML和CSS的預處理器，這是令人困惑的。第二，它沒有內置的JavaScript庫，這點你倒可以通過手動插入JavaScript庫來解決。第三，它的每個板塊大小是固定的，無法作出調整，這點和以前傳統的調試平臺是一樣的。第四，它缺少一個用于演示其他用戶作品的板塊。

Liveweave

Liveweave是一個擁有非常多功能的代碼調試平臺，比如可關閉實時預覽就是其中之一。你也可以為了保護視力，開啟夜視模式，將所有界面都變暗。Liveweave提供20多個JavaScript庫，甚至還支持SVG。其內置的標尺使測量更加精確，更符合美學上的感受。

它吸引我眼球的地方在于它簡單的協作功能。如果你過去曾經使用過Teamviewer，你會發現兩者的工作方式是一樣的。你需要做的事就只是點擊協作鏈接，你就可以分享來自于你的weave的鏈接了。我不清楚是我電腦還是互聯網的原因，這有一點輕微的延遲，但是作為一個必不可少的功能，Liveweave在這點上做得很好。

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

本文翻譯自