Firefox Web Developper : votre outil pour créer des pages Web

Comme son nom l’indique, Firefox Web Developper est un outil pour aider les développeurs à créer des sites Internet.

Concrètement, l’installation de cette extension de Firefox ajoute une barre horizontale dans votre navigateur, qui se présente ainsi ( voir ci-dessous ; nous l’avons coupée en deux pour plus de lisibilité).

Chaque menu se décline en sous-menus qui sont autant d’outils pour :
 observer la construction de pages Web (par exemple, le menu "Entourer" permet de visualiser la structure de la page en affichant les blocs, cellules de tableaux, etc. On peut même choisir la couleur d’affichage des blocs en fonction de l’élément "div" concerné),
 tester leur conformité aux standards W3C (valider le code html, les feuilles de style, le fil rss…),
 tester leur comportement dans différentes configurations de navigateurs (désactivation de javascript ou de Java, de feuille de style, d’affichage des images, etc.),
 les afficher en mode "petit écran" (menu "Divers", sous-menu "Rendu sur petits écrans"),
 les redimensionner dans différentes résolutions d’écran,
 obtenir différentes informations (menu "Information") : le poids total d’une page avec, au besoin, le poids de chaque élément la composant (page html, feuilles de styles, images, scripts…)…

et

Par exemple, si, sur la page d’accueil de www.generationcyb.net, nous activons "Afficher les détails des ID & Class"

cela fait apparaître les informations suivantes pour chaque bloc de la page :

Voici ce qui s’affiche si l’on choisit, dans le menu "Information", le sous-menu "Afficher les informations de l’élément CTRL+MAJ+F" et si l’on survole le sous-menu "Animation de réseau" de GénérationCyb :

Web Developper : un outil pour se former aux styles CSS

Si votre site est installé en local sur votre disque dur, vous pouvez non seulement visualiser, mais aussi éditer (sous-menu "Edit CSS" du menu "CSS"), modifier et tester votre feuille de style CSS.

Firefox Web Developper est donc un outil simple pour effectuer une modification sur une feuille de style et tester immédiatement sa conséquence dans l’affichage de la page dans Firefox.

Le menu CSS vous permet aussi de "voir les styles d’un élément particulier" en cliquant dessus.

Téléchargement et installation

Pour installer Firefox Web Developper, allez sur http://joliclic.free.fr/mozilla/webdeveloper. La barre d’outils Web Developper s’affiche au redémarrage suivant de Firefox.