1. CodePen
CodePen是我最喜歡的代碼編輯器之一。 CodePen有一些炫酷而獨特的功能，這使得它成為Web開發(fā)中最流行的在線代碼編輯器之一。CodePen的特點是：
實時預(yù)覽HTML，CSS和JavaScript您可以使用預(yù)處理程序的語法像Sass, LESS, Stylus. Markdown, Haml, Slim, Jade使用CodePen組合展示才華和設(shè)計自己的組合主頁。您可以使用Hire Me（聘用我）功能服務(wù)找到兼職工作。任何資源都可以嵌入在任何其他網(wǎng)站。2.Dabblet
Dabblet的界面十分簡潔，操作起來并不復(fù)雜，特別適合新手和想嘗試最新HTML5標簽和CSS3樣式的前端攻城師使用。Dabblet的一大特色是代碼編寫時可免加CSS前綴。因為，Lea Verou（工具的作者）本人就是免CSS前綴JavaScript腳本 -prefix-free的作者，Dabblet擁有此功能當(dāng)然是順理成章的事。HTML和CSS代碼間的切換也很方便，點擊隱藏工具欄右上方的標簽即可。用戶可以根據(jù)習(xí)慣，調(diào)整前端代碼的預(yù)覽效果，瀏覽器內(nèi)全屏預(yù)覽將新標簽頁中打開。Dabblet支持用Github帳號登錄，測試的代碼段既可以匿名保存也可以保存在用戶的Github:gist中，以便用戶將代碼段嵌入自己的站點或是進一步分享給其他人。
3.Thimble
Mozilla 推出 的HTML/CSS 在線交互式學(xué)習(xí)網(wǎng)站 Thimble：左側(cè)編輯，右側(cè)實時預(yù)覽，帶有大量真實案例。該站是 Mozilla 新近推出的 Webmaker 計劃 的組成部分，旨在幫助普通用戶在線學(xué)習(xí)編寫 HTML 和 CSS。Thimble 提供的是雙面板設(shè)計， 左側(cè)為帶語法高亮的代碼編輯，右側(cè)可實時預(yù)覽 網(wǎng)頁效果， 如果用戶對效果滿意， 可通過右上方的藍色 “Publish” 按鈕一鍵發(fā)布， 還可通過提供的 Twitter 發(fā)布按鈕與好友分享你的設(shè)計成果。
4.JSFiddle
JSFiddle是一個老牌的在線JavaScript代碼調(diào)試工具。支持JavaScript、CSS、HTML代碼可視化在線調(diào)試工具，支持多種應(yīng)用多種主流框架，用起來非常方便，而且還可以將調(diào)試好的結(jié)果以非常簡潔的頁面直接嵌其他網(wǎng)頁里。除了可以調(diào)試代碼外，還可以方便的發(fā)布到社區(qū)，論壇或者社交媒體上與朋友們分享或者提問。整合了很多的不同的類庫供大家選擇。
5.CSSDesk
CSSDesk工具是一個標準的CSS沙盒，可以給予CSS初學(xué)者最大的幫助，網(wǎng)站分成三欄，我們可以非常方便的通過在左側(cè)實時修改代碼來查看某個CSS屬性的改變給HTML元素帶來的影響，甚至我們可以把整個網(wǎng)站都放到其中來進行調(diào)試，并將調(diào)試完成的文件保存為HTMl。唯一的遺憾是缺少代碼提示，需要手工輸入CSS屬性。6.CodeMirror
又一款“Online Source Editor”，基于Javascript，短小精悍，實時在線代碼高亮顯示，他不是某個富文本編輯器的附屬產(chǎn)品，他是許多大名鼎鼎的在線代碼編輯器的基礎(chǔ)庫。可以看出，CodeMirror的作者是一個十分向往自由的人。但他的CodeMirror絕對不簡單，看看下面這份清單：
Google Earth KML samplerEloquent JavaScript’s consoleThe qooxdoo playgroundA cool tutorial about the elementAn online IDE for the Orc programming languageGoogle’s API playgroundRapha?l LiveJS BinThe RokPad plugin for JoomlaThe scraperwiki editorjsLinb UI Builder上述的這些在線代碼編輯器都是基于CodeMirror的，是不是感到驚訝，里面有你熟悉的JS Library。
CodeMirror本身的定位也很明確，短小精悍，但代碼質(zhì)量很高，在Google Group的群里面，人們熱烈的進行著用CodeMirror做各式各樣改造的討論，可見對他的歡迎。
假如你有項目需要在線代碼編輯，還等什么？CodeMirror，絕對是你最好的選擇。
7.JS Bin
JSBin 是一個 Web 應(yīng)用，主要用于幫助測試 JavaScript 和 CSS 的代碼片段。功能與 jsFiddle 網(wǎng)站一致。8.eCoder
ecoder是一個基于Web的代碼編輯器，采用PHP和JavaScript開發(fā)。它包括：實時語法加亮，一個文件瀏覽器，一個文件上傳器和一個標簽系統(tǒng)能夠?qū)崿F(xiàn)直接在服務(wù)器上同時編輯多個文件。9.Codeanywhere
Codeanywhere是一個在線的代碼編輯器，你可以在瀏覽器中編寫html、css、javascript、php、XML的代碼，目前支持chrome、firefox、Opera、Safari、IE，當(dāng)然也可以在android、iphone上安裝codeanywhere的軟件。Codeanywhere的特點是：隨時隨地可以寫代碼（雖然我認為手機上寫代碼有點搞笑）。
Codeanywhere支持連接FTP Server、Dropbox、Github，比如Dropbox，你只要有一個賬號，連上Dropbox后，Codeanywhere能夠在Dropbox上創(chuàng)建html等文件，你寫的代碼都存放在Dropbox上了。
10.AWS Cloud9 IDE
Cloud9 IDE是一個用來測試運行Node.js 和 JavaScript平臺，但也支持Python, Ruby和 Apache+PHP的應(yīng)用程序，例如Wordpress。前幾天分享了支持Node.js、Python、Go、Rails等程序語言的Nitrous.io空間，很快有朋友給部落寫郵件，告知Cloud9可以比Nitrous.io更長久地運行應(yīng)用實例。Cloud9支持的程序語言有Node.js、HTML5、PHP、Python / Django、Ruby on Rails、C/C++、StrongLoop，提供FTP、S-S-H和空間托管，有MysqL、MongoDB、SQLite數(shù)據(jù)庫，可以一鍵安裝Wordpress，也可以自己上傳程序代碼，支持協(xié)同編輯合作，另外可以和其它的云空間整合。
Cloud9支持將代碼一鍵發(fā)布到Heroku、Windows Azure、Google App Engine、CloudFoundry等云空間上，還可以同步應(yīng)用到Github空間上，總之，除了Cloud9空間不支持綁定自己的域名、無法永久保持應(yīng)用在線外，Cloud9空間用來測試程序和代碼還是不錯的。
以上就是為你推薦的10個最好的JavaScript在線編輯器。它們有的是單純的JavaScript代碼編輯器,有些則支持多種語言,還有一些提供完整的IDE。哪一個是你最喜歡的呢?分享你的評價吧。
