Les copines du développeur

Bon allez, on passe aux choses sérieuses.

Les marque-pages, les téléchargements, tout ça c'est sympa m'enfin ça casse pas 3 pattes à un canard. Alors abordons cette fois un sujet autrement plus intéressant. Et qui me concerne de près qui plus est.

Parfois, quand on est développeur Web, la vie peut être dure. Voilà de quoi vous filer un petit coup de main. Toutes ces extensions sont fort utiles et j'en use et abuse quotidiennement : c'est du bon, mangez-en !

Lire la partie 1 (Firefox++) ; Lire la partie 2 (Navigation) ; Lire la partie 3 (Marque-pages) ; Lire la partie 4 (Téléchargements)

• Aardvark

Permet de manipuler de différentes manières tous les éléments d'une page Web. Utile par exemple supprimer des blocs avant d'imprimer la page ou simplement pour analyser l'imbrication des blocs de la page.

Téléchargement : https://addons.mozilla.org/fr/firefox/addon/4111

Configuration : Rien à faire.

Utilisation : Clic droit sur la page > "Start Aardvark". Le bloc de la page pointé par la souris est encadré de rouge. En bas à gauche du cadre, sont inscrits l'id, la classe et les attributs de style du bloc. Appuyer sur "H" pour voir la liste des commandes disponibles.

• ColorZilla

Donne accès à une palette faisant la correspondance entre codes décimal, héxadécimal, rgb... pour une couleur.

Offre aussi une pipette permettant de connaître les différents codes de la couleur de n'importe quel pixel de la page. Permet également de zoomer jusqu'à x10 pour éventuellement viser un pixel en particulier sans se tromper.

Propose enfin une copie rapide du code d'une couleur dans le presse-papier, sous plusieurs formes possibles. Super pratique.

Téléchargement : https://addons.mozilla.org/fr/firefox/addon/271

Configuration : Clic droit sur l'icône à gauche dans la barre d'état, "Options".

Utilisation :

Clic gauche sur l'icône, parcourir la page avec la souris pour voir défiler les codes des couleurs dans la barre d'état. Cliquer sur un pixel de la page pour fixer ses codes dans la barre. Puis clic droit sur l'icône et possibilité de copier un ou plusieurs des codes précédemment enregistrés.

Clic droit aussi pour avoir la palette ou le zoom.

• Firebug

Permet de visualiser, contrôler, debugger et modifier en direct les CSS, HTML, XML, JS...

Téléchargement : https://addons.mozilla.org/fr/firefox/addon/1843

Configuration : Rien à faire.

Utilisation :

Cliquer sur l'icône la plus à droite dans la barre d'état pour ouvrir la console de Firebug.

Cliquer sur "Inspect" puis balader la souris sur la page permet de voir à quelle portion de code correspond quel bloc affiché. A gauche, le type du bloc avec classe et identifiant, à droite les propriétés CSS de cet élément (propriétés propres et héritées). Cliquer à nouveau sur "Inspect" pour sortir de ce mode. De même, pointer sur différents éléments du code les met en valeur dans l'affichage de la page pour voir où ils se trouvent.

L'onglet CSS permet de manipuler... les CSS, bien joué. Juste au-dessus du nom de l'onglet, vous pouvez choisir la feuille de style avec laquelle vous voulez vous amuser. Il est possible de désactiver des attributs, de les modifier, d'en rajouter... et de voir directement le rendu à l'affichage.

Dans l'onglet Script vous pouvez aussi choisir le fichier de script à charger. Il est ensuite possible d'exécuter le code en fixant des points d'arrêt, fort utile pour debugger.

Il y a aussi un explorateur DOM et encore pas mal d'autres possibilités à découvrir !

• Html Validator

Cette extension permet de vérifier la validité des pages par rapport aux normes W3C sans perdre du temps en passant par le validateur officiel en ligne, très appréciable lors de la phase de développement.

Téléchargement : https://addons.mozilla.org/fr/firefox/addon/249

Configuration : Vous pouvez choisir l'algorithme qui vérifiera la validité des pages, ainsi que le niveau d'accessibilité auquel se conformer. Le reste des options peut être laissé par défaut.

Utilisation :

