Firebug

Firebug est l’outil #1 et le meilleur ami de tous les intégrateurs Web. Il vous permet, entre autres, de voir les styles CSS qui s’appliquent sur n’importe quel élément d’une page. Il permet également de modifier ou d’ajouter directement des styles dans le navigateur pour visualiser le rendu en temps réel. Cet outil permet aussi de visualiser les cookies et de déboguer le JavaScript. Bref, il vous sauvera beaucoup de temps pour arriver à un affichage parfait de votre page.

Colorzilla

Colorzilla ajoute une pipette dans l’interface de Firefox vous permettant de connaître rapidement la couleur d’un pixel dans une page Web. L’outil fournit une lecture en hexadécimal, en RGB et même en HSL de la couleur. Un « color picker » à la Photoshop vous permet également de trouver une déclinaison pour une couleur donnée.

Web Developer Toolbar

Le Web Developer Toolbar est un incontournable pour faciliter le travail d’un développeur. Elle ajoute une panoplie de nouvelles fonctionnalités utiles autant à un programmeur qu’à un intégrateur. On peut entre autre désactiver la cache, afficher visuellement les détails des formulaires présents dans les pages ou encore désactiver les CSS. Cette extension nous donne aussi accès à certains outils comme une règle au pixel et un outil redimensionnant le navigateur pour imiter une autre résolution d’écran. Cette dernière fonction est très pratique pour voir comment le site s’affiche dans une résolution précise. Vous découvrirez aussi une tonne d’autres fonctionnalités intéressantes.

Screengrab!

Screengrab! permet de faire une capture d’écran de la page entière même si cette dernière est plus grande que l’espace visible à l’écran. On peut également faire la capture d’écran de sélections spécifiques dans la page, ce qui est très utile lors de la rédaction de documents ou de présentations.

Pixel Perfect

Pixel Perfect est une extension d’une autre extension. En effet, Pixel Perfect ajoute encore plus de fonctionnalités à Firebug, présenté plus haut. C’est l’outil idéal pour les intégrateurs. Il permet d’appliquer une image de la maquette du site en transparence par dessus la page intégrée en HTML. Il ne vous reste ensuite qu’à reconstruire la maquette en HTML un peu comme on copierait un dessin avec du papier calque. On peut donc s’assurer que la maquette visuelle présentée au client est parfaitement respectée.

YSlow

Yslow est une autre extension de Firebug. Conçu par l’équipe de développement de Yahoo, cet outil analyse votre page et attribue une note de A à F à différents aspects touchant à la performance et au temps de chargement de la page. Si vous déployez des sites d’envergure, rien ne doit être laissé au hasard et YSlow s’en assurera pour vous.

Des milliers d’autres extensions sont disponibles en téléchargement sur le site de Firefox. En tant qu’experts en création de sites Web, nous nous devons de nous équiper des instruments qui sauront nous accompagner dans un travail de conception de sites Web productif et efficace.