Web Developer

Fiche logiciel validé
  • Création ou MAJ importante : 23/09/13
  • Correction mineure : 23/09/13
Mots-clés

Web Developer : extension pour Firefox/Seamonkey/Flock et autres navigateurs

Description
Fonctionnalités générales

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é.
Autres fonctionnalités
  • 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.
Interopérabilité

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

Contexte d'utilisation dans mon laboratoire/service

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

Limitations, difficultés, fonctionnalités importantes non couvertes
  • 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.
Environnement du logiciel
Distributions dans lesquelles ce logiciel est intégré

Web Developer est intégré dans Debian, pour utilisation avec Iceweasel (Firefox à la mode Debian). Pour les autres distributions, dès lors que Firefox est installé (présent dans toutes les distributions Linux), il est très simple d'installer Web Developer :

  • visitez cette page : https://addons.mozilla.org/fr/firefox/addon/60 ;
  • cliquer sur le bouton « Installer » ;
  • redémarrez Firefox

    Web Developer, une fois installé, peut être mis à jour à partir de Firefox : menu Outils/Modules complémentaires.

Plates-formes

Toute plateforme supportée par Firefox.

Logiciels connexes
Autres logiciels aux fonctionnalités équivalentes
Environnement de développement
Type de structure associée au développement

Chris Pederick semble être le développeur unique de cette extension.

Eléments de pérennité

Web Developer est extrêmement connu, et utilisé par un grand nombre de concepteurs de sites web. De nombreux livres sur le « webdesign » citent cette extension. La première version (0.1) remonte à 2003 et Chris Pederick a toujours suivi les différentes versions de Mozilla et Firefox (lorsqu'une version majeure arrive, vérifiez la compatibilité avec Web Developer).

Références d'utilisateurs institutionnels
Environnement utilisateur
Liste de diffusion ou de discussion, support et forums

Tout se trouve sur http://chrispederick.com/work/web-developer. Il y a en particulier plusieurs forums assez vivants.

Documentation utilisateur

Pas de documentation ni même d'aide en ligne, mais ce logiciel est sans surprise : cliquez et voyez !

Commentaires

Responsable thématique précédent

Cette fiche a d'abord été suivie par le responsable thématique Véronique Baudin. Clive Ferret-Canape l'a reprise en juillet 2013.