<fieldset id="ause2"></fieldset>

<strike id="ause2"></strike>

如今的網(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庫。除此以外，其他特色不多。
四、jsFiddle
網(wǎng)址：http://jsfiddle.net/

jsFiddle是目前最受歡迎的在線調(diào)試環(huán)境。

它的默認(rè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不支持的。

它支持的代碼種類相當(dāng)多，比如 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)頁的源碼。