A collection of tools commonly used by WEB front end designers
- 2020-03-30 04:32:56
- OfStack
The following is my collation and collection of some front-end development commonly used plug-ins, tools, software, etc., for no other reason than to make a small backup of the computer, as for the use of the method, I will summarize later, at present, or their own Google.
[FireFox plugin]
1. Firefbug - Page mode tool
2. YSlow - Web rating tool
3. Pixel Perfect - Compare the HTML with the design
4. CSS Usage - CSS USES efficiency optimization tools
5. Page Speed - Quickly optimizing web pages is similar to YSlow
6. Measureit - Real-time measurement tool
7. Fiddler - Local style page style tool
8. DNS flusher - DNS refresh tool
9. Colorzilla - Real-time color selection tool
10. Web Developer - Check the page for information
11. FireMobileSimulator - Analog phones
12. JavaScript Dubugger - JavaScript debugging
13. Greasemonkey - Scripting applet
14. Firecookie - Cookie
[Chrome plugin]
1. Awesome Screenshot - Web page screenshots
2. The user-agent Switcher - Switch display device
3. Web Developer - Check the page for information
4. The Window Resizer - Change resolution
5. YSlow - Web rating tool
6. Browser compatibility detection
[front-end development of common url tools]
Web color matching
(link: http://www.peise.net/tools/web/)
(link: http://www.peise.net/tools/lilun/lilunxuexi.html)
(link: http://www.colorschemer.com/online.html)
(link: http://www.workwithcolor.com/hsl-color-picker-01.htm)
CSS 3 generator
(link: http://www.css3maker.com/)
(link: http://www.flickyard.in/autocss3/)
(link: http://www.colorzilla.com/gradient-editor/)
(link: http://css3pie.com/)
(link: http://www.css3.me/)
(link: http://ie.microsoft.com/testdrive/Graphics/CSSGradientBackgroundMaker/)
CSS3 button generator
(link: http://www.wordpressthemeshock.com/css-drop-shadow/)
(link: http://css3buttongenerator.com/)
CSS image synthesizer
(link: http://csssprites.com/)
(link: http://cn.spritegen.website-performance.org/)
CSS code review
(link: http://csslint.net/)
Ajax loading pictures
(link: http://ajaxload.info/)
(link: http://preloaders.net/)
Hack, table
(link: http://centricle.com/ref/css/filters/)
Browser market
(link: http://tongji.baidu.com/data/browser)
(link: http://css3test.com/)
(link: http://kimblim.dk/css-tests/selectors/)
(link: http://selectivizr.com/)
(link: http://www.findmebyip.com/litmus)
Detecting user experience
(link: http://gtmetrix.com/)
CSS template generator
(link: http://blog.html.it/layoutgala/)
(link: http://www.mycelly.com/)
(link: http://www.intensivstation.ch/en/templates/)
CSS compression
(link: http://www.csscompressor.com/)
CSS fonts
(link: http://cssfontstack.com/)
# (link: http://www.google.com/webfonts)
(link: http://www.dafont.com/)
Range of the Transform
(link: http://www.useragentman.com/IETransformsTranslator/)
CSS3 Bessel curve
(link: http://cubic-bezier.com/#.47,., 1, 73. 41)
YUI CSS grid tool
(link: http://developer.yahoo.com/yui/grids/builder/)
Javascript code optimization beautification
(link: http://js.clicki.cc/)
Code demo
(link: http://jsfiddle.net/)
(link: http://jsbin.com/#html, live)
(link: http://ikeepu.com/bar/20143449)
(link: http://codepad.org/)
Prototype drawing design tool
# (link: https://gomockingbird.com/mockingbird/)
(link: http://www.jotform.com/)
Local and commonly used software and IDE editor
1. MarkMan - Designer, front end engineer must have
2. VIM - Super fast editor
3. Adobe PhotoShop CS6 - Cut the figure is special
4. IE Tester - Check page compatibility
5. Fiddler2 - Inspection request
6. Beyond Commpar - The file is
7. GIT - Distributed version control
8. Opera Mobile Emulator - Mobile browser
9. SimpLESS - LESS
Having mastered most of these tools, congratulations, you are not far from being a good front-end designer