Deux jour sans billet avec pour causes le manque d'informations et le manque de temps pour en chercher au delà des sources habituelles, mais on va reprendre le cours normal de publication des billets avec un petit dernier inspiré d'une news du Site du Zéro. :)

Lorsqu'on développe un site web manuellement, en se passant d'éditeur WYSIWYG traditionnels, il n'est pas rare que l'on rencontre certains obstacles dus à des erreurs difficiles à dénicher. Heureusement, les concepteurs des navigateurs dits de "nouvelle génération" comportent certains outils qui vont nous simplifier la vie.

Inspecteur DOMLe premier outil dont je vais parler n'est pas un add-on ou extension mais bien une fonctionnalité à part entière du navigateur : l'inspecteur DOM. Comme son nom l'indique, il sert à inspecter l'architecture de la source d'une page web dans le but de modifier son contenu ou sa présentation. Ses possibilités sont nombreuses et les utilisations qui en sont faites n'ont pour limite que votre imagination. Ainsi vous pouvez regarder les propriétés des éléments de type block, trouver leurs id et classes, modifier l'implémentation des feuilles de styles, etc. Il s'agit d'un outil à posséder absolument et à découvrir sans être rebuter par son aspect quelque peu trivial. Il est disponible sur toutes les plateformes à l'installation de Firefox, en cochant l'option correspondante.

Web Developer toolbarLa Web Developer toolbar est une extension qui est très utile. Elle permet d'éditer les css, de faire valider directement une page sur les W3C CSS et HTML validators, mais aussi d'entourer les éléments de type bloc, d'afficher les propriétés des images, et des dizaines d'autres astuces toutes aussi utiles ou presque. Je ne peux plus m'en séparer. Elle me sert autant pour déjouer quelques bugs d'interprétation des CSS de mon cru que pour déboguer une page que je n'avais jamais vu auparavant. Un vrai petit bijoux qui se limite à une simple toolbar. Elle est disponible en anglais sur le site officiel des extensions Firefox et en français par ici.

View Source ChartEncore une extension pratique, View source chart. Il s'agit d'un add-on qui permet de visionner la source sous un format qui colore les éléments en fonction de leur nature et qui indente automatiquement la source en fonction de l'enchevêtrement des balises. Je dois avouer que je m'en sers peu par habitude, mais elle peut être utile au débutant, notamment pour repérer les problèmes de tags qui ne sont pas fermés. Vous pouvez la trouver ici.

L'extension HTML Tidy Validator permet d'afficher la validité d'une page en un clin d'oeil dans la barre de statut du navigateur. Elle affiche aussi les erreurs et avertissement d'accessibilité dans la source de la page. Pratique pour ne pas avoir à vérifier les pages d'un site web une par une.

FireFTPEt enfin, puisqu'on ne développe jamais un site sans faire de retours incessants sur notre logiciel FTP préféré pour actualiser en urgence les dernières mises à jour, il existe une interface FTP intégrée à firefox : FireFTP. Je m'en sers depuis quelques mois et j'en suis très content. Le principal atout étant que le FTP est accessible en deux clics.

Vous n'avez plus d'excuses pour ne pas coder proprement si vous êtes un adepte de Firefox ! Et vous, vous utilisez d'autres extensions du genre ? :)