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