Christophe Le Bot

Pratique de la conception numérique

Extensions Firefox pour le développement et les tests

Page mise à jour le 15 avril 2009.

Pour tester l’interface d’une application web, le navigateur est certainement l’outil le plus utile pour le développeur. Et quand je dis « le navigateur », je devrais dire « les navigateurs », tant le comportement de chacun d’eux est différent. Certains diront que ce n’est pas un outil de développement et qu’il n’offre pas les fonctions pour analyser finement le résultat des tests.

Mais la situation évolue très vite, grâce à Firefox et à quelques extensions qui deviennent vite indispensables. Avec comme résultat, un gain de productivité énorme !

Showcase

Showcase

Showcase n’est pas une extension pour développeur mais l’installer facilite grandement la manipulation des fenêtres et des onglets de Firefox. En effet, elle affiche des vignettes de toutes les pages ouvertes, ce qui évite de jongler avec les touches Alt+Tab et Ctrl+Tab du clavier. Vous avez trouver la bonne page ? Il suffit de cliquer dessus pour la placer en avant.

C’est simple, rapide et efficace.

Web Developer

Web Developer

Web Developer ajoute une barre d’outils à Firefox pour obtenir de nombreuses informations sur la page en cours et en manipuler le contenu. Parmi ses fonctions, on peut citer :

  • gestion des cookies
  • gestion des styles
  • gestion des formulaires
  • gestion des images
  • gestion du cache
  • gestion des données personnelles
  • affichage de la structure de la page
  • validation du code
  • taille de la fenêtre
  • zoom

Un véritable couteau suisse !

FireBug

FireBug - Inspection des objets HTML

FireBug est un bon complément à Web Developer. Il permet d’identifier rapidement des erreurs (HTML, CSS, Javascript, Ajax) et facilite leur repérage dans le code. Son inspecteur contextuel est redoutable.

XPather

XPather

XPather est un redoutable inspecteur de code et extracteur de contenu. Comme son nom l’indique, il utilise XPath pour manipuler le code XML ou HTML. Les fonctions sont illimitées puisque c’est vous qui définissez le comportement de XPather par des expressions rationnelles (les fameuses « RegExp »). Il faut bien sûr maîtriser XML, XPath et les RegExp sur le bout des doigts pour en tirer tous les avantages…

LinkChecker

LinkChecker

LinkChecker n’a qu’un but : vérifier la validité des liens de la page web en cours. Il ne fait rien de plus (pour le moment) mais comme il est accessible facilement par le menu contextuel et que le résultat s’affiche directement sur les liens, on l’adopte vite.

LiveHTTPHeaders

LiveHTTPHeaders

L’analyse des en-têtes HTTP donne des informations précieuses pour vérifier le bon fonctionnement de vos sites et applications web, notamment au niveau de la sécurité des données et des transactions. LiveHTTPHeaders les affiche en temps réel.

ColorZilla

ColorZilla

ColorZilla récupère les informations de couleur de n’importe quel pixel de la page web. Un tout petit outil donc, mais très utile pour vérifier que les développeurs ont bien respecté la charte graphique des webdesigners !

Selenium IDE

Selenium IDE

C’est sans doute l’extension qui vous fera gagner le plus de temps, tout en assurant la qualité de vos tests. Selenium IDE simule et automatise le comportement d’un utilisateur sur une application ou un site web.

Son principe est simple : enregistrer les actions la première fois pour les rejouer automatiquement ensuite. Comme les tests ne sont jamais rigides, on peut ajouter, modifier ou supprimer les actions pour jouer le test avec des options différentes.

Ce n’est pas le seul outil à le faire mais il faut avouer que l’avoir dans Firefox facilite grandement la tâche ingrate des tests. Il a un autre avantage : inutile d’être un expert des tests pour le mettre en place et l’utiliser ! Vous voyez ce que je veux dire…

ScrapBook

ScrapBook

