WEB前端設(shè)計(jì)師常用工具集錦_基礎(chǔ)知識(shí)

【FireFox插件】

1. Firefbug —— 頁(yè)面調(diào)式工具

2. YSlow —— 網(wǎng)頁(yè)評(píng)級(jí)工具

3. pixel Perfect —— HTML與設(shè)計(jì)稿對(duì)比

4. CSS Usage —— CSS使用效率優(yōu)化工具

5. Page Speed —— 快速優(yōu)化網(wǎng)頁(yè)類似于YSlow

6. Measureit —— 實(shí)時(shí)測(cè)量工具

7. Fiddler —— 本地調(diào)式頁(yè)面樣式利器

8. DNS flusher —— DNS刷新工具

9. Colorzilla —— 實(shí)時(shí)顏色選取工具

10. Web Developer —— 檢查網(wǎng)頁(yè)的相關(guān)信息

11. FireMobileSimulator —— 模擬手機(jī)

12. JavaScript Dubugger —— JavaScript 排錯(cuò)

13. Greasemonkey —— 腳本小程序

14. Firecookie —— Cookie

【Chrome插件】

1. Awesome Screenshot —— 網(wǎng)頁(yè)截圖

2. user-Agent Switcher —— 切換顯示設(shè)備

3. web Developer —— 檢查網(wǎng)頁(yè)的相關(guān)信息

4. Window Resizer —— 更改分辨率

5. YSlow —— 網(wǎng)頁(yè)評(píng)級(jí)工具

6. 瀏覽器兼容性檢測(cè)

【前端開發(fā)常用網(wǎng)址工具】

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/

瀏覽器市場(chǎng)

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

測(cè)試瀏覽器支持CSS3情況

http://css3test.com/

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

http://selectivizr.com/

http://www.findmebyip.com/litmus

檢測(cè)用戶體驗(yàn)

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代碼優(yōu)化美化

https://js.clicki.cc/

代碼演示

http://jsfiddle.net/

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

http://ikeepu.com/bar/20143449

http://codepad.org/

原型圖設(shè)計(jì)工具

https://gomockingbird.com/mockingbird/#

http://www.jotform.com/

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

1. MarkMan —— 設(shè)計(jì)師，前端工程師必備

2. VIM —— 超快的編輯器

3. Adobe PhotoShop CS6 —— 切圖專用

4. IE Tester —— 檢查頁(yè)面兼容

5. Fiddler2 —— 檢測(cè)請(qǐng)求

6. Beyond Commpar —— 文件比較

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

8. Opera Mobile Emulator —— 手機(jī)瀏覽器

9. SimpLESS —— LESS

掌握了以上這些工具中的大部分，恭喜您，離一個(gè)優(yōu)秀的前端設(shè)計(jì)師不遠(yuǎn)了~~

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com