作為前端開發(fā)人員來說，我們需要和HTML、CSS和JavaScript打交道，并且需要不停的突破自己的創(chuàng)意極限來開發(fā)和設(shè)計最棒的交互場景。

很多資深的前端設(shè)計師都擁有自己最喜歡的工具、腳本和資源，在今天這篇文章中，我們將介紹一些能夠幫助你高效開發(fā)的工具腳本和資源，權(quán)當(dāng)拋磚引玉，希望能夠帶給大家?guī)椭?，如果你也有自己喜歡的好東西，請給我們留言，希望能夠讓更多的朋友了解。

1.  JSFIDDLE

JSFIDDLE是一個超棒的在線JS/CSS/HTML調(diào)試和分享工具，大家可以方便的在web頁面中分享代碼，或者調(diào)試代碼。并且有效的和同事或者朋友分享。



2.  JSBin

JSbin是另外一個相當(dāng)不錯的在線調(diào)試和分享網(wǎng)站，和JSFIDDLE非常類似，但是整體界面更偏重于編輯和調(diào)試。你擁有更大的編輯區(qū)域，而且擁有控制臺可以查看錯誤。



3.  HTML/CSS/Javascript的在線開發(fā)工具 - Fiddle Salad

超棒的HTML/CSS/Javascript的在線開發(fā)工具，如果你使用過JSFIDDLE的話，相信大家會更喜歡這個功能強大的在線整合開發(fā)環(huán)境。



4.  Tinkerbin

另外一個在線調(diào)試和演示前端開發(fā)工具，和jsfiddle比較起來，TinkerBin界面功能比較簡答，但是界面布局更加合理。使用jsfiddle的時候，總感覺每一個窗口的輸入都比較費勁，用戶不得不來回的拖拉窗口。而使用Tinkerbin， 你可以更加容易的切換多個窗口或者單一個窗口來瀏覽器CSS、HTML或者JS代碼。



5.  Browser Support

作為一個前端開發(fā)者來說，處理不同瀏覽器的兼容性問題如同家常便飯，但是如果讓你說出不同瀏覽器的CSS兼容性區(qū)別，還真不太容易，這里介紹的這個工具Browser Support，可以很方便的告訴你不同瀏覽器下的CSS區(qū)別以及是否被支持。相當(dāng)?shù)姆奖悖?



6.  openwebicon

如果你厭倦了圖片生成的圖標(biāo)的話，使用openwebicon是一個不錯選擇，你只需要添加class即可生成需要的圖標(biāo)。



7.  gradient-scanner

這個工具超酷，能夠幫助你將上傳圖片中的漸變特效生成CSS樣式，非常便捷和高效，也非常實用。



8.  Em Calculator

Em calculator是一個輕巧的JavaScript工具，能夠幫助你創(chuàng)建靈活的CSS設(shè)計。它幫助你轉(zhuǎn)換像素到em單位?？梢詭椭阌行У牟榭?、比對像素和字體大小。



9.  CSS ARROW PLEASE!

一個在線的、簡單實用的生成氣泡式提示的web工具。



10.  checkmycolours

一個幫助你檢查網(wǎng)站顏色對比度的工具，能夠有效的幫助你設(shè)計搭配完美的顏色方案。



11.  Screenqueri.es

如果你需要開發(fā)響應(yīng)式布局設(shè)計的網(wǎng)站的話，這個工具肯定能夠幫你大忙，它能夠模擬不同設(shè)備的屏幕尺寸，并且?guī)椭阏季€不同設(shè)計上的網(wǎng)站顯示效果，絕對是測試必備工具。



12.  Dirty Markup

如果你需要一個幫助你規(guī)整書寫混亂的代碼的工具的話，我強烈推薦給你這個在線代碼美化工具。這個在線工具能夠幫助你有效的處理HTML/HTML5、CSS和JavaScript代碼。



13.  jQuery mobile原型設(shè)計開發(fā)工具 - codiqa

一個超棒的在線原型設(shè)計開發(fā)工具，這個在線設(shè)計工具能夠幫助我們快速的使用拖拽的方式來構(gòu)建一個基于jQuery mobile的web應(yīng)用程序。



14.  Screenfly

Screenfly是一個免費測試工具，可以用來測試不同客戶端下（不同顯示器或者移動設(shè)備）網(wǎng)站顯示狀況的工具。它使用一個代理服務(wù)器來模擬設(shè)備，并且支持最流行的平板電腦或者移動設(shè)備。



15.  Fixie

fixiejs是一個超實用的虛構(gòu)內(nèi)容生成腳本，如果你設(shè)計網(wǎng)站或者網(wǎng)頁，往往需要添加一些文字或者圖片內(nèi)容來查看效果，這個腳本可以有效的幫助你生成不同類型內(nèi)容，讓你專注于設(shè)計本身！



16.  SimpleCart

超酷的純JavaScript實現(xiàn)的購物車程序，能夠很有效的幫助你生成一個B2C購物車。簡單、實用、快捷！



17.  Animate.css

animate.css 是一套超棒的CSS動畫腳本，可以幫助你使用CSS實現(xiàn)各種類型的動畫，不同的淡入、淡出，或者旋轉(zhuǎn)、翻轉(zhuǎn)特效。絕對是幫助你快速生成特效的好工具，你可以通過使用jQuery的addClass來給你的元素添加特效，方便實用，非常易于整合。 相信你一定會喜歡的！



18.  Redactor - HTML富編輯器

基于jQuery的一個超棒WYSIWYG編輯器。這個編輯器使用jQuery技術(shù)作為框架開發(fā)完成，整合了很多炫酷的功能，比如，拖拽上傳文件、自動保存等，速度很快，并且體積非常小。



19.  jqueryboilerplate

jQuery Boilerplate是一個不錯的jQuery插件開發(fā)工具，使用這個工具可以幫助你快速的構(gòu)建一個jQuery插件。