Si on devait définir ScrapBook au plus court, on pourrait dire : « Aspirateur de sites ». Sauf que sa richesse fonctionnelle lui ouvre des possibilités bien plus grandes, en particulier pour la correction et la validation de sites ou d’applications web.

ScrapBook permet non seulement de capturer et de classer des pages ou des sites web, mais il sait aussi ajouter des commentaires, surligner du contenu, supprimer des balises HTML, exporter des plans de sites, montrer les liens internes et externes d’une page, capturer des médias, chercher du contenu, etc.

Détail qui semble futile, et pourtant capital : ScrapBook conserve intégralement le code source et les ressources des pages web, y compris les adresses d’origine des liens. Ce qui n’est absolument pas le cas quand vous enregistrez directement la page sur votre poste.

Pearl Crescent Page Saver

Pearl Crescent Page Saver

Faire des copies d’écran d’interfaces web est un travail long et débile si on utilise la touche Print screen du clavier : il faut ouvrir une application de retouche d’image, créer un nouveau document, y copier la capture, retailler l’image pour ne pas voir les menus et les autres fenêtres, exporter l’images… Et encore, je ne vous parle pas des pages web plus grande que l’écran ! Bref, un vrai calvaire si vous voulez faire un boulot propre.

Pearl Crescent Page Saver peut vous sauver ! Il réalisera pour vous les captures des pages web (portion visible ou page entière) et les placera dans des fichiers Ping (.png). Vous n’aurez plus qu’à les placer dans votre documentation utilisateur !

A noter l’existence d’un concurrent sérieux : Screengrab.

View Dependencies

View Dependencies

Cette extension ajoute l’onglet Dépendances dans la fenêtre Informations sur la page. On y trouve la liste de tous les fichiers nécessaires à l’affichage de la page, classés par type (code HTML, images, feuilles de styles, scripts, médias…). La taille de chaque fichier est indiquée, ce qui permet d’obtenir la taille globale de la page. Une petite extension donc, mais qui rend souvent service.

C’est tout ?

D’autres extensions Firefox mériteraient de figurer dans ce dossier. Mon but était simplement de rassembler celles qui apportent un vrai gain de productivité et de confort, tout en se démarquant des produits dédiés au développement et aux tests. Comme le milieu des extensions Mozilla est en pleine ébullition, je ferai des mises à jour régulières de ce dossier.

En vrac :

5 commentaires

Auteur
hankel
Date de publication
23 mai 2007 à 16h42

Merci pour ce billet j’ai trouvé mon bonheur avec XPather je crois..!

J’avais deja Firebug, Selenium IDE, et LiveHttpHeaders. Me voilà presque au complet ;)


Auteur
hankel
Date de publication
23 mai 2007 à 17h21

C’est encore moi.
En fait je recherche un plugin Firefox du style XPather permettant de prendre en charge des pages en Flash (reqûetes JSP) et d’afficher le contenu de la structure du site, des liens, sous forme XML ou XPath…

Est-ce possible?
Plus d’info sur ma recherche sur le forum de developpez.com, ici:
http://www.developpez.net/forums/showthread.php?p=2099459#post2099459

Merci de m’apporter une réponse!


Auteur
Christophe
Date de publication
23 mai 2007 à 21h59

Xray pourra sans doute faire l’affaire :
http://www.osflash.org/xray

Ce n’est pas une extension Firefox, mais il est redoutable ! Une sorte de mélange entre Firebug et Web Developer, mais pour Flash.

Absolument indispensable pour tester des applications Flash complexes. Et parfait pour contrôler des flux XML.


Auteur
Lodan
Date de publication
6 juillet 2007 à 7h59

Merci pour ce condensé très utile, j’ai découvert quelques petits outils fort intéressant.


Auteur
werutzb
Date de publication
8 octobre 2008 à 4h13

Hi!

I want to extend my SQL knowledge.
I red so many SQL resources and would like to
read more about SQL for my work as mysql database manager.

What can you recommend?

Thanks,
Werutz


* Informations obligatoires