前端常用工具整理

Web開發者發表於2013-02-06

下面是我整理和收集的一些前端開發常用的 外掛、工具、軟體等不為別的,相當於給電腦做個小備份,至於使用方法,以後我會總結,目前的話還是自行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

寫了這麼有關於前端的,也有不是前端,總結一下,不定期更新一下,如果大家有比上面更好的推薦,請大家及時告訴我。

相關文章