Pour coder nos pages, nous utilisons souvent Dreamweaver, mais il existe, au travers des extensions de Firefox et IE, des outils bien utiles et qui peuvent faciliter le développement et le déboguage des des pages internet.

IE Tab

Cette extension pour Firefox permet d'ouvrir dans Firefox la page courante dans un onglet mais avec le moteur d'Internet Explorer. Cela permet de rester dans Firefox pour tester une page, et donc, de gagner du temps.

capture d'écran de l'onglet IE dans Firefox

L'activation se fait via un bouton qui vient se nicher dans la barre d'état.

bouton dans la barre d'état

La barre d'outils Web Developer

Il s'agit d'une extension Firefox qui rajoute une barre d'outils à la fenêtre du navigateur, et qui offre d'énormes possibilités :

  • vous pouvez désactiver les css, le javascript, ou les images,
  • vous pouvez entourez en rouge les éléments que vous êtes entrain de survoler,
  • vous avez un acces rapide aux validateurs,
  • vous obtenez des informations sur votre page.

La liste est longue de toutes les possibilités de cet outil.

capture d'écran de Web Developer

ColorZilla

Une petite extension Firefox qui permet d'avoir l'outil pipette à l'intérieur de Firefox. Cela récupère une couleur issue de la page courante (possibilité de l'avoir en hexa) et ensuite nous pouvons l'appliquer dans notre code.

capture d'écran de Colorzilla

FireBug

Il s'agit d'une extension puissante de Firefox qui permet d'analyser son code xhtml et css, tout en restant dans Firefox.

Comme je vous le montre dans cette capture, vous avez une fenêtre au bas de votre navigateur (que vous pouvez détacher) qui affiche sur la partie de gauche votre code xhtml. Lorsque vous cliquez sur une balise, l'élément désigné va se colorer dans votre page internet : ainsi sur la capture, on voit que l'élément h2 possède une marge au dessus (coloré en jaune).

De plus en bas, dans la fenêtre de Firebug, à droite, vous avez un schéma de l'élément qui vous indique les dimensions de votre éléments, son padding, son border, et son margin.

L'onglet Style lui permet de repérer dans votre css les éléments redondants en les barrant. Vous pouvez désactiver temporairement un style en cliquant sur l'icône précédant une css.

Cet outil propose aussi un debogueur javascript.

Dust-Me Selectors

Il s'agit d'une extension Firefox qui ajoute un bouton dans votre fenêtre d'état qui vous permet d'afficher dans une nouvelle fenêtre les sélecteurs css que vous utilisez dans votre page, et qui ne sont pas utilisés. Pratique pour nettoyer sa css, mais il faut quand même faire attention à ne pas supprimer des selecteurs css utilisés dans d'autres pages du site.

capture d'écran de Dust-Me Selectors

LinkChecker

LinkChecker vérifie la validité de chaque lien d'une page Web.

capture d'écran de LinkChecker

Une coloration de type vert, jaune, rouge vous indique si le lien est valide, douteux ou cassé.

Internet Explorer Developer Toolbar

Il arrive souvent qu'une page s'affiche correctement sous Firefox, mais pose problème sous IE. Cette extension IE permet, entre autres, d'afficher dans une fenêtre les attributs xhtml et css des éléments survolés, comme vous pouvez le voir dans cette capture.