Web開發人員的六個代碼調試平台

標籤：傳統   rem   開發人員   頁面   html編輯器   原因   推薦   重新整理   客戶   

代碼調試平台是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還有一個內建的Lorem Ipsum（亂數假文）產生器。 訪問它>> 

Web開發人員的六個代碼調試平台