十款讓 Web 前端開發人員更輕鬆的實用工具

這篇文章介紹十款讓 Web 前端開發人員生活更輕鬆的實用工具。每一個Web開發人員都有本身的工具箱，這樣工做中碰到的每一個問題都有一個好的解決方案供選擇。

對於每一項工做，開發人員須要特定的輔助工具，因此若是下面這些工具對於你來講都是新的領域，那麼這篇文章是很是有用的，由於這些實用的工具將讓你的工做更有效率。

Spritepad

藉助 SpritePad，你能夠在幾分鐘甚至幾秒鐘內建立你的 CSS 精靈。只需拖放您的圖片，當即能夠生成 PNG 精靈圖片以及 CSS 代碼。不須要在 Photoshop 中操做，不須要編寫任何的 CSS 樣式。

 

Html5test

這個 HTML5 測試得分可以提示您正常使用的瀏覽器對於 HTML5 標準和相關規範的支持狀況的指標。

 

Spur

Spur 是一個有趣和簡單的方法來評判網頁設計的方式，你歷來沒有作過的事情。只貼上一個網址（或上傳圖片），你就可使用七種不一樣的工具來幫助你。

JPEG Mini

可以幫助你把 JPEG 格式照片的文件大小減少5倍，同時保持原有的品質和 JPEG 格式。

Site Validator

（web前端學習交流羣：328058344 禁止閒聊，非喜勿進！）

由W3C 官方驗證對你的網站完成驗證，這包括驗證你網站中的 HTML5 標記。

Codepen

CodePen 是一個在線的 HTML、CSS 和 JavaScript 代碼編輯器，可以編寫代碼並即時預覽效果。能夠用於在線展現的做品，也能夠看到其餘人在網頁中實現的各類使人驚奇的效果。

Brackets

Brackets 是一款開源的代碼編輯器，專門爲前端開發人員和設計師打造，它的核心目標是減小在開發過程當中那些效率低下的重複性工做，例如瀏覽器刷新，修改元素的樣式，搜索功能等等。

Codekit

CodeKit 幫助您更快更好地創建網站。網站右側的一分鐘預告片視頻將是一個良好的開始。

Patternizer

Patternizer 是一個在線工具，幫助您使用在線界面生成基於 CSS3 的條紋效果。

CSS3 Click Chart

116-600x297.png

CSS3點擊圖表是一個方便的CSS3屬性參考工具，演示 CSS3 特性的示例代碼以及瀏覽器支持狀況的詳細信息。