La phase de test pour le design d’un site peut vite devenir pénible. Coincé sur un petit détail qui nous échappe pendant des heures, on perd vite son calme. Enfin ça c’était avant l’arrivé de Firefox et de ses extensions.
Je vais donc vous dresser une petite liste des extensions simplifiant énormement la vie lorsque l’on developpe un site web. J’utilise ces extensions depuis un bon bout de temps et elles m’ont évité de grosse prise de tête.

DOM Inspector : Commençons par cette extension qui ne s’installe pas comme les autres car c’est lors de l’installation de Firefox que vous la choississez. Comment vérifier que vous l’avez bien installé? Ouvrez le menu Outils et si vous voyez dans la liste l’Inspecteur DOM. C’est bon. Dans la cas contraire je vous recommande vivement de réinstaller Firefox. Et de bien penser à cocher la case « Outils de développement » lors de l’installation.
L’inpecteur DOM est très utile pour voir une quantité d’information à chaque noeud du DOM
Je vous en reparlerais sûrement dans un autre billet.

Web developer Toolbar : Cette extension est indispensable. Je pourrais dédié un long billet à cette extension pour en parler en détail. Sachez au moins pour l’instant qu’elle vous permet rapidement de désactiver certaines fonctions du navigateur, d’éditer le CSS à la volée, d’afficher des tonnes d’informations sur la page selon la présence ou non de certaines balises et/ou d’attributs, de redimensionner rapidement votre navigateur, d’envoyer en un clic la page vers un validateur en ligne, etc.
Installez la. Jouez un peu avec sur quelques pages web, vous allez vite l’adorer.

Colorzilla : Fini les screenshots des pages web amenés à Photoshop pour récuperer une couleur. Colozilla rajoute une pipette et des palettes de couleurs dans Firefox. Cette extension garde en plus un historique des couleurs récuperées et vous pouvez en définir certaines comme vos favorites.
Et pour êtres sûr de ne pas loupez la couleur qui vous intéresse, il est possible de zoomer dans la page.

View Formatted Source et View Rendered Source Chart : deux extensions proposant des manières différentes de présenter le code source. A vous de choisir l’extension qui vous conviendra le mieux.

Google Pagerank Status : une petite extension toute simple qui vous affichera en bas à droite le PageRank de la page sur laquelle vous vous trouvez. C’est le même que celui affiché par la Google Toolbar.

IE Tab : Internet Explorer ayant toujours environ 80% des parts du marché, impossible de faire l’impasse d’un test sur ce navigateur. IE tab, vous permet d’ouvrir la page choisie dans un onglet de Firefox avec le moteur de Internet Explorer (et donc tout ce que cela implique, comme les failles de sécurités par exemple).
Cette extension ne peut marcher que si vous êtes sous Windows avec Internet Explorer d’installé.

IE View : Si vous avez besoin d’accèder à certaines fonctionnalités de Internet Explorer lorsque vous testez une page avec ce navigateur, vous vous sentirez peut-être un peu trop à l’étroit dans IE tab.
IE View vous permet d’un simple clic droit sur une page web de l’ouvrir sous Internet Explorer. Plus de copier-coller agaçant.
Encore une fois, il vous faudra Windows.

Opera View : Exactement comme IE View mais cette fois avec Opera (et plus de limitation lié à Windows).

Pearl Crescent Page Saver : Une fois que tout est fini et que vous êtes fier de votre travail. Vous aimeriez peut-être prendre un screenshot de la page entière. Cette extension vous permettra de le faire au format PNG.

Il en existe bien d’autre. C’est un premier aperçu de ce qu’il existe. Si vous codez proprement, en vous basant sur les standards du W3C, travailler avec Firefox sera un réel bonheur.