6個好用的Web開發工具

       在過去的幾年間，涌現出了不少Web開發工具，它們大多仍是比較吸引人的，方便了咱們的工做。咱們能夠學習一下這些新東西，短期就能夠拓寬思路（PHP100推薦：學習10分鐘，改變你的程序員生涯）。這些應用容許咱們咱們實時編輯和預覽客戶端代碼：HTML，CSS以及JavaScript。更重要的是，他們基本上都是開源的，你能夠免費的使用它們用來教學或調試程序。
 

       我的而言，這些好用的開發工具極大地幫助了個人工做，當我被JavaScript或CSS的代碼卡住的時候，我就能夠在環境上分享個人代碼，請其餘開發者 朋友幫助我解決。這些平臺頗有趣，交互性強，特別適用於初學者。在這裏，給你們列出6個好用的平臺環境，你能夠試一試。

 

1. Codepen

       Codepen應該是全世界最受歡迎的開發環境之一了。CSS技巧的做者Chris Coyier是Codepen的聯合創始人之一，這也就是爲何這款 app看起來那麼豪華。除了視覺上的優秀效果，它能夠生動地展示預覽，當你修改了代碼，就能夠看到效果，使你可以更容易地找出變化。

 

       Codepen用於CSS的預處理器包括SCSS、SASS，LESS和Stylus，用於JS的有CoffeeScript和LiveScript，用 於HTML的包括Haml、Markdown、Slim和Jade。另外，它還包含了8個可用的內置的JS庫。Codepen中合做和私人的「pens」 須要付費使用。【前往Codepen】

 

2. JSFiddle

       JSFiddle能夠說是成就了開發環境的流行，它是第一個也是最出名的平臺。JSFiddle有超過30個能夠當即使用的JavaScript庫，你還 能夠輕鬆的添加外部文件。在預處理方面，它有用於CSS的SCSS、用於JS的CoffeeScript以及用於HTML的簡單Vanilla。

 

       若是你在與其餘開發者合做，我強烈建議你使用JSFiddle。在全部的開發環境中，JSFiddle的協做特性是同類型應用中最好的，並且區別於Codepen的是，它的這個特性是操做簡單而且免費的。

       但JSFiddle沒有的是預覽功能，你須要手動刷新頁面。和其它開發平臺相比，JSFiddle確實也比較慢。另外，JSFiddle還有一個不足就是它的執行鍵不是很靈敏，有時須要多點擊幾回纔可以執行代碼。【前往JSFiddle】

 

3. JS Bin

       JS Bin是由JavaScript開發大師Remy Sharp建立的，他擁有一家專一於JavaScript和HTML5的web開發公司。 JS Bin的JS預處理器包括CoffeeScript、TypeScript、Traceur、JSX以及可供使用的超過40個的JS庫。你一樣能夠 添加外部文件，可是必須在編輯器上手動操做。而用於CSS的預處理器，它提供了LESS。
 

       JS Bin和之前開發平臺的區別在於它容許你把文件下載到你的電腦上，這對於開發者，尤爲是在離線狀態下調試代碼的程序員來講，是一個很不錯的特色。你還能夠建立私人的Bin空間，不過你須要對此付費。另外，JS Bin不支持協做功能。【前往JS Bin】

 

4. CSSDeck

       CSSDeck已經存在一些年了，但它的影響力好像不是很大。不過，因爲它的簡潔性，它仍是值得關注的。若是你不須要其它平臺裏那些複雜的功能，那CSSDeck就應該是你的選擇。

       CSSDeck的預處理器包括用於HTML的HAML、Markdown、Slim和Jade，用於CSS的LESS、Stylus、SASS和 SCSS，以及用於JS的CoffeeScript。它還有幾個可用的CSS和javascript庫，對於沒有的庫，你只須要將其手動地添加到庫的列表 中就可使用了。

       CSSDeck雖然很簡潔，但它有一個讓我很吃驚的特性，就是它支持用戶改變字體大小，這是一個簡單卻實用的功能。因此說，若是你在尋找有不少很炫的功能的開發平臺，CSSDeck可能不適合你。它的簡潔性讓你更專一於最重要的事情，這也是它最大的特色。【前往CSSDeck】

 

5. Dabblet

       當我還在使用十六進制顏色代碼的時候，Dabblet的特性讓我驚訝了，它的顏色預覽竟然顯示在代碼旁，這是我第一次見到這樣的設置。雖然我不肯定這是不是一個有用的特性，可是它的整潔性仍是給我留下了很深的印象。

       如今，Dabblet最棒的地方在於它容許用戶以5個不一樣的視角進行預覽，分別是CSS編輯器和效果，HTML編輯器和效果，CSS和HTML的編輯器和效果，JavaScript及運行結果，所有綜合效果。這些功能在絕大部分的開發環境中都沒有。

       它也有不足，第一，Dabblet缺少HTML和CSS的預處理器，這是使人困惑的。第二，它沒有內置的JavaScript庫，不過你能夠經過手動插入 JavaScript庫來解決。第三，它的每一個板塊大小是固定的，沒法做出調整，這和之前傳統的調試平臺是同樣的。第四，它缺乏一個用於演示其餘用戶做品 的板塊。【前往Dabblet】

 

6. Liveweave

       Liveweave是一個擁有不少功能的開發平臺，好比能夠關閉的實時預覽。你也能夠爲了保護視力，開啓夜間模式，將全部界面都變暗。Liveweave 提供了20多個JavaScript庫，甚至還支持SVG。其內置的標尺使測量更加精確，更符合美學標準。

       它還有一個吸引我眼球的地方，就是它的協做功能。若是你過去曾經使用過Teamviewer，你會發現它們是類似的。你須要作的事只是點擊協做連接，你就能夠分享來自於你到weave的連接了。

       你甚至能夠下載你的weave文件，並把它保存爲單獨的HTML文件或者保存爲包含獨立HTML、CSS和JS文件的zip壓縮包。對了，Liveweave還有一個內置的Lorem Ipsum生成器。 【前往Liveweave】

 

結語

       固然，每個平臺和工具都有它本身的特性，都會對你有所幫助，會讓你愛上編程（PHP100推薦：我爲何癡迷於編程）。我但願你看完這篇文章，根據須要你能夠選出適合你的工具。若是你有其餘的平臺推薦，歡迎在評論中分享。



原文：http://www.hongkiat.com/blog/coding-playgrounds/
譯文：http://www.php100.com/html/it/focus/2014/1104/7706.html （翻譯：PHP100_Zeroing）