En tant qu’être humains nous cherchons toujours à simplifier les tâches qui composent notre quotidien. En tant que développeur / intégrateur web, c’est pareil ! De superbes outils peuvent vous faire gagner un temps précieux. Petite présentation de 4 plugins indispensables.

Firebug : la référence ultime pour les développeurs / intégrateurs

Firebug vous permet de naviguer au sein du code source des pages que vous consultez. Bien entendu il ne s’agit que du code source généré, vous n’aurez pas accès aux fonctions PHP ou aux s, non, Firebug s’occupe uniquement du HTML / JS / CSS, et c’est déjà très bien comme ça !
Cette extension à fait sa réputation dans le monde du développement web car elle est tout simplement ultra complète. On peut inspecter les éléments qui composent la page un par un, modifier le code source en direct, analyser les scripts ou les styles appelés par la page…Petit résumé des fonctionnalités :
- Débug JavaScript
- Aperçu direct des erreurs dans la page
- Console qui montre les erreurs JavaScript et CSS,
- Messages d’alerte JavaScript directement dans la console
- Une ligne de commande JavaScript pour envoyer des instructions
- Un outil d’analyse du trafic de paquets avec XMLHttpRequest
- Accès aux évènements DOM

WebDevelopperToolbar : l’outil d’appoint idéal

Après avoir installé cette extension, vous remarquerez qu’une nouvelle barre est apparue dans Firefox, juste en dessous la barre d’URL et juste au dessus de votre barre de marque-pages. Cette barre vous permettra alors d’accéder aux boutons suivants :
- Disable, pour désactiver le cache, désactiver le JavaScript ou encore les referers
- Cookies, pour activer/désactiver/supprimer/ajouter des cookies
- Css, pour afficher le Css ou désactiver certaines feuilles de style
- Forms, pour convertir GET vers POST ou inversement, et afficher les infos du formulaire
- Images, pour afficher/masquer les images de fond ou les images en dur, révéler les descriptions alternatives ou encore connaître en un clic le répertoire des images
- Information, pour afficher diverses infos sur les éléments (vous survolez un élément, une div ou image ou autre, et au clic vous obtenez la hauteur/largeur ainsi que les classes qui sont appliquées à cette balise)…Ce bouton Information permet également d’afficher toutes les infos liées au document
- Miscellaneous, pour afficher les commentaires, vider le cache ou effacer les données enregistrées, etc..
- Outline, pour faire ressortir certains éléments uniquement (juste les liens ou juste les H2…)
- Resize, pour redimensionner la taille de la fenête, très pratique pour tester les résolutions
- Tools, pour valider le HTML/CSS auprès du W3C ou encore lancer l’inspecteur de DOM
- View source, pour afficher la source originale ou la source générée, ou encore modifier la source à l’aide d’un éditeur externe (Dreamweaver par exemple…)
- Options, pour configurer votre barre WebDeveloperToolbar comme bon vous semble

ColorZilla, la pipette à sites web

ColorZilla, une fois installé, vient se loger dans une petite icône en bas à gauche de votre navigateur. Un clic sur le bouton déclenche l’apparition d’un curseur « pipette », qui vous permettra de prélever n’importe quelle couleur utilisée sur le site. Pratique voire indispensable pour ne pas passer par une impression d’écran ou par un quelconque freeware externe. ColorZilla vous donnera la couleur survolée au format RGB et Hexadécimal.

MeasureIt, la règle embarquée

Combien de fois avez-vous positionné un élément au hasard ? Dans le genre « tiens, je vais essayer 120 pixels à gauche….Ah non plutôt 135…..Ah non c’était plutôt 127 !! ». D’une manière plus générale MeasureIt vous permettra de vérifier les dimensions de vos diférents éléments et mieux vérifier vos marges. Ne vous embêtez plus à calculer vos positions ou à placer les éléments « au pif », utilisez MeasureIt pour afficher une règle sur votre navigateur ! Qu’il s’agisse de pixels ou de centimètres, MeasureIt deviendra l’un de vos plugins favoris dans l’intégration de pages web.

Pour plus d’extensions Firefox, c’est par ici
Illustration : Coalbiter, Deviantart