Une barre d'outils Firefox pour les webmasters contenant des dixaines d'outils pratiques
Lorsque l'on développe un site web, on a souvent besoin de beaucoup d'outils externes comme la validation W3C ou autres.
Certaines actions sont, elles, trop répétitives (uploader un fichier css et actualiser la page par exemple).
Pour vous simplifier ces tâches, il existe un outil extrêmement pratique que j'ai utilisé tout au long du developpement de ce site, la WebDeveloper Toolbar.
Je vous décrirai ici les fonctions que j'utilise le plus et celle que j'estime comme les plus pratiques même si vous pourrez découvrir par vous même toutes les options offertes par cette barre d'outils.
Télécharger la barre d'outils WebDeveloper pour firefox en français
Editer ses fichiers CSS en temps réel !
Auparavant, pour modifier le look d'une page, je faisais mes modifications CSS dans mon éditeur texte puis j'uploadais le fichier et j'actualisais
la page pour voir si mes modifications fonctionnaient.
Maintenant, j'utilise systematiquement l'outil "
éditer les CSS" de la WebDeveloper Toolbar.
En effet, cette option ouvre un panneau sur la gauche de la page contenant les différents fichiers css contenus sur la page.
La page actuelle est ensuite
mise en cache pour donner cette impression de temps réel.
Ainsi, si vous modifier le fichier CSS dans le panneau de gauche,
vous voyez directement ses effets sur votre page web.
Seul bémol, le code n'est pas coloré mais on s'y habitue vite.
On peut ensuite enregistrer le fichier CSS pour écraser l'ancien tout en étant sûr que les modifications ne détruiront pas la page web.
Un autre option propose aussi de
voir les styles d'un élément particulier. Une fois activée, votre curseur se tranforme et dès que
vous passez sur un élément (div, lien, paragraphe ...), une description de son code CSS appliqué et hérité s'affiche.
Une option bien pratique pour piquer les bonnes idées des autres site web ;).
Valider W3C ses pages web en un clic !
La barre d'outils WebDeveloper permet d'effectuer de nombreuses validations W3C sans avoir à passer par le site officiel.
Ainsi, on peut
valider des pages HTML grâce à un simple raccourci clavier (Ctrl + Maj + H), mais aussi des fichiers CSS, des fils RSS
ou bien encore des liens hypertexte.
Visualiser le code source généré
La plupart du temps, la commande "Code source de la page" permet d'afficher efficacement le code html d'une page.
Cependant pour les pages utilisant du Javascript, tout ne sera pas affiché.
L'option "Voir le code source généré" permet de
visualiser le code source complet généré de la page.
Vous pouvez tester son efficacité avec les widgets google par exemple.
D'autres outils pratiques de la WebDeveloper Toolbar
- Désactiver le cache
- Afficher l'attribut alt des images
- Afficher l'ordre des éléments div
- Afficher la taille des blocs
- Editer le HTML (en temps réel comme pour l'édition CSS)
- Redimensionner la fenêtre en 800x600
Télécharger la barre d'outils WebDeveloper pour firefox en français
