Si vous ne les avez pas déjà installé, recherchez et installez ces deux modules pour FireFox. Ouvrez une page web et cherchez à voir ce que vous permettent de faire ces deux plug-ins. Réalisez une note de synthèse sur ce que vous avez découvert.
Firefox est le navigateur préféré des développeurs et ce pour plusieurs raisons. La principale est qu’il est l’un des navigateurs possédant le meilleur rendu graphique correspondant aux spécifications CSS que l’on lui fournit (cf Acid Test). La deuxième est qu’il s’agit d’un logiciel Open Source que l’on peut modifier gratuitement. La dernière est qu’il possède de nombreux modules : Download Video Helper, Cache Viewer, ...
Dans cet exercice, les deux modules qui nous intéressent sont Firebug et la toolbar Web Developer.
Firebug est un outil très largement utilisé par les développeurs web car il permet d’effectuer vraiment beaucoup de choses. Il permet à la fois la détection d’erreurs et la modification en ligne d’éléments d’une page HTML. Grâce à lui, même un utilisateur lambda est capable de modifier l’apparence d’une page d’un site qui n’est pas le sien.
Firebug offre un débogueur JavaScript qui est très utile lorsqu’un script JS ne fonctionne pas. Il vérifie à la fois la syntaxe du code et les objets manipulés dans l’arborescence de la page (noeuds HTML). De plus, pour les scripts utilisant la technologie AJAX, il permet d’afficher le contenu affiché par les scripts CGI.
Un inspecteur d’éléments de la page est également disponible offrant la possibilité de vérifier les propriétés CSS d’un noeud HTML. Cela peut être utile lorsqu’un élément hérite de plusieurs propriétés qui font que celui-ci ne s’affiche pas tel qu’on l’escomptait. Cela permet également de vérifier les propriétés margin, padding et border qui amènent souvent des différences d’interprétation entre les navigateurs. Notamment entre Firefox et Internet Explorer, qui au passage est une vraie calamité pour les développeurs web...
Un peu moins utile pour les professionnels mais très pédagogique pour les novices, Firebug permet de modifier en ligne les éléments de l’arborescence d’une page web. On peut par exemple modifier le texte d’une page, supprimer un bloc, ... Ceci permet de mieux comprendre le fonctionnement du HTML. Il est aussi possible de modifier le CSS d’une page. En faisant cela, l’arborescence n’est pas modifiée, seul le rendu de la page est affecté. On peut alors modifier la couleur de fond, la taille des blocs, la police d’écriture, cacher des blocs, ... C’est assez marrant à faire et ça peut donner des idées lors de la création d’un design.
Dernière fonctionnalité, l’affichage du temps de téléchargement des éléments d’une page. Cela permet de connaître la liste de tous les fichiers téléchargés ainsi que le temps de téléchargement de chacun. La somme du temps de téléchargement de tous les fichiers forme le temps de téléchargement de la page. Même chose pour le poids des fichiers. Cela est utile pour les développeurs dans le sens où si une page est trop longue à charger, ils peuvent alors la modifier pour essayer d’améliorer ce point. Cela se résume en général à analyser la conception du design (taille des images).
Tout comme Firebug, cette barre d’outils permet de fouiner un peu partout sur une page web. L’autre avantage qu’elle possède, c’est que l’on peut désactiver certaines options du navigateur.
Cette partie ne fait pas référence aux fonctionnalités de Web Developer qui sont également dans Firebug et qui ont été précédemment décrites.
Afin d’analyser le fonctionnement d’une page, il est possible de désactiver le JavaScript, le cache, les cookies, le CSS, les images et plein d’autres petites choses... Tout le monde n’a pas le JS d’activé et les cookies autorisés. Cette fonctionnalité permet donc de tester son site dans ces conditions afin de savoir comment il va se comporter pour ces utilisateurs-ci. Désactiver le CSS et les images permet d’observer la structure de sa page et de voir comment elle va être interprétée par les moteurs de recherche. Désactiver les referers n’est pas très sympa pour les sites effectuant de l’échange de trafic avec ce système...
Un formulaire mal conçu est une source de piratage. En effet, si le code PHP qui traite les données reçues n’effectue pas toutes les vérifications nécessaires, un site peut facilement être hacké. Pour tester la robustesse de son code, WDT offre la possibilité de modifier les attributs des champs d’un formulaire (longueur maximale, afficher les mots de passes, afficher les champs cachés, ...) et même la méthode d’envoi des données (GET ou POST).
Pour finir, afin de pouvoir vérifier la validité de son code HTML, CSS ou même de son flux RSS, WDT propose un accès rapide aux différents validateurs du W3C. Un simple clic permet de passer la page courante ou ses composants au validateur.
Je me servais déjà de ses outils et je continuerai à m’en servir... Ils m’ont notamment été utiles lors de la création d’un site pour un projet de DUT. Ce projet a depuis été mis en ligne et été amélioré par mes soins: Velo Ville