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