1、Grid Guide

一款小巧的柵格創(chuàng)建工具，用戶可以通過自定義間距和列數(shù)建立你自己的柵格方案，Grid Guide 也會(huì)提供一些寬度和列數(shù)供參考選擇。你還可以將柵格方案的下載為PNG圖片，用于導(dǎo)入Photoshop或Illustrator。

2、Foundation

一款類似Bootstrap的框架，不得不承認(rèn)的一點(diǎn)是Bootstrap框架貌似更受前端開發(fā)者的喜愛。但 Foundation 全面更新后卻也有值得關(guān)注的地方，它擁有為柵格、排版、按鈕和其它動(dòng)態(tài)元素的預(yù)定義CSS類。設(shè)計(jì)更加簡單，新的Foundation還有一個(gè)姐妹框架叫做Foundation for Email，一個(gè)適用于電子郵件開發(fā)的框架。

3、CodePen

十分可靠的開發(fā)工具，多數(shù)開發(fā)者鐘情于 cloud IDEs 做前端開發(fā)，你可以在任何電腦上寫代碼，保存你的項(xiàng)目到云端上且分享。當(dāng)你代碼改動(dòng)時(shí)會(huì)自動(dòng)更新。一大亮點(diǎn)是 CodePen 還能支持幾乎所有你能想到的庫。你可以通過預(yù)置HTML模板語言例如Haml或Slim，使用LESS或SASS編譯代碼。

4、Unheap

最新的jQuery插件庫，包含導(dǎo)航、表單、網(wǎng)頁媒體和其他分類等各種類型的插件。而且不斷在更新，基本上都可以在上面找到你想要的插件。

它基本上是一個(gè)擁有著網(wǎng)絡(luò)上所有最佳的jQuery插件的存儲(chǔ)庫，而且它經(jīng)常更新，所以你總能找到各種新的插件。

5、LivePage

LivePage 就是一種免費(fèi)的谷歌擴(kuò)展插件，自動(dòng)刷新你對本地文件做出的修改，意味著你可以在本地編輯你的HTML/CSS/JS文件。LivePage在火狐上也有相同的插件叫做LiveReload。

6、Fullpage Screen Capture

Fullpage Screen Capture 可以捕獲全屏，截取整個(gè)網(wǎng)頁并存為PNG圖片。單擊 Chrome 擴(kuò)展面板中的按鈕，它會(huì)自動(dòng)創(chuàng)建整個(gè)網(wǎng)頁的完整快照，將其拼接成一幅圖像。對網(wǎng)站整體設(shè)計(jì)的研究相當(dāng)有幫助。

7、WhatFont

WhatFont 的擴(kuò)展插件可以幫你找到網(wǎng)絡(luò)上最棒的字體。添加插件后，你在瀏覽網(wǎng)頁上某一款文字的時(shí)候，點(diǎn)擊它并懸停，就會(huì)給你所有的包括字體樣式、大小等方案，甚至是下載地址。

8、 Node/npm

作為前端開發(fā)者你應(yīng)該學(xué)習(xí)命令行，因?yàn)楝F(xiàn)在這是一種在前端工作流程中必要的工具。npm 也完全由命令行管理。它將JavaScript傳遞給后臺，并返回給我們npm，一種發(fā)展最迅速的包管理器。如果你之前從未嘗試過npm，建議試一下，你會(huì)驚嘆的!

9、Mobile Speed Tester

是一款能測試任何網(wǎng)站在電腦和手機(jī)上響應(yīng)速度的工具，幫助站長建立更好的用戶體驗(yàn)，這樣的一個(gè)免費(fèi)工具能給你好的反饋，讓你選擇的方法更加正確。

10、Responsive Test

Responsive Test 測試站點(diǎn)的響應(yīng)速度，你只需輸入一個(gè)URL并將窗口拖到您要測試的任何寬度。而且還有小按鈕可以切換為iPhone、iPad和通用電腦的預(yù)定義大小方案。省去; 來回拖動(dòng)窗口的麻煩。

TOP10列表今天就說到這里了，希望這些工具可以幫你提升效率，事半功倍。或許還有很多新工具我沒注意到，麻煩你分享一下吧!