前端經常使用工具整理

下面是我整理和收集的一些前端開發經常使用的 插件、工具、軟件等不爲別的，至關於給電腦作個小備份，至於使用方法，之後我會總結，目前的話仍是自行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.  Adobe PhotoShop CS6     ——    切圖專用

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

5.  Fiddler2     ——    檢測請求

6.  Beyond Commpar     ——    文件比較

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

8.  Opera Mobile Emulator     ——    手機瀏覽器

9.  SimpLESS     ——    LESS

 

寫了這麼有關於前端的，也有不是前端，總結一下，不按期更新一下，若是你們有比上面更好的推薦，請你們及時告訴我。