WEB前端設計師常用工具集錦_基礎知識

以下是我整理和收集的一些前端開發常用的插件、工具、軟體等不為別的，相當於給電腦做個小備份，至於使用方法，以後我會總結，目前的話還是自行google吧。

【FireFox外掛程式】

1.  Firefbug     ——    頁面調式工具

2.  YSlow     ——    網頁評等工具

3.  pixel Perfect      ——    HTML與設計稿對照

4.  CSS Usage     ——    CSS使用效率最佳化工具

5.  Page Speed     ——    快速最佳化網頁類似YSlow

6.  Measureit     ——    即時測量工具

7.  Fiddler     ——    本地調式頁面樣式利器

8.  DNS flusher     ——    DNS刷新工具

9.  Colorzilla     ——    即時色彩選取工具

10.  Web Developer     ——    檢查網頁上的相關資訊

11.  FireMobileSimulator     －    類比手機

12.  JavaScript Dubugger     ——    JavaScript 排錯

13.  Greasemonkey     ——    腳本小程式

14.  Firecookie     ——    Cookie

【Chrome外掛】

1.  Awesome Screenshot     ——    網頁截圖

2.  user-Agent Switcher     ——    切換顯示設備

3.  web Developer     ——    檢視網頁的相關資訊

4.  Window Resizer     ——    改變解析度

5.  YSlow     ——    網頁評等工具

6.  瀏覽器相容性偵測

【前端開發常用網址工具】

web色彩搭配

http://www.peise.net/tools/web/

http://www.peise.net/tools/lilun/lilunxuexi.html

http://www.colorschemer.com/online.html

http://www.workwithcolor.com/hsl-color-picker-01.htm

CSS3 生成器

http://www.css3maker.com/

http://www.flickyard.in/autocss3/

http://www.colorzilla.com/gradient-editor/

http://css3pie.com/

http://www.css3.me/

http://ie.microsoft.com/testdrive/Graphics/CSSGradientBackgroundMaker/

CSS3 按鈕產生器

http://www.wordpressthemeshock.com/css-drop-shadow/

http://css3buttongenerator.com/

CSS 圖片合成器

http://csssprites.com/

http://cn.spritegen.website-performance.org/

CSS代碼檢查

http://csslint.net/

ajax loading圖片

http://ajaxload.info/

http://preloaders.net/

CSS hack表

http://centricle.com/ref/css/filters/

瀏覽器市場

http://tongji.baidu.com/data/browser

測試瀏覽器支援CSS3情況

http://css3test.com/

http://kimblim.dk/css-tests/selectors/

http://selectivizr.com/

http://www.findmebyip.com/litmus

偵測使用者體驗

http://gtmetrix.com/

CSS模板產生器

http://blog.html.it/layoutgala/

http://www.mycelly.com/

http://www.intensivstation.ch/en/templates/

CSS壓縮

http://www.csscompressor.com/

CSS常用字體

http://cssfontstack.com/

http://www.google.com/webfonts#

http://www.dafont.com/

CSS3 Transform

http://www.useragentman.com/IETransformsTranslator/

CSS3 貝塞爾曲線

http://cubic-bezier.com/#.47,.73,1,.41

YUI CSS grid工具

http://developer.yahoo.com/yui/grids/builder/

JavaScrip程式碼優化美化

http://js.clicki.cc/

程式碼示範

http://jsfiddle.net/

http://jsbin.com/#html,live

http://ikeepu.com/bar/20143449

http://codepad.org/

原型圖設計工具

https://gomockingbird.com/mockingbird/#

http://www.jotform.com/

【本地及常用軟體及IDE編輯器】

1.  MarkMan     －    設計師，前端工程師必備

2.  VIM     ——    超快速的編輯器

3.  Adob​​​​e PhotoShop CS6     ——    切圖專用

4.  IE Tester     ——    檢查頁面相容

5.  Fiddler2     ——    偵測請求

6.  Beyond Commpar     ——    文件比較

7.  GIT     ——    分散式版本控制

8.  Opera Mobile Emulator     －    手機瀏覽器

9.  SimpLESS     ——    LESS

掌握了以上這些工具中的大部分，恭喜您，離一個優秀的前端設計師不遠了~~