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

Source: Internet
Author: User

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 ~~

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.