Firefox est avant tout un navigateur gratuit et conforme aux normes. Il est facile à étendre grâce aux centaines de modules disponibles (voir par exemple sur Geckozone).

Certaines extensions apportent de nouvelles fonctionnalités de navigation ou de consultation (par exemple lire un flux RSS, ajouter un vérificateur orthographique pour valider les formulaires avant soumission).

Pour un développeur Web, Firefox apporte des extensions qui simplifient le développement et permettent de voir le résultat de manière immédiate. Du coup, ce navigateur peut désormais être utilisé comme environnement de développement pour des pages web (à condition de connaitre le langage HTML bien sûr).

DevelopperToolbar et Firebug sont deux extensions indispensables. Ce billet les présente.

Web Developper Toolbar

Comme son nom l’indique, l’extension Web Developper Toolbar permet d’ajouter des fonctionnalités orientées développement web. Cette barre ajoute des fonctions pour inspecter le contenu des pages (code HTML ou CSS par exemple), mais aussi de valider ces pages en utilisant les services en ligne. Il est également possible de parcourir visuellement l’arbre syntaxique de la page en survolant les éléments de la page en cours. Cette extension permet d’afficher un page web sans les images, sans la feuille de style, bref, elle permet de la tester dans différentes configuration.

Quelques fonctionnalités intéressantes

• Activer/Désactiver l’affichage des images,
• Vérifier les attributs « alt » sur les images,
• Activer/Désactiver/Modifier les feuilles de styles,
• Vérifier si les codes HTML et CSS sont valides (en utilisant les validateurs du W3C),
• Afficher le chemin d’un élément surligné (en passant la souris),
• Désactiver le cache, l’utilisation de java ou de javascript.
• Afficher les informations de la page: id des éléments, liens, les différents média chargés (permet de visualiser chaque image et de la sauvegarder).

Exemples d’utilisation

Voici quelques captures qui vous montrent à quoi ressemble cette extension et son utilisation.

Regardons ce que devient Google si on active l’aperçu sur écran de petite taille (par exemple PDA):

On remarque que ce site semble bien conçu pour ce type d’affichage.

Web Developper Toolbar permet aussi de tester l’accessibilité d’un site en désactivant les images:

D’après ce qu’on peut voir, le site de TF1 n’est pas vraiment adapté si on désactive les images. Il n’est donc pas accessibles aux personnes mal-voyantes par exemple.

Je vous ai présenté quelques fonctions de cette extension. J’espère que vous aurez la curiosité de l’installer et de me donner vos impressions.

Pour aller plus loin

Rendez-vous à la page de l’extension Web Developer Toolbar.

Vous pouvez également retrouver des informations complémentaires sur la page du développeur: http://chrispederick.com/work/webdeveloper/.

Firebug

Cette extension permet de debugger et de valider le développement AJAX, DHTML et Javascript. L’extension permet d’afficher le DOM d’une page, de sélectionner une portion et d’inspecter les requêtes effectuées par le navigateur.

Fonctionnalités

• Modification en temps réel du code HTML ou CSS (vous pouvez aussi voir instantannement le résultat),
• Débuggage javascript: espions et points d’arrêts,
• Analyse des accès réseau: une page donne la liste des requêtes avec les réponses.
• Inspection d’un élément donné (permet de sélectionner une portion de code et de travailler ensuite celui-ci),
• Inspection du DOM du document.

Exemples d’utilisation

Pour essayer cette extension, j’ai simplement démarré Firebug sur mon blog et j’ai essayé de modifier le titre du premier billet.

L’interface affiche une zone de saisie lorsque l’on clique sur un élément modifiable:

Après la modification, le rendu se met à jour et donne ceci:

Ensuite, je me suis intéressé de plus prêt à la fonction d’analyse des requêtes (pour vérifier le chargement des éléments de ma page d’accueil). L’extension me donne le résultat suivant:

Finalement, je me rends compte que le temps total de chargement est de 4,5 secondes (1and1 n’est pas très performant!). Le résultat donne la liste de chaque élément. Lorsqu’on passe la souris sur un élément, l’extension affiche les détails (pour une image celle-ci est affichée, pratique non?).

Pour aller plus loin

Cette extension est un composant indispensable pour le développeur HTML/Javascript. La possibilité de mettre des points d’arrêts vous fera gagner beaucoup de temps de débuggage.

Je vous invite à consulter la page principale de l’extension GetFirebug.

Quelques autres blogs qui parlent des deux extensions:

• p4bl0,
• Oh my blog (Developpez.com),
• Blogzinet.