Collection d'outils couramment utilisés pour les concepteurs WEB front-end_Connaissances de base

Voici quelques plug-ins, outils, logiciels, etc. couramment utilisés que j'ai compilés et collectés pour le développement front-end. Ils équivalent à faire une petite sauvegarde pour votre ordinateur. les résumera à l'avenir. Pour l'instant, vous pouvez simplement les rechercher vous-même sur Google.

【Plug-in FireFox】

1. Firefbug —— Outil de débogage de pages

2. YSlow —— Outil d'évaluation des pages Web

3. Pixel Perfect —— Comparaison entre HTML et brouillon de conception

4. Utilisation CSS —— Outil d'optimisation de l'efficacité de l'utilisation CSS

5. Vitesse de la page —— Optimisez rapidement les pages Web similaires à YSlow

6. Measureit —— Outil de mesure en temps réel

7. Fiddler —— Un outil puissant pour l'ajustement local des styles de page

8. DNS flusher —— Outil d'actualisation DNS

9. Colorzilla —— Outil de sélection des couleurs en temps réel

10. Développeur Web —— Vérifiez les informations pertinentes de la page Web

11. FireMobileSimulator —— Simuler un téléphone mobile

12. Dubugger JavaScript —— Dépannage JavaScript

13. Greasemonkey —— Applet de script

14. Firecookie —— Cookie

【Plug-in Chrome】

1. Capture d'écran impressionnante —— Capture d'écran de la page Web

2. Commutateur utilisateur-agent —— Changer de périphérique d'affichage

3. Développeur Web —— Vérifiez les informations pertinentes de la page Web

4. Redimensionneur de fenêtre —— Changer la résolution

5. YSlow —— Outil d'évaluation des pages Web

6. Détection de compatibilité du navigateur

[Outils d'URL couramment utilisés pour le développement front-end]

Correspondance des couleurs 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

Générateur 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/

Générateur de boutons CSS3

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

http://css3buttongenerator.com/

Compositeur d'images CSS

http://csssprites.com/

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

Inspection du code CSS

http://csslint.net/

Ajax chargeant l'image

http://ajaxload.info/

http://preloaders.net/

Tableau de piratage CSS

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

Marché des navigateurs

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

Tester la prise en charge du navigateur pour CSS3

http://css3test.com/

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

http://selectivizr.com/

http://www.findmebyip.com/litmus

Détecter l'expérience utilisateur

http://gtmetrix.com/

Générateur de modèles CSS

http://blog.html.it/layoutgala/

http://www.mycelly.com/

http://www.intensivstation.ch/fr/templates/

Compression CSS

http://www.csscompressor.com/

Polices CSS courantes

http://cssfontstack.com/

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

http://www.dafont.com/

Transformation CSS3

http://www.useragentman.com/IETransformsTranslator/

Courbe de Bézier CSS3

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

Outil de grille CSS YUI

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

Optimisation et embellissement du code JavaScript

http://js.clicki.cc/

Démo de code

http://jsfiddle.net/

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

http://ikeepu.com/bar/20143449

http://codepad.org/

Outil de conception de prototypes

https://gomockingbird.com/mockingbird/#

http://www.jotform.com/

[Logiciels et éditeurs IDE locaux et couramment utilisés]

1. MarkMan —— Designer, un incontournable pour les ingénieurs front-end

2. VIM —— Éditeur super rapide

3. Adobe PhotoShop CS6 —— Exclusivement pour la découpe d'images

4. Testeur IE —— Vérifiez la compatibilité des pages

5. Fiddler2 —— Demande de détection

6. Au-delà de Commpar —— Comparaison de fichiers

7. GIT —— Contrôle de version distribué

8. Émulateur mobile Opera —— Navigateur mobile

9. SimpleMOINS —— MOINS

Félicitations pour la maîtrise de la plupart des outils ci-dessus, vous n'êtes pas loin de devenir un excellent front-end designer~~