Extension pour Firefox / Seamonkey, Web Developer est très utile pour développer des sites web, des scripts cgi, etc. L'extension est aujourd'hui développée pour Chrome (version 0.4.4) et pour Opera (0.1). La présente fiche concerne la version pour Firefox. Ses points forts sont les suivants :

• il permet d'entourer des éléments html, sélectionnés selon un grand nombre de critères ;
• on peut afficher une « règle » permettant de voir la position des éléments au pixel près ;
• on peut afficher les informations concernant les éléments de formulaires (champs cachés, noms des champs, etc.) ;
• un formulaire 'post' peut être converti en 'get' d'un clic, ce qui est précieux pour le déboguage ;
• on peut effacer les données « privées », en particulier le cache et les paramètres de connexion http ;
• on peut redimensionner la fenêtre du navigateur, soit à 800x600 pixels, soit à une dimension quelconque. Précieux pour s'assurer que son site est correctement visible sur un téléphone ou une tablette ;
• enfin, un éditeur CSS simplifié est intégré : lorsqu'on change une règle CSS appliquée sur la page en cours, le changement est aussitôt répercuté.

• Le menu Information est très complet, il permet par exemple d'afficher les Id de chaque élément. Ou encore d'afficher la « profondeur » des tableaux : très pratique lorsqu'on reprend un ancien site web à base de tableaux, et qu'on a un peu de mal à comprendre comment tous les tableaux sont imbriqués...
• On peut encore afficher les éléments cachés (« hidden ») ou les commentaires html (ce qui incite donc d’autant plus à commenter son code).
• On peut aussi désactiver le cache, les cookies, javascript, les styles, etc., cela permet de détecter très rapidement les problèmes d'accessibilité de son site. Les problèmes qui se posent souvent avec les images peuvent aussi être détectés : images trop lourdes, propriétés alt manquantes, images redimensionnées, ...
• On peut aussi demander d'entourer l'élément « courant » : dès que la souris passe sur un élément, celui-ci est mis en valeur, et le chemin complet (dans le DOM) de l'élément est affiché (cela ne semble plus vrai dans les dernières versions de l'extension).
• On peut contacter le W3C pour valider sa page web d'un clic de souris.
• Trois icônes en haut à droite indiquent immédiatement si le HTML, le CSS et le Javascript présentent des erreurs ou non. Une validation plus poussée du html (qui passe par le w3c) peut être réalisée à partir de Web Developer.
• Lorsqu'une fonctionnalité est activée, on peut la désactiver rapidement grâce à un petit bouton apparaissant en bas de la fenêtre du navigateur à droite (cela ne semble plus vrai dans les dernières versions de l'extension).
• Web Developer intègre aussi une loupe dont on peut paramétrer le niveau de grossissement (menu Miscellaneous > Page Magnifier).
• Un menu de validation très complet, permet de valider sa page web, mais également les liens, le CSS, etc. Moins rapide que HTML Validator car il repose sur les services du W3C ou autres, mais très pratique néanmoins.

Permet de créer des pages web conformes aux normes, le summum de l'interopérabilité !

Au LIPM, nous utilisons cette extension de manière quotidienne pour mettre au point nos interfaces web. Nous en sommes extrêmement satisfaits.

• L'éditeur CSS est insuffisant : il permet de finaliser une feuille de style, mais pour concevoir depuis le départ la feuille de style, un éditeur plus classique est préférable.
• Enfin, pour développer une application web un peu importante, il est indispensable de disposer d'un débogueur javascript, non inclus dans Web Developer. D'où l'utilisation de l'excellente extension Firebug, complémentaire de Web Developer.
• Dans les dernières versions, il me semble avoir noté quelques régressions, ou peut-être des fonctionnalités qui n'ont pas pu être reprises dans les dernières versions de Firefox : par exemple le bouton permettant de désactiver rapidement une action engagée, et je n'ai pas réussi à rendre les fonctionnalités persistantes. Du coup, pour désactiver toutes les fonctionnalités il suffit de recharger la page... Autre régression : la fonctionnalité permettant d'entourer l'élément courant semble avoir disparu.