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

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

1.  JSFIDDLE

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



2.  JSBin

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



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

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



4.  Tinkerbin

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



5.  Browser Support

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



6.  openwebicon

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



7.  gradient-scanner

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



8.  Em Calculator

Em calculator是一個(gè)輕巧的JavaScript工具，能夠幫助你創(chuàng)建靈活的CSS設(shè)計(jì)。它幫助你轉(zhuǎn)換像素到em單位。可以幫助你有效的查看、比對(duì)像素和字體大小。



9.  CSS ARROW PLEASE!

一個(gè)在線的、簡(jiǎn)單實(shí)用的生成氣泡式提示的web工具。



10.  checkmycolours

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



11.  Screenqueri.es

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



12.  Dirty Markup

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



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

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



14.  Screenfly

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



15.  Fixie

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



16.  SimpleCart

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



17.  Animate.css

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



18.  Redactor - HTML富編輯器

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



19.  jqueryboilerplate

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