在過去的幾年間，涌現(xiàn)出了很多Web開發(fā)工具，它們大多還是比較吸引人的，方便了我們的工作。下面由學(xué)習(xí)啦小編為大家整理的前端開發(fā)工具，希望大家喜歡!

　　前端開發(fā)工具

　　1. Codepen

　　Codepen應(yīng)該是全世界最受歡迎的開發(fā)環(huán)境之一了。CSS技巧的作者Chris Coyier是Codepen的聯(lián)合創(chuàng)始人之一，這也就是為什么這款app看起來那么豪華。除了視覺上的優(yōu)秀效果，它可以生動地展現(xiàn)預(yù)覽，當(dāng)你修改了代碼，就可以看到效果，使你能夠更容易地找出變化。

　　Codepen用于CSS的預(yù)處理器包括SCSS、SASS，LESS和Stylus，用于JS的有CoffeeScript和LiveScript，用于HTML的包括Haml、Markdown、Slim和Jade。另外，它還包含了8個可用的內(nèi)置的JS庫。Codepen中合作和私人的“pens”需要付費(fèi)使用。

　　2. JSFiddle

　　JSFiddle可以說是成就了開發(fā)環(huán)境的流行，它是第一個也是最出名的平臺。JSFiddle有超過30個可以立即使用的JavaScript庫，你還可以輕松的添加外部文件。在預(yù)處理方面，它有用于CSS的SCSS、用于JS的CoffeeScript以及用于HTML的簡單Vanilla。

　　如果你在與其他開發(fā)者合作，我強(qiáng)烈建議你使用JSFiddle。在所有的開發(fā)環(huán)境中，JSFiddle的協(xié)作特性是同類型應(yīng)用中最好的，而且區(qū)別于Codepen的是，它的這個特性是操作簡單并且免費(fèi)的。

　　但JSFiddle沒有的是預(yù)覽功能，你需要手動刷新頁面。和其它開發(fā)平臺相比，JSFiddle確實也比較慢。另外，JSFiddle還有一個不足就是它的執(zhí)行鍵不是很靈敏，有時需要多點(diǎn)擊幾次才能夠執(zhí)行代碼。

　　3. JS Bin

　　JS Bin是由JavaScript開發(fā)大師Remy Sharp創(chuàng)建的，他擁有一家專注于JavaScript和HTML5的web開發(fā)公司。JS Bin的JS預(yù)處理器包括CoffeeScript、TypeScript、Traceur、JSX以及可供使用的超過40個的JS庫。你同樣可以添加外部文件，但是必須在編輯器上手動操作。而用于CSS的預(yù)處理器，它提供了LESS。

　　JS Bin和以前開發(fā)平臺的區(qū)別在于它允許你把文件下載到你的電腦上，這對于開發(fā)者，尤其是在離線狀態(tài)下調(diào)試代碼的程序員來說，是一個很不錯的特點(diǎn)。你還可以創(chuàng)建私人的Bin空間，不過你需要對此付費(fèi)。另外，JS Bin不支持協(xié)作功能。

　　4. CSSDeck

　　CSSDeck已經(jīng)存在一些年了，但它的影響力好像不是很大。不過，由于它的簡潔性，它還是值得關(guān)注的。如果你不需要其它平臺里那些復(fù)雜的功能，那CSSDeck就應(yīng)該是你的選擇。

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

　　CSSDeck雖然很簡潔，但它有一個讓我很吃驚的特性，就是它支持用戶改變字體大小，這是一個簡單卻實用的功能。所以說，如果你在尋找有很多很炫的功能的開發(fā)平臺，CSSDeck可能不適合你。它的簡潔性讓你更專注于最重要的事情，這也是它最大的特點(diǎn)。

　　5. Dabblet