L'icône à droite dans la barre d'état indique si la page est valide ou si elle comporte des avertissements ou des erreurs. Pointez dessus pour plus de détails. Double cliquez dessus pour voir le code source de la page en cours, le détail des problèmes et les suggestions de correction.

A partir de cette fenêtre avec le source, vous pouvez valider la page avec le validateur officiel W3C ("Html Validator" > "W3C Online Validation") ou re-formater le code ("Html Validator" > "Clean up the page"). Cette dernière opération utilise quelques paramètres sur lesquels vous pouvez agir et présente le code et le rendu avant/après en temps réel.

• IE Tab

J'ai déjà mentionné cette extension dans la partie "Navigation" mais il est impossible de ne pas en parler ici également.

Cette extension est réservée aux utilisateurs Windows et permet d'utiliser le moteur de rendu d'Internet Explorer dans Firefox. Elle utilise la version d'IE installée sur votre ordinateur et ne comporte évidemment pas son propre moteur de rendu (puisque ultra propriétaire Microsoft). Cela veut aussi dire que si vous avez IE6, ne soyez pas étonnés de vois les PNG mal supportés en ouvrant une page avec IE Tab (1 exemple parmi des milliers)...

Dans la partie "Navigation", le point principal était de dire que certains sites ont été conçus spécifiquement pour IE. Ils sont alors illisibles sous Firefox. IE Tab permet changer de moteur de rendu sans avoir à ouvrir IE. Ici, dans cet article destiné aux développeurs Web, l'intérêt est plutôt de signaler que vous pourrez tester vos sites Web avec IE mais sous Firefox.

Pour les utilisateurs Linux, vous pouvez vous référer à cet article de Fred qui vous y explique comment installer IEs4Linux.

Téléchargement : https://addons.mozilla.org/fr/firefox/addon/1419

Configuration : Vous pouvez indiquer les sites qui seront toujours lus avec le moteur de rendu d'IE ainsi que l'intégration de l'extension dans l'interface de Firefox.

Utilisation : Clic droit sur l'onglet > "Changer de moteur web" pour rester dans Firefox et utiliser le moteur d'IE ou "Ouvrir via le programme externe de IE Tab" pour lancer IE.

• View Source Chart

Remplace l'affichage de base du code source d'une page. Indente correctement le code et en distingue les différentes parties dans des blocs de couleurs différentes. Très pratique pour éviter les problèmes de lecture d'un code mal formaté.

Téléchargement : https://addons.mozilla.org/fr/firefox/addon/655

Configuration : Rien à faire.

Utilisation : Clic droit sur la page, "View Source Chart". Cliquer sur un bloc du code pour l'afficher ou le masquer.

• Web Developer

Installe une barre d'outils comportant un nombre impressionnant d'outils. Un pur bonheur, indispensable !

Téléchargement : https://addons.mozilla.org/fr/firefox/addon/60 (anglais) ou http://joliclic.free.fr/mozilla/webdeveloper/ (français)

Configuration : Réglez l'interface de l'extension dans le menu "Général" des options. Le reste peut être laissé par défaut mais ça ne vous empêche pas d'y jeter un oeil pour voir ce qui est réglable.

Utilisation :

Baladez-vous dans les menus de la barre pour voir les trèèèès nombreuses possibilités qu'elle offre. Vous pouvez bloquer le JavaScript, les cookies, les styles CSS (pour vérifier que votre site reste lisible), afficher des tonnes d'infos sur la page en cours, redimensionner la fenêtre du navigateur pour vérifier la compatibilité des pages avec différentes résolutions... Il y en a trop, comme ça tout le monde est sûr de trouver ce dont il a besoin !

Fin de la cinquième partie

Je crois que cet article était ma motivation principale pour écrire la série dont il fait partie. Quel plaisir de développer sous Firefox avec tous ces outils... Il fallait vraiment que je clame haut et fort les noms de ces extensions, des fois qu'elles puissent aussi apporter un petit rayon de soleil dans le ciel gris et terne des journées d'autres développeurs ^^.

Bref, la prochaine fois on clôturera cette série d'articles en parlant des extensions qui n'ont rien à voir avec le rôle d'un navigateur Web...