這些風靡一時的前端開發神器，你還在用嗎？

隨著前端開發的興起，很多編輯器、工具、框架都蜂擁而至，很多程序員也都有一些不錯的選擇，以下這七大開發神器，程序員不妨試試。

標配的功能基本都是帶有顏色標識的HTML、CSS和JavaScript編輯器；預覽窗口；HTML預處理器，如HAML；LESS，SASS和Stylus CSS預處理；包含流行的JavaScript庫；開發人員控制台和代碼驗證工具；可通過一個簡短的URL共享；在頁面上可進行演示；代碼分揀；零成本（或僅針對高級服務付款）等。

更好的功能或許是，允許程序員測試並保留實驗性前端代碼段，而無需創建文件，啟動IDE或設置本地伺服器。這裡有七個最好的......

JSFiddle

按照現在應用程序更新換代的速度來看，JSFiddle算的上是十分古老的在線編輯器了。它可以用於HTML、CSS和JavaScript的任意組合測試，並且包含了各種流行的JavaScript庫。今天看起來功能有點基礎，但也提供了一些高級功能，如Ajax模擬器。

CodePen

CodePen是一個在線的前端開發網站，其似乎借用了JSFiddle的部分靈感。只是它的功能更加豐富。它是一個在線的集成開發環境，可用於構建和部署Web項目，這一功能在2017年3月份添加。它同時提供了一些高級功能，如共享和嵌入，添加外部JS和CSS庫，流行的預處理器等。PRO服務提供跨瀏覽器測試、配對編程和教學選項，不過這些都是要付費的，每月9美元。

CSS Deck

雖然被命名為CSS Deck，但它是一個成熟的HTML、CSS和JavaScript開發網站，具有社交和協作功能。不僅可以查看提交作品，還可直接在線修改和測試，它類似於CodePen（我不知道誰影響了誰），但你可能更喜歡它。

JS Bin

JS Bin由JS guru Remy Sharp開發，它集中在基礎功能上，並且可以非常好地處理它們。 它還提供了一個方便的JavaScript控制台。初始界面就具備一個html和js編輯器，如果需要，還可以導入喜歡的jQuery庫。

Dabblet

另一個早期的編輯器是Dabblet，由Lea Verou開創的JavaScript / CSS3演示系統。它看起來很華麗，並自動翻譯所有的CSS。除了具備基本的功能外，它還可以在雲端在線保存代碼，程序員就不需要擔心代碼丟失了。

Plunker

Plunker允許程序員添加多個文件，包括社區生成的模板，以啟動項目。就像CodePen一樣，使用Plunker，可以創建工作演示，還可以與其他程序員合作，並互相分享工作。 Plunker的源代碼是免費的，程序員可以在GitHub信息庫中查看。

Liveweave

Liveweave是一個在線的HTML5、CSS3和JavaScript編輯器，具有實時預覽功能。它為HTML5、CSS3、JavaScript和jQuery提供了代碼提示，可讓程序員以zip文件的形式下載項目。

程序員也可在工作區中輕鬆添加外部庫，如jQuery，AndgularJS，Bootstrap等。此外，Liveweave還提供了一個標尺來幫助編寫響應式設計和「Team Up」功能，該功能與JSFiddle的協作編輯功能相同。

這些JavaScript開發工具可否合你的心意？你有更好的推薦嗎？

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！