　　當(dāng)我還在使用十六進(jìn)制顏色代碼的時候，Dabblet的特性讓我驚訝了，它的顏色預(yù)覽居然顯示在代碼旁，這是我第一次見到這樣的設(shè)置。雖然我不確定這是否是一個有用的特性，但是它的整潔性還是給我留下了很深的印象。

　　現(xiàn)在，Dabblet最棒的地方在于它允許用戶以5個不同的視角進(jìn)行預(yù)覽，分別是CSS編輯器和效果，HTML編輯器和效果，CSS和HTML的編輯器和效果，JavaScript及運(yùn)行結(jié)果，全部綜合效果。這些功能在絕大部分的開發(fā)環(huán)境中都沒有。

　　它也有不足，第一，Dabblet缺乏HTML和CSS的預(yù)處理器，這是令人困惑的。第二，它沒有內(nèi)置的JavaScript庫，不過你可以通過手動插入JavaScript庫來解決。第三，它的每個板塊大小是固定的，無法作出調(diào)整，這和以前傳統(tǒng)的調(diào)試平臺是一樣的。第四，它缺少一個用于演示其他用戶作品的板塊。

　　6. Liveweave

　　Liveweave是一個擁有很多功能的開發(fā)平臺，比如可以關(guān)閉的實時預(yù)覽。你也可以為了保護(hù)視力，開啟夜間模式，將所有界面都變暗。Liveweave提供了20多個JavaScript庫，甚至還支持SVG。其內(nèi)置的標(biāo)尺使測量更加精確，更符合美學(xué)標(biāo)準(zhǔn)。

　　數(shù)據(jù)庫前端開發(fā)工具

　　MySQL：MySQL是一種關(guān)聯(lián)數(shù)據(jù)庫管理系統(tǒng)，關(guān)聯(lián)數(shù)據(jù)庫將數(shù)據(jù)保存在不同的表中，而不是將所有數(shù)據(jù)放在一個大倉庫內(nèi)，這樣就增加了速度并提高了靈活性。

　　MariaDB：MariaDB數(shù)據(jù)庫管理系統(tǒng)是MySQL的一個分支，主要由開源社區(qū)在維護(hù)，采用GPL授權(quán)許可 MariaDB的目的是完全兼容MySQL，包括API和命令行，使之能輕松成為MySQL的代替品。

　　MongoDB：MongoDB 教程 MongoDB 是一個基于分布式文件存儲的數(shù)據(jù)庫。由 C++ 語言編寫。旨在為 WEB 應(yīng)用提供可擴(kuò)展的高性能數(shù)據(jù)存儲解決方案。

　　Redis：Redis是一個開源的使用ANSI C語言編寫、支持網(wǎng)絡(luò)、可基于內(nèi)存亦可持久化的日志型、Key-Value數(shù)據(jù)庫，并提供多種語言的API。

　　PostgreSQL：ostgreSQL支持大部分 SQL標(biāo)準(zhǔn)并且提供了許多其他現(xiàn)代特性：復(fù)雜查詢、外鍵、觸發(fā)器、視圖、事務(wù)完整性、MVCC。

　　CSS前端開發(fā)工具

　　Sass： Sass是一種CSS的開發(fā)工具，提供了許多便利的寫法，大大節(jié)省了設(shè)計者的時間，使得CSS的開發(fā)，變得簡單和可維護(hù)。

　　Less：Lesscss是一種動態(tài)樣式語言,屬于CSS預(yù)處理語言的一種,它使用類似CSS的語法,為CSS的賦予了動態(tài)語言的特性,如變量、繼承、運(yùn)算、函數(shù)等,更方便CSS的編寫和維護(hù)。

　　Stylus：Stylus 是一個CSS的預(yù)處理框架，2010年產(chǎn)生，來自Node.js社區(qū)，主要用來給Node項目進(jìn)行CSS預(yù)處理支持，所以Stylus 是一種新型語言，可以創(chuàng)建健壯的、動態(tài)的、富有表現(xiàn)力的CSS。