代碼調試平臺是Web開(kāi)發(fā)者進(jìn)行開(kāi)發(fā)、測試、分享、協(xié)作和交流的網(wǎng)絡(luò )應用，它們支持實(shí)時(shí)的編輯、預覽HTML、CSS和JavaScript的客戶(hù)端代碼。這些代碼調試平臺最值得稱(chēng)道的地方在于，它們中的大多數都是免費的，你可以很容易的以學(xué)習或者調試程序為目的與他人分享你的工作。
就個(gè)人而言，這些web應用程序在日常工作中給我帶來(lái)了不小的幫助。每當在使用JavaScript或者CSS編程碰到瓶頸的時(shí)候，我可以在代碼調試平臺上分享自己的代碼并邀請其他的開(kāi)發(fā)者朋友來(lái)解決。這種模式的有趣性和互動(dòng)性對于新手的學(xué)習有很大的幫助。以下就是筆者推薦的六個(gè)代碼調試平臺。
Codepen應該是全世界最受歡迎的代碼調試平臺了。CSS技巧的原作者Chris Coyier是Codepen的聯(lián)合創(chuàng )始者之一，這就很好的說(shuō)明了為什么這款網(wǎng)絡(luò )應用會(huì )如此的受歡迎。此外，Codepen的視覺(jué)效果也是很重要的一個(gè)原因，它的編輯器可以快速生動(dòng)的展現代碼改變所產(chǎn)生的預覽顯示，使你能夠更容易地找出變化。
Codepen用于CSS的預處理器包括SCSS、SASS、LESS和Stylus，用于JS的預處理器包括CoffeeScript和LiveScript，用于HTML包括Haml、Markdown、Slim和Jade。另外，它還包含了8個(gè)可用的內置的JS庫。在Codepen中，私人和協(xié)作的板塊功能可以通過(guò)付費來(lái)獲得。 訪(fǎng)問(wèn)它>>
JSFiddle是一個(gè)可靠的流行代碼的調試平臺，在這個(gè)領(lǐng)域，它是第一個(gè)也是最出名的。JSFiddle有30多個(gè)可立即使用的JavaScript庫，你還可以輕松的添加外部文件。在預處理方面，它有用于CSS的SCSS、用于JS的CoffeeScript以及用于HTML的簡(jiǎn)單的Vanilla。
如果你是與另外的程序員進(jìn)行協(xié)作編程，我強烈建議你使用JSFiddle。JSFiddle的協(xié)作特性是同類(lèi)型應用中最好的，而且它不同于Codepen，這個(gè)功能是易用且免費的。
JSFiddle的短板在于靈活預覽方面，你需要點(diǎn)擊播放按鈕來(lái)手動(dòng)刷新頁(yè)面。和其它同類(lèi)型應用相比，JSFiddle算是最慢之一了。另外，JSFiddle還有一個(gè)不足就是它的運行按鈕不靈敏，有時(shí)需要點(diǎn)擊幾次才能夠運行代碼（這問(wèn)題存在于多個(gè)瀏覽器中）。 訪(fǎng)問(wèn)它>>
JS Bin是由JavaScript開(kāi)發(fā)大師Remy Sharp創(chuàng )建的，他擁有一家專(zhuān)注于JavaScript以及HTML5開(kāi)發(fā)的web開(kāi)發(fā)公司。JS Bin的JS預處理器包括CoffeeScript、TypeScript、Traceur、JSX以及可供使用的超過(guò)40個(gè)的JS庫。你可以添加外部文件，但是必須進(jìn)行手動(dòng)編輯。而用于CSS的預處理器，它提供了LESS。
JS Bin區別于傳統的代碼調試平臺的地方在于它允許你將文件下載到電腦上，這對于開(kāi)發(fā)者尤其是常在離線(xiàn)狀態(tài)下調試代碼的程序員來(lái)說(shuō)是一個(gè)很棒的特性。你還可以創(chuàng )建私人的Bin空間，當然這是一個(gè)付費功能。另外，JS Bin不支持協(xié)作功能。 訪(fǎng)問(wèn)它>>
CSSDeck已經(jīng)存在了好幾年了，雖然沒(méi)有產(chǎn)生出較大的影響力，但是因為其簡(jiǎn)單性還是吸引了很多人使用它。如果你不喜歡除開(kāi)編碼以外的那些繁雜特性，CSSDeck會(huì )是一個(gè)不錯的選擇。
CSSDeck的預處理器包括用于HTML的HAML、Markdown、Slim和Jade，用于CSS的LESS、Stylus、SASS和SCSS，用于JS的CoffeeScript。它還有幾個(gè)可用的CSS和javascript庫，通過(guò)將其簡(jiǎn)單的手動(dòng)添加進(jìn)庫列表就可以使用了。
CSSDeck令人稱(chēng)道的一個(gè)特性就是它支持用戶(hù)改變字體大小，這是一個(gè)非常簡(jiǎn)單卻又有用的功能?？偟膩?lái)說(shuō)，CSSDeck不適合那些想要很多炫酷功能的用戶(hù)，它摒棄了許多非必要的功能，專(zhuān)注于從事最重要的工作，它的簡(jiǎn)單性就是它最大的特點(diǎn)。 訪(fǎng)問(wèn)它>>
在很久以前，當我還在使用十六進(jìn)制顏色代碼的時(shí)候，Dabblet的特性讓我驚訝了，它的顏色預覽居然顯示在代碼旁，這是我第一次見(jiàn)到這樣的設置。雖然我不確定這是否是一個(gè)有用的特性，但是它的整潔性還是給我留下了很深的印象。
現在，Dabblet更加令人驚嘆的地方就是它支持用戶(hù)用五個(gè)不同的視角進(jìn)行預覽：CSS編輯器及視圖，HTML編輯器及視圖，CSS和HTML的編輯器及視圖，JavaScript及運行結果，全部綜合視圖。我不說(shuō)全部，至少它擁有的功能絕大部分調試平臺都沒(méi)有。
再說(shuō)一下它的缺點(diǎn)，第一，Dabblet缺乏HTML和CSS的預處理器，這是令人困惑的。第二，它沒(méi)有內置的JavaScript庫，這點(diǎn)你倒可以通過(guò)手動(dòng)插入JavaScript庫來(lái)解決。第三，它的每個(gè)板塊大小是固定的，無(wú)法作出調整，這點(diǎn)和以前傳統的調試平臺是一樣的。第四，它缺少一個(gè)用于演示其他用戶(hù)作品的板塊。 訪(fǎng)問(wèn)它>>
Liveweave是一個(gè)擁有非常多功能的代碼調試平臺，比如可關(guān)閉實(shí)時(shí)預覽就是其中之一。你也可以為了保護視力，開(kāi)啟夜視模式，將所有界面都變暗。Liveweave提供20多個(gè)JavaScript庫，甚至還支持SVG。其內置的標尺使測量更加精確，更符合美學(xué)上的感受。
它吸引我眼球的地方在于它簡(jiǎn)單的協(xié)作功能。如果你過(guò)去曾經(jīng)使用過(guò)Teamviewer，你會(huì )發(fā)現兩者的工作方式是一樣的。你需要做的事就只是點(diǎn)擊協(xié)作鏈接，你就可以分享來(lái)自于你的weave的鏈接了。我不清楚是我電腦還是互聯(lián)網(wǎng)的原因，這有一點(diǎn)輕微的延遲，但是作為一個(gè)必不可少的功能，Liveweave在這點(diǎn)上做得很好。
你甚至可以下載你的weave文件，并保存為單一的HTML格式（將JS、CSS和HTML都保存到同一個(gè)文件里，這點(diǎn)可做得不夠漂亮?。?，或者保存為包含獨立的HTML、CSS和JS文件的zip壓縮包（這個(gè)還行。）對了，有一點(diǎn)我還忘了說(shuō)，Liveweave還有一個(gè)內置的Lorem Ipsum（亂數假文）生成器。 訪(fǎng)問(wèn)它>>
聯(lián)系客服
