十個(gè)免費(fèi)的web前端開發(fā)工具

創(chuàng)新互聯(lián)公司網(wǎng)站設(shè)計(jì)，為客戶量身定制各類網(wǎng)站建設(shè)業(yè)務(wù)，包括企業(yè)型、電子商務(wù)型、成都響應(yīng)式網(wǎng)站建設(shè)、行業(yè)門戶型等各類網(wǎng)站，實(shí)戰(zhàn)經(jīng)驗(yàn)豐富，成功案例眾多。以客戶利益為出發(fā)點(diǎn)，創(chuàng)新互聯(lián)公司網(wǎng)站制作為客戶規(guī)劃、按需定制開發(fā)符合企業(yè)需求、帶有營銷價(jià)值的網(wǎng)絡(luò)建站方案認(rèn)真對待每一個(gè)客戶，我們不用口頭的語言來吹擂我們的優(yōu)秀，上1000+的成功案例見證著我們的成長。

網(wǎng)絡(luò)技術(shù)發(fā)展迅速，部分技術(shù)難以保持

每年都有新的工具出現(xiàn)，這同時(shí)也意味著許多舊的工具倒在了新技術(shù)的發(fā)展之路上。

前端開發(fā)占據(jù)了web很大一部分，而且也成為了一種職業(yè)路徑。如果你將前端開發(fā)當(dāng)做自己的又一新技術(shù)或者作為一個(gè)可發(fā)展事業(yè)，你需要為這個(gè)工作準(zhǔn)備合適的工具。

我將要分享我的十大現(xiàn)代必備的前端開發(fā)工具。它們都完全免費(fèi)而且大多數(shù)工具能幫助你建立令人驚嘆的網(wǎng)站。

1. Grid Guide

特性: 快速生成柵格

首先我要介紹的是Grid.Guide,一款免費(fèi)的網(wǎng)頁應(yīng)用，能讓你在線生成柵格。這個(gè)小巧的應(yīng)用能讓你通過自定義間距和列數(shù)建立你自己的柵格方案。

首先輸入你的網(wǎng)站的首選寬度和列數(shù)總數(shù)，然后Grid Guide就會(huì)生成一些選項(xiàng)供你選擇。

你甚至可以將每種柵格方案的下載為PNG圖片，用于導(dǎo)入Photoshop或Illustrator。這使你能更加輕松的創(chuàng)建柵格，而不必手動(dòng)計(jì)算或者依賴柵格庫。

2. Foundation

特性: 一款類似Bootstrap的框架

我不得不承認(rèn)大多數(shù)前端開發(fā)者更喜歡使用Bootstrap框架。但是在But Zurb的 Foundation最近全面更新之后，我認(rèn)為它值得受到大家的關(guān)注。

Foundation框架跟Bootstrap一樣，有為柵格、排版、按鈕和其它動(dòng)態(tài)元素的預(yù)定義CSS類。但是它的設(shè)計(jì)更加簡單，所以它不像一般的框架一樣，更加容易去自定義布局。

而且新的Foundation還有一個(gè)姐妹框架叫做Foundation for Email。這是一個(gè)專門為電子郵件界面開發(fā)而使用的框架。

這兩種Foundation框架都十分棒而且它們由Zurb的團(tuán)隊(duì)進(jìn)行維護(hù)更新。

3. CodePen

特性: 實(shí)現(xiàn)新創(chuàng)意代碼

大多數(shù)開發(fā)者都知道使用 cloud IDEs做前端開發(fā)十分輕便。通過它你可以在任何電腦上寫代碼，保存你的項(xiàng)目到云端上且分享。

但即使有這么多種選擇，我不得不說CodePen是最棒的。它啟動(dòng)迅速，十分可靠，易于啟動(dòng)且當(dāng)你改動(dòng)代碼時(shí)會(huì)自動(dòng)更新。

更不用說它還能支持幾乎所有你能想到的庫。你可以通過預(yù)置HTML模板語言例如Haml或Slim，使用LESS或SASS編譯代碼。而且CodePen允許你添加外部資源，因此你可以使用像cdnjs的網(wǎng)站去載入其他相關(guān)的庫。

無疑地這是最棒的專為寫代碼和實(shí)現(xiàn)新想法的開發(fā)工具。雖說也有一些類似的工具，但在我看來沒有比CodePen更好的了。

4. Unheap

特性: 最新的jQuery插件庫

去尋找一個(gè)在策劃列表中的最新JS插件是很困難的。大多數(shù)情況下你只能瀏覽Github上比較熱門的插件或在Twitter上查看一些熱門項(xiàng)目。

但是，有了例如 Unheap 等這類網(wǎng)站，你可以輕松快速的找到最新的jQuery插件。它們有導(dǎo)航、表單、網(wǎng)頁媒體和其他分類等各種類型的插件。

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

5. LivePage

特性: 自動(dòng)刷新瀏覽器

