Collection of commonly used tools for WEB front-end designers_Basic knowledge

The following are some commonly used plug-ins, tools, software, etc. that I compiled and collected for front-end development. They are equivalent to making a small backup for your computer. As for how to use them, I will summarize them in the future. For now, you can just google them yourself. .

【FireFox plug-in】

1. Firefbug —— Page debugging tool

2. YSlow —— Web page rating tool

3. Pixel Perfect —— Comparison between HTML and design draft

4. CSS Usage —— CSS usage efficiency optimization tool

5. Page Speed ​​—— Quickly optimize web pages similar to YSlow

6. Measureit —— Real-time measurement tool

7. Fiddler —— A powerful tool for local adjustment of page styles

8. DNS flusher —— DNS refresh tool

9. Colorzilla —— Real-time color selection tool

10. Web Developer —— Check the relevant information of the web page

11. FireMobileSimulator —— Simulate mobile phone

12. JavaScript Dubugger —— JavaScript Troubleshooting

13. Greasemonkey —— Script applet

14. Firecookie —— Cookie

【Chrome plug-in】

1. Awesome Screenshot —— Web page screenshot

2. user-Agent Switcher —— Switch display device

3. web Developer —— Check the relevant information of the web page

4. Window Resizer —— Change resolution

5. YSlow —— Web page rating tool

6. Browser compatibility detection

[Commonly used URL 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 Composer

http://csssprites.com/

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

CSS code inspection

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 browser support for CSS3

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 Generator

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 Bezier Curve

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

YUI CSS grid tool

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

JavaScript 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 tool

https://gomockingbird.com/mockingbird/#

http://www.jotform.com/

[Local and commonly used software and IDE editors]

1. MarkMan —— Designer, a must for front-end engineers

2. VIM —— Super fast editor

3. Adobe PhotoShop CS6 —— Exclusively for image cutting

4. IE Tester —— Check page compatibility

5. Fiddler2 —— Detection request

6. Beyond Commpar —— File comparison

7. GIT —— Distributed version control

8. Opera Mobile Emulator —— Mobile browser

9. SimpLESS —— LESS

Congratulations on mastering most of the above tools, you are not far from becoming an excellent front-end designer~~