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

對于每一項工作，開發人員需要特定的輔助工具，所以如果下面這些工具對于你來說都是新的領域，那么這篇文章是非常有用的，因為這些實用的工具將讓你的工作更有效率。

神器推薦：
《讓網頁舞動起來！25個免費的視差滾動插件》
《高端干貨！PHOTOSHOP實用腳本大合集》
《一行代碼都不寫！完成簡單網頁的設計上傳發布》

Spritepad

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

Html5test

這個 HTML5 測試得分能夠提示您正常使用的瀏覽器對于?HTML5標準和相關規范的支持情況的指標。

Spur

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

JPEG Mini

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

Site Validator

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

Codepen

CodePen 是一個在線的 HTML、CSS 和JavaScript代碼編輯器，能夠編寫代碼并即時預覽效果。可以用于在線展示的作品，也可以看到其他人在網頁中實現的各種令人驚奇的效果。

Brackets

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

Codekit

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

Patternizer

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

CSS3 Click Chart

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

原文地址：cnblogs

 
================關于優設網================
"優設網uisdc.com"是一個分享網頁設計、無線端設計以及PS教程的干貨網站。
【特色推薦】
PS禮儀手冊：網頁設計師必須修煉的內功技法，更是不可或缺的WEB設計指南http://hao.uisdc.com/ps/。
設計微博：擁有粉絲量62萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com
———————————————————–
想在手機上、被窩里獲取設計教程、經驗分享和各種意想不到的"福利"嗎？
添加 優秀網頁設計 微信號：【youshege】優設哥的全拼
您也可以通過掃描下方二維碼快速添加：