Accueil
Fiche logiciel validé
  • Création ou MAJ importante : 31/07/08
  • Correction mineure : 31/07/08
Auteur :
  • Emmanuel Courcelle - LIPM (CNRS, INRA)
Relecteur(s) :
Responsable thématique :
Mots-clés

Web Developer : extension pour Firefox/Seamonkey/Flock

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. 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
  • 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 à 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é. Enfin, 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 webdeveloper.
  • 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.
  • Web Developer intègre aussi une loupe dont on peut paramétrer le niveau de grossissement (menu Miscellaneous > Page Magnifier).
Interopérabilité :

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

Contexte d'utilisation :

Au LIPM http://www.toulouse.inra.fr/centre/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.
  • Je n’utilise plus la fonctionnalité de validation depuis que je connais l’extension HTML Validator, qui valide le code HTML en local, donc de manière interactive.
  • 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.
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 :

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 :

Il existe une extension équivalente sous Internet Explorer : la Debug Bar http://www.debugbar.com/

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

Lun, 31/03/2008 - 16:14 — Dominique Caron

Un MUST

Ce truc est un MUST pour tous ceux (et toutes celles), qui veulent faire du développement Web. Il y a une infinité d’outils dont les plus utiles sont à mon humble avis:
- Le Local validateur CSS/HTML (permet de développer sur un intranet tout en soumettant les pages sur validator.w3.org.
- Les trois icones en haut à droite indiquant immédiatement si le HTML, le CSS et le Javascript sont OK ou non.
- Les outils de désactivation rapide du cache, des cookies, du javascript, du java etc…
J’en passe et des meilleurs…. je n’écris plus une page Web sans lui (et colorZilla ;)

Mer, 19/12/2007 - 13:03 — Maud Ingarao

très très utile en effet

Nous utilisons également intensivement la barre d’outils webdeveloper !

A noter : on peut afficher les éléments cachés (“hidden”), les commentaires html (ce qui incite donc d’autant plus à commenter son code ;o)

Cette barre d’outils intègre aussi une loupe dont on peut paramétrer le niveau de grossissement (menu Miscellaneous > Page Magnifier)

pour info : http://transversale.ens-lsh.fr/spip.php?article200

Maud Ingarao
Unité Numérique - Direction de la Recherche
ENS Lettres et Sciences Humaines
15 parvis René Descartes - BP 7000
69342 LYON Cedex 07
04 37 37 65 79
maud.ingarao@ens-lsh.fr

Mar, 11/12/2007 - 12:17 — Jean-Luc Archimbaud

Autres fiches PLUME connexes

Autres fiches ou documents PLUME sur le même thème :