1. CodePen

CodePen是我最喜歡的程式碼編輯器之一。 CodePen有一些炫酷而獨特的功能，這使得它成為Web開發中最流行的線上程式碼編輯器之一。

CodePen的特點是：

實時預覽HTML，CSS和JavaScript您可以使用預處理程式的語法像Sass, LESS, Stylus. Markdown, Haml, Slim, Jade使用CodePen組合展示才華和設計自己的組合主頁。您可以使用Hire Me（聘用我）功能服務找到兼職工作。任何資源都可以嵌入在任何其他網站。

2.Dabblet

Dabblet的介面十分簡潔，操作起來並不複雜，特別適合新手和想嘗試最新HTML5標籤和CSS3樣式的前端攻城師使用。Dabblet的一大特色是程式碼編寫時可免加CSS字首。因為，Lea Verou（工具的作者）本人就是免CSS字首JavaScript指令碼 -prefix-free的作者，Dabblet擁有此功能當然是順理成章的事。HTML和CSS程式碼間的切換也很方便，點選隱藏工具欄右上方的標籤即可。使用者可以根據習慣，調整前端程式碼的預覽效果，瀏覽器內全屏預覽將新標籤頁中開啟。

Dabblet支援用Github帳號登入，測試的程式碼段既可以匿名儲存也可以儲存在使用者的Github:gist中，以便使用者將程式碼段嵌入自己的站點或是進一步分享給其他人。

3.Thimble

Mozilla 推出 的HTML/CSS 線上互動式學習網站 Thimble：左側編輯，右側實時預覽，帶有大量真實案例。該站是 Mozilla 新近推出的 Webmaker 計劃 的組成部分，旨在幫助普通使用者線上學習編寫 HTML 和 CSS。

Thimble 提供的是雙面板設計， 左側為帶語法高亮的程式碼編輯，右側可實時預覽 網頁效果， 如果使用者對效果滿意， 可透過右上方的藍色 “Publish” 按鈕一鍵釋出， 還可透過提供的 Twitter 釋出按鈕與好友分享你的設計成果。

4.JSFiddle

JSFiddle是一個老牌的線上JavaScript程式碼除錯工具。支援JavaScript、CSS、HTML程式碼視覺化線上除錯工具，支援多種應用多種主流框架，用起來非常方便，而且還可以將除錯好的結果以非常簡潔的頁面直接嵌其他網頁裡。

除了可以除錯程式碼外，還可以方便的釋出到社群，論壇或者社交媒體上與朋友們分享或者提問。整合了很多的不同的類庫供大家選擇。

5.CSSDesk

CSSDesk工具是一個標準的CSS沙盒，可以給予CSS初學者最大的幫助，網站分成三欄，我們可以非常方便的透過在左側實時修改程式碼來檢視某個CSS屬性的改變給HTML元素帶來的影響，甚至我們可以把整個網站都放到其中來進行除錯，並將除錯完成的檔案儲存為HTMl。唯一的遺憾是缺少程式碼提示，需要手工輸入CSS屬性。

6.CodeMirror

又一款“Online Source Editor”，基於Javascript，短小精悍，實時線上程式碼高亮顯示，他不是某個富文字編輯器的附屬產品，他是許多大名鼎鼎的線上程式碼編輯器的基礎庫。

可以看出，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，絕對是你最好的選擇。

7.JS Bin

JSBin 是一個 Web 應用，主要用於幫助測試 JavaScript 和 CSS 的程式碼片段。功能與 jsFiddle 網站一致。

8.eCoder

ecoder是一個基於Web的程式碼編輯器，採用PHP和JavaScript開發。它包括：實時語法加亮，一個檔案瀏覽器，一個檔案上傳器和一個標籤系統能夠實現直接在伺服器上同時編輯多個檔案。

9.Codeanywhere

Codeanywhere是一個線上的程式碼編輯器，你可以在瀏覽器中編寫html、css、javascript、php、XML的程式碼，目前支援chrome、firefox、Opera、Safari、IE，當然也可以在android、iphone上安裝codeanywhere的軟體。

Codeanywhere的特點是：隨時隨地可以寫程式碼（雖然我認為手機上寫程式碼有點搞笑）。

Codeanywhere支援連線FTP Server、Dropbox、Github，比如Dropbox，你只要有一個賬號，連上Dropbox後，Codeanywhere能夠在Dropbox上建立html等檔案，你寫的程式碼都存放在Dropbox上了。

10.AWS Cloud9 IDE

Cloud9 IDE是一個用來測試執行Node.js 和 JavaScript平臺，但也支援Python, Ruby和 Apache+PHP的應用程式，例如Wordpress。前幾天分享了支援Node.js、Python、Go、Rails等程式語言的Nitrous.io空間，很快有朋友給部落寫郵件，告知Cloud9可以比Nitrous.io更長久地執行應用例項。

Cloud9支援的程式語言有Node.js、HTML5、PHP、Python / Django、Ruby on Rails、C/C++、StrongLoop，提供FTP、S-S-H和空間託管，有MysqL、MongoDB、SQLite資料庫，可以一鍵安裝Wordpress，也可以自己上傳程式程式碼，支援協同編輯合作，另外可以和其它的雲空間整合。

Cloud9支援將程式碼一鍵釋出到Heroku、Windows Azure、Google App Engine、CloudFoundry等雲空間上，還可以同步應用到Github空間上，總之，除了Cloud9空間不支援繫結自己的域名、無法永久保持應用線上外，Cloud9空間用來測試程式和程式碼還是不錯的。

以上就是為你推薦的10個最好的JavaScript線上編輯器。它們有的是單純的JavaScript程式碼編輯器,有些則支援多種語言,還有一些提供完整的IDE。哪一個是你最喜歡的呢?分享你的評價吧。