Collection of common WEB Front-end designer tools and common web Front-end tools

Collection of common WEB Front-end designer tools and common web Front-end tools

Below are some front-end plug-ins, tools, software, and other commonly used plug-ins that I have compiled and collected. They are equivalent to making a small backup for the computer. As for the usage method, I will summarize them later, google now.

FireFox Plugin]

1. Firefbug-page tuning Tool

2. YSlow-web page Rating Tool

3. pixel Perfect-comparison between HTML and design draft

4. CSS Usage-CSS efficiency optimization tool

5. Page Speed -- quickly optimize a webpage similar to YSlow

6. Measureit-real-time measurement tool

7. Fiddler-a powerful tool for local page style Adjustment

8. DNS flusher-DNS refresh Tool

9. Colorzilla-real-time color selection tool

10. Web Developer -- check webpage Information

11. FireMobileSimulator-analog mobile phone

12. JavaScript Dubugger -- JavaScript troubleshooting

13. Greasemonkey -- script Applet

14. Firecookie-Cookie

[Chrome plugin]

1. Awesome Screenshot -- webpage

2. user-Agent Switcher -- switch the Display Device

3. web Developer -- check webpage Information

4. Window Resizer -- change resolution

5. YSlow-web page Rating Tool

6. browser compatibility Detection

[Common web site tools for front-end development]

Web Color Matching

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 Generator

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 button Generator

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

Http://css3buttongenerator.com/

CSS image Synthesizer

Http://csssprites.com/

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

CSS code check

Http://csslint.net/

Ajax loading Image

Http://ajaxload.info/

Http://preloaders.net/

CSS hack table

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

Browser market

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

Test the support for CSS3 in browsers

Http://css3test.com/

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

Http://selectivizr.com/

Http://www.findmebyip.com/litmus

Detect User Experience

Http://gtmetrix.com/

CSS template Builder

Http://blog.html.it/layoutgala/

Http://www.mycelly.com/

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

CSS Compression

Http://www.csscompressor.com/

Common CSS Fonts

Http://cssfontstack.com/

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

Http://www.dafont.com/

CSS3 Transform

Http://www.useragentman.com/IETransformsTranslator/

CSS3 besell Curve

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

Yui css grid tool

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

JavaScrip code optimization and beautification

Http://js.clicki.cc/

Code demo

Http://jsfiddle.net/

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

Http://ikeepu.com/bar/20143449

Http://codepad.org/

Prototype Design Tools

Https://gomockingbird.com/mockingbird /#

Http://www.jotform.com/

[Local and common software and IDE Editor]

1. MarkMan-a must-have for designers and front-end engineers

2. VIM-ultra-fast Editor

3. Adobe PhotoShop CS6-dedicated for cropping Images

4. IE Tester -- check page compatibility

5. Fiddler2 -- Request Detection

6. Beyond comatrix-file comparison

7. GIT-distributed version control

8. Opera Mobile Emulator-Mobile browser

9. SimpLESS -- LESS

I have mastered most of the above tools. Congratulations, it's not far from a good front-end designer ~~