網(wǎng)頁開發(fā)的6種在線調(diào)試環(huán)境
如今的網(wǎng)頁代碼，一般由三個部分組成：
◆ HTML，語義層，提供網(wǎng)頁的內(nèi)容。
◆ CSS，表現(xiàn)層，規(guī)定網(wǎng)頁的外觀。
◆ Javascript，動作層，定義用戶與網(wǎng)頁的互動。
理想的開發(fā)環(huán)境，應(yīng)該既可以分別調(diào)試這三種代碼，又可以輕松查看它們合并在一起的整體效果。
瀏覽器是最合適的效果查看工具，所以很多人想到，代碼調(diào)試環(huán)境也可以直接部署在瀏覽器中，以網(wǎng)站的形式提供服務(wù)。
下面，我根據(jù)Design Shack的文章，總結(jié)一下目前最常見的6種網(wǎng)頁開發(fā)在線調(diào)試環(huán)境。它們大大方便了網(wǎng)頁設(shè)計師的工作，極大地提供了工作效率。
一、CSSDesk
網(wǎng)址：http://cssdesk.com/ (需翻墻)
這個網(wǎng)站是最早出現(xiàn)的在線調(diào)試環(huán)境之一，主要用于調(diào)試CSS。
左側(cè)兩個面板，可以分別輸入html和css代碼，但不支持Javascript調(diào)試。
你可以改變"預(yù)覽區(qū)"的背景顏色，可以保存或下載調(diào)試完成的代碼。
二、Dabblet
網(wǎng)址：http://dabblet.com/
Dabblet也是一個CSS調(diào)試環(huán)境，不支持Javascript調(diào)試。
它將網(wǎng)頁效果分成"CSS效果"、"HTML效果"和"整體效果"三個面板，方便單獨調(diào)試。
它最大的特點有兩個，一是動態(tài)顯示代碼效果，代碼一輸入，效果就自動顯示出來;二是顯示CSS提示，比如上圖的字體效果和長度效果。
三、JS Bin
網(wǎng)址：http://jsbin.com
這是一個較早出現(xiàn)的Javascript在線調(diào)試環(huán)境。
它分成Javascript、html和"效果預(yù)覽"三個區(qū)域，你可以自行勾選顯示哪些區(qū)域。它沒有獨立的CSS代碼區(qū)，CSS代碼必須嵌入html代碼，這點很不方便。
它支持加載常用的Javascript庫。除此以外，其他特色不多。
#p#
四、jsFiddle
網(wǎng)址：http://jsfiddle.net/
jsFiddle是目前最受歡迎的在線調(diào)試環(huán)境。
它的默認界面分成5個區(qū)域，左邊是參數(shù)設(shè)置，右邊依次是HTML、Javascript、CSS和"效果預(yù)覽區(qū)"。
除了加載常見的Javascript庫，它還支持SCSS代碼和CoffeeScript代碼。你甚至可以把它的窗口嵌入自己的網(wǎng)頁。
五、Tinkerbin
網(wǎng)址：http://tinkerbin.com/
Tinkerbin很像jsFiddle，也是分成HTML、Javascript、CSS和"效果預(yù)覽區(qū)"。
它的特點在于，你可以選擇某種代碼獨占整個編輯區(qū)，這樣就增大了代碼編輯的可視空間。另外，它可以實時顯示代碼運行結(jié)果，這是jsFiddle不支持的。
它支持的代碼種類相當多，比如 HAML、SCSS、LESS和CoffeeScript。
六、Rendur
網(wǎng)址：http://rendur.com/
Rendur是一個輕量級在線調(diào)試環(huán)境，功能不多，但是加載和運行都很快。
用戶可以在HTML、CSS、Javascript三個面板中切換，輸入相應(yīng)代碼。代碼的運行結(jié)果，會自動顯示在背景網(wǎng)頁上。最后一個面板，顯示的是整個網(wǎng)頁的源碼。
原文：http://www.ruanyifeng.com/blog/2012/02/6_online_playgrounds_for_web_developing.html
【編輯推薦】