一些瀏覽器插件是你用于開發(fā)的最佳工具。LivePage 就是一種免費(fèi)的谷歌擴(kuò)展插件，能在你對本地文件做出修改后自動(dòng)刷新你的頁面。

這意味著你可以在本地編輯你的HTML/CSS/JS文件，而瀏覽器會(huì)在你每次保件時(shí)自動(dòng)刷新。通常你需要花費(fèi)一秒鐘去刷新，但這樣子操作許多次后你將會(huì)發(fā)現(xiàn)這有多么煩人。

LivePage在火狐上也有相同的插件叫做LiveReload。

6. Fullpage Screen Capture

特性: 捕獲全屏

我一直使用這個(gè)擴(kuò)展插件而且它是我設(shè)計(jì)布局時(shí)最喜歡用的工具之一。 Fullpage Screen Capture 可以讓你截取整個(gè)網(wǎng)頁并存為PNG圖片。

你只需簡單的點(diǎn)擊Chrome擴(kuò)展面板中的按鈕，它就會(huì)自動(dòng)創(chuàng)建整個(gè)網(wǎng)頁的完整快照，并將其拼接成一幅圖像。你可以用它來研究整體設(shè)計(jì)，這對你設(shè)計(jì)網(wǎng)站很有幫助。

7. WhatFont

特性: 在網(wǎng)絡(luò)上找到最棒的字體

排版對網(wǎng)頁設(shè)計(jì)而言是一個(gè)巨大的挑戰(zhàn)，而且并不是一件很容易的事。要找到合適的字體是很累人的，但是使用例如WhatFont 的擴(kuò)展插件，可以減輕你在搜索時(shí)的痛苦。

你只需添加WhatFont到你的谷歌瀏覽器，每當(dāng)你看到網(wǎng)頁上某一種字體時(shí)，點(diǎn)擊它并懸停，就會(huì)給你所有的包括字體樣式、大小等方案，甚至在可服務(wù)時(shí)給出下載地址（例如TypeKit或Webfonts）。

8. Node/npm

特性: 命令行

Node很顯然改變了web開發(fā)的面貌。它將JavaScript傳遞給后臺，并返回給我們npm，一種發(fā)展最迅速的包管理器。

這幾乎是必然的，并且是有著充分的理由。在當(dāng)前，所有的前端開發(fā)者都應(yīng)該學(xué)習(xí)命令行，因?yàn)楝F(xiàn)在這是一種在前端工作流中必要的工具。而且npm也是這個(gè)過程的一部分，它也完全由命令行管理。

你可以使用新的包，或升級舊的包。通過 npm scripts你也能了解到你還可以做什么。

如果你之前從未嘗試過npm，那么我強(qiáng)烈建議你開始涉足這一塊，看看它哪里令人驚嘆。

9. Mobile Speed Tester

特性: 手機(jī)監(jiān)測

谷歌懂得提供優(yōu)質(zhì)的用戶體驗(yàn)，他們總是嘗試幫助站長們建立更好的網(wǎng)站。谷歌的一個(gè)最佳的工具叫Mobile Speed Tester，能測試任何網(wǎng)站在電腦和手機(jī)上的響應(yīng)速度。

它同時(shí)衡量訪問速度和用戶體驗(yàn)，以此來判定該網(wǎng)站是否對手機(jī)友好。

它不會(huì)生成詳細(xì)的報(bào)告，也不足以成為usability testing的替代品。但這樣的一個(gè)免費(fèi)工具能給你好的反饋，讓你選擇更加正確的方法。

10. Responsive Test

特性: 測試站點(diǎn)響應(yīng)速度

最后但肯定同樣重要的是一個(gè)叫 Responsive Test的網(wǎng)頁應(yīng)用。這是一個(gè)發(fā)布在GitHub上的開源項(xiàng)目，可以讓你測試任何網(wǎng)站的在你的瀏覽器上的響應(yīng)是否正常。

您只需輸入一個(gè)URL并將窗口拖到您要測試的任何寬度。而且還有小按鈕可以切換為iPhone、iPad和通用電腦的預(yù)定義大小方案。

這里也有另外一種 由Matt Kersley開發(fā)的相似工具，但是它不能調(diào)節(jié)大小。相反的，你只能使用幾種預(yù)定義大小的窗口用于測試。

這兩個(gè)都是優(yōu)秀的工具，使用它們遠(yuǎn)比來回拖動(dòng)窗口要簡單得多。

到這里為止我的TOP10列表已經(jīng)結(jié)束了！我希望這個(gè)列表能被證實(shí)有用，同時(shí)我當(dāng)然也希望至少有一種在這列表上的工具能幫到大家。

由于前段開發(fā)發(fā)展十分迅速，所以你可以期望將來會(huì)有更多更厲害的工具出現(xiàn)。

如有疑問請留言或者到本站社區(qū)交流討論，感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！