in

Créez le profil de développement Web ultime de Firefox

Lorsqu’il est correctement configuré, Firefox peut devenir l’outil ultime de développement Web, vous donnant un accès direct à la page sur laquelle vous travaillez afin que vous puissiez styliser votre page en temps réel, déboguer du javascript ou même modifier le html.

Créer un profil distinct pour le développement Web

L’installation de tous ces outils de développement fera de Firefox un navigateur très lourd, nous devons donc d’abord créer un nouveau profil pour Firefox.

Vous pouvez lancer un profil distinct en même temps que votre profil régulier en créant un nouveau raccourci avec ces arguments, en remplaçant WebDev par le nom de votre profil. Il existe également une explication plus détaillée sur la façon de procéder.

firefox.exe -P WebDev -no-remote

Maintenant que Firefox est configuré avec un profil distinct uniquement pour le développement Web, examinons les extensions que nous pouvons utiliser pour faire de Firefox l’outil de développement Web ultime.

Extensions de développement Web indispensables

Ce sont toutes des extensions que j’utilise régulièrement pour le développement Web.

Pyromane

Firebug est l’extension la plus puissante pour déboguer javascript, afficher CSS et html. Vous pouvez apporter des modifications dynamiques au code et CSS, et l’utiliser pour déboguer votre code Ajax. C’est vraiment la meilleure extension qui soit.

Extension de développeur Web

Une des meilleures extensions depuis x années consécutives. C’est un must pour tout développeur, mais vous en avez déjà entendu parler.

Extension Aardvark

Cette extension est une extension très légère qui vous montrera facilement les éléments de la page et leur classe / identifiant attribué. Il est plus simple à utiliser que l’extension de développeur Web pour les moments où vous avez juste besoin des informations rapides pour un élément. Vous pouvez également l’utiliser pour supprimer des éléments de la page.

Colorzilla

Sélectionnez facilement les couleurs. Plus besoin de trouver des couleurs intégrées quelque part dans une feuille de style.

Afficher la source avec

Vous pouvez configurer plusieurs profils de source de vue pour ouvrir la source dans différentes applications.

Validateur HTML

Cette extension vous permet de valider facilement le code HTML de votre page et de l’installer dans le panneau Afficher la source.

Mécano

Ce n’est pas exactement une extension de développeur Web, mais Greasemonkey est génial, notamment pour sa capacité à automatiser les actions courantes, ce qui permet aux développeurs Web de gagner du temps.

Mesure le

Mesurez facilement une distance sur l’écran avec cette extension. Une fois que vous avez mesuré une zone, vous pouvez faire glisser le rectangle autour de l’écran pour l’utiliser comme comparaison.

Vue IE / Onglet IE / OperaView / FirefoxView / Vue Safari / IE View Lite

Ces extensions (faites votre choix) vous permettent de visualiser facilement la page actuelle dans différents navigateurs. IE Tab vous permettra même d’exécuter IE à l’intérieur d’un onglet, si vous étiez si enclin.

Bouton Effacer le cache

Efface le cache. Particulièrement utile pour vérifier les nouvelles modifications CSS.

Redémarrez Firefox

L’extension Restart Firefox est très utile pour fermer et redémarrer Firefox avec tous les onglets et sessions intacts.

Tab Mix Plus

L’extension Tab Mix Plus est une excellente extension en général, mais possède quelques fonctionnalités essentiellement utiles pour les développeurs Web: Dupliquer l’onglet et Copier l’URL de l’onglet.

YSlow

L’extension YSlow est une nouvelle extension de Yahoo qui analysera votre page et vous indiquera où vous faites des erreurs. Cela vous donnera même une note sur les performances de votre site. Vous remarquerez la petite jauge dans le coin inférieur droit… elle vous indique la taille totale de votre page ainsi que le temps de chargement. Extension très utile, mais elle nécessite l’extension Firebug.

Lorem Ipsum factice

L’extension du générateur Dummy Lipsum générera pour vous un contenu factice basé sur le célèbre texte Lorem Ipsum qui est très utile pour mettre en page du faux contenu sur votre site.

Capture d’écran!

L’extension Screengrab vous permettra de prendre des captures d’écran de pages, mais peut faire quelque chose qu’un outil de capture d’écran ordinaire ne peut pas – elle peut prendre une image de la page entière, pas seulement de la partie visible.

Il existe des tonnes d’autres extensions que vous pouvez utiliser, mais ce sont les meilleures des meilleures de tout ce que j’ai vu. Si vous avez une autre extension que vous utilisez régulièrement, laissez une mention dans les commentaires.

À ce stade, vous avez maintenant transformé Firefox en l’outil de développement Web ultime. Prenez le temps d’apprendre à utiliser Firebug en particulier.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Utiliser Pandora dans Boxee

Utiliser Pandora dans Boxee

Ajouter Zune Desktop Player à Windows 7 Media Center

Ajouter Zune Desktop Player à Windows 7 Media Center