Dans la grande tradition Ouaibe 2.0 des listes de tout et n’importe quoi, voici ma petite liste indispensable qui transformera Firefox en un bel arbre de Noël pour développeur web, mais surtout vous aidera à gagner en temps et en qualité, au bénéfice des applications !
La barre d’outils de Chris Pederick est un complément indispensable au navigateur. Il permet notamment de piloter certaines fonctionnalités clés comme le cache ou l’activation du Javascript, des cookies. On peut également afficher beaucoup d’informations habituellement cachées dans une page : réponses HTTP, champs de formulaires, etc.
La barre d’outils vaut le coup pour certaines fonctionnalités comme l’éditeur à la volée des CSS d’une page, et les outils comme les validateurs HTML/CSS/Accessibilité. Un conseil : bannissez le redimensionnement d’écran avec la fonctionnalité de la barre, et forcez vous à vous mettre sous la vraie résolution (ca pique les yeux mais au moins y’aura pas de mauvaise surprise !).
L’autre extension qui divulgue des paquets d’informations sur votre page est Firebug. La fonctionnalité d’inspection des éléments HTML sous le curseur souris est bien plus puissante que la barre Webdeveloper. A cela s’ajoutent des traces Javascript très évoluées et surtout une visualisation très agréable des entêtes et réponses HTTP, ce qui en fait un incontournable si vous utilisez un kit AJAX. L’affichage des styles et surtout de leur héritage enfonce le clou et vous permet de comprendre immédiatement si vous avez surchargé votre feuille de styles comme un sauvage !
Une petite extension toute bête qui se mettra en bas à gauche de la barre d’état et permet de récupérer la couleur sous le curseur souris sous différents formats : RGB, HTML etc. avec envoi direct dans le presse-papiers pour collage dans une feuille de styles 
Malgré les petites fonctionnalités d’accessibilité présentes dans la barre Webdeveloper (validation WAI, détection d’images sans atributs alt…), Fangs permettra de visualiser le site Internet comme s’il était synthétisé par un lecteur vocal. Pratique si vous avez besoin de vérifier certaines contraintes Accessiweb ou WAI (cohérence de présentation des informations sans CSS, pertinence des span lang=”…” etc.)
Yahoo!, sur son portail développeurs propose une extension de Firebug permettant d’analyser la performance de la page web, à partir de 13 bonnes pratiques qu’ils ont identifiées. Cela va du poids des composants de la page (HTML, JS, images…) au nombre de requêtes HTTP effectuées. Extension importante lorsque vous passez au peaufinage de vos applications, ou lorsque vous commencez à perdre vos cheveux à cause d’une page qui rame.
Commentaires récents