如今的網頁程式碼，一般由三個部分組成：
* HTML，語義層，提供網頁的內容。
* CSS，表現層，規定網頁的外觀。
* Javascript，動作層，定義使用者與網頁的互動。
理想的開發環境，應該既可以分別除錯這三種程式碼，又可以輕鬆檢視它們合併在一起的整體效果。
瀏覽器是最合適的效果檢視工具，所以很多人想到，程式碼除錯環境也可以直接部署在瀏覽器中，以網站的形式提供服務。
下面，我根據Design Shack的文章，總結一下目前最常見的6種網頁開發線上除錯環境。它們大大方便了網頁設計師的工作，極大地提供了工作效率。
一、CSSDesk
網址：http://cssdesk.com/ （需翻牆）
這個網站是最早出現的線上除錯環境之一，主要用於除錯CSS。
左側兩個皮膚，可以分別輸入html和css程式碼，但不支援Javascript除錯。
你可以改變"預覽區"的背景顏色，可以儲存或下載除錯完成的程式碼。
二、Dabblet
Dabblet也是一個CSS除錯環境，不支援Javascript除錯。
它將網頁效果分成"CSS效果"、"HTML效果"和"整體效果"三個皮膚，方便單獨除錯。
它最大的特點有兩個，一是動態顯示程式碼效果，程式碼一輸入，效果就自動顯示出來；二是顯示CSS提示，比如上圖的字型效果和長度效果。
三、JS Bin
這是一個較早出現的Javascript線上除錯環境。
它分成Javascript、html和"效果預覽"三個區域，你可以自行勾選顯示哪些區域。它沒有獨立的CSS程式碼區，CSS程式碼必須嵌入html程式碼，這點很不方便。
它支援載入常用的Javascript庫。除此以外，其他特色不多。
四、jsFiddle
jsFiddle是目前最受歡迎的線上除錯環境。
它的預設介面分成5個區域，左邊是引數設定，右邊依次是HTML、Javascript、CSS和"效果預覽區"。
除了載入常見的Javascript庫，它還支援SCSS程式碼和CoffeeScript程式碼。你甚至可以把它的視窗嵌入自己的網頁。
五、Tinkerbin
Tinkerbin很像jsFiddle，也是分成HTML、Javascript、CSS和"效果預覽區"。
它的特點在於，你可以選擇某種程式碼獨佔整個編輯區，這樣就增大了程式碼編輯的可視空間。另外，它可以實時顯示程式碼執行結果，這是jsFiddle不支援的。
它支援的程式碼種類相當多，比如 HAML、SCSS、LESS和CoffeeScript。
六、Rendur
Rendur是一個輕量級線上除錯環境，功能不多，但是載入和執行都很快。
使用者可以在HTML、CSS、Javascript三個皮膚中切換，輸入相應程式碼。程式碼的執行結果，會自動顯示在背景網頁上。最後一個皮膚，顯示的是整個網頁的原始碼。
（完）