Web Developer Toolbars : des outils au service des développeurs web (3849 lectures)

200502/10

Les Web Developer Toolbars sont des outils indispensables pour les développeurs et intégrateurs de sites internet.
Mozilla avait lancé le projet avec une barre d'outils trés efficace.
Aujourd'hui, Opera et Internet Explorer apportent également leurs propres barres d'outils.
Osons une comparaison.

Qu'est-ce qu'une Web Developer Toolbar ?

C'est un plugin au navigateur qui va permettre l'emploi de plusieurs fonctionnalités utiles au développement d'un site web ou à l'analyse d'un site.
Il sera difficile d'aborder toutes ces fonctionnalités dans le détail dans cet article ; aussi nous verrons les principales, et aborderons un comparatif entre les 3 navigateurs Firefox / Opera / Internet Explorer.

Ou télécharger les Web Developer Toolbar ?

• Web Developer Toolbar pour FirefoxVoir la page Web Developer Toolbar pour Firefox. Lien externe (nouvelle fenêtre ou nouvel onglet > clic droit)
• Web Developer Toolbar pour OperaVoir la page Web Developer Toolbar pour Opera. Lien externe (nouvelle fenêtre ou nouvel onglet > clic droit)
• Web Developer Toolbar pour Internet ExplorerVoir la page Web Developer Toolbar pour Internet Explorer. Lien externe (nouvelle fenêtre ou nouvel onglet > clic droit)

Première approche : le look

Firefox

Opera

Internet Explorer

Sinon les icônes associés sur Firefox, les différences sont minimes.

Usages

Les barres d'outils de développeurs sont à usage multiples et leurs fonctionnalités dépendent de chaque navigateur.
Ainsi, impossible de dire qu'une barre est dans l'absolue plus performante qu'une autre, même si j'aurais récemment un penchant pour...(à suivre...)

Leur usage le plus courant :

• Fonction de désactivation : images, cookies, scripts, popup blocker, etc.
• Edition des feuilles de styles de la page
• Visualisation des ID et CLASS
• Visualisation des éléments de structure (blocs, paragraphes, etc.).
• Outils de validation XHTML, CSS, WAI; liens vers les spécifications W3C
• Affichage du code source en 1 clic
• Recadrage 800x600
• Spécificités propres

Web Developer Toolbar pour Firefox

C'est celle que j'utilise au quotidien. J'ai eu le temps de la manipuler et j'en suis pleinement satisfait.
Son point fort : la possibilité d'éditer les feuilles de styles reliées à une page pour visualiser instantanément les modifications. C'est en fait l'extension propre Edit CSS intégrée à la barre d'outils. L'avantage est indéniable : plus besoin d'aller dans l'éditeur HTML, modifier la feuille de style, enregistrer, revenir dans le navigateur, recharger la page pour voir le résultat, et refaire l'opération tant que.
Ses points faibles : aucuns, tant qu'on ne connait pas les autres barres d'outils ;)

Web Developer Toolbar pour Opera

On retrouve les mêmes fonctionnalités que sur Firefox.
Points forts :

• Un accès vers toutes les spécifications (standards, resssources, DOM, navigateurs) trés pratique et utile. Plus besoin de gérer tout ces liens depuis les marque pages.
• Les propriétés Display : un réel atout de cette barre d'outil.
  - Changement instantanné du type de police appliquée à la page.
  - View Computed CSS for elements : tout simplement excellentissime, cette fonctionnalité permet au survol d'un élément d'en afficher toutes ses propriétés CSS ainsi que l'id et/ou la class correspondante. Au clic, une fenêtre affiche le code correspondant à l'élément survolé.
• Visualiser instantanément la page dans chaque autre navigateur : toujours du temps de gagné.
• Visualiser au survol chaque ID/CLASS et type d'élement dans la barre de statut.

Points faibles : à moins que ça ne me soit passé inaperçu (preuve aussi que ce serait mal indiqué), je ne vois aucun moyen d'afficher les noms des éléments dans la page même, leurs dimensions, et un encadrement de chaque structure.

Web Developer Toolbar pour Internet Explorer

Internet Explorer est le petit dernier à proposer une barre d'outils développeur, mais il n'a pas fait les choses en amateur, surtout en version Beta.
Certes, on ne peut pas éditer les feuilles de styles dynamiquement(Firefox reste donc au-dessus pour cette fonctionnalité à mon sens indispensable).
Mais la barre d'outil Web Developer d'Internet Explorer comporte des fonctionnalités qu'on ne retrouve pas sur les autres et qui sont trés interressantes.

• Outliner les éléments en position absolue, fixe, flottant ou relatif.
• View DOM : c'est un vrai coup de coeur et une fonctionnalité que je vais regretter sincèrement d'être absente sur Firefox.
  Elle ouvre un cadre en bas de la fenêtre du navigateur, affichant la structure du document HTML.
  Le clic sur un élément déclenche l'affichage encadré de l'élément dans la page en mode clignotant pendant quelques secondes.
  L'autre partie du cadre affiche la liste de tous les éléments et attributs CSS correspondant.
• Show Ruler : permet d'utiliser une règle avec unités en pixels

Conclusion

Les barres d'outils pour développeurs sont loin d'être des simples gadgets aujourd'hui.
Certe, comme on trouvera toujours des codeurs pour crier crânement qu'ils ont juste besoin du bloc-note pour coder, on trouvera des intégrateurs qui n'ayant pas pris le temps ni la mesure de l'utilité de cette barre d'outil la qualifieront de gadget pour débutant au mieux.

Je vous invite vraiment à installer ces barres dans vos navigateurs pour en apprécier toutes fonctionnalités.