Qu’on développe en php, C, C++ ou autres langages, un problème revient toujours, c’est le débogage. On code en général dans l’optique de n’avoir pas de coquilles mais c’est rarement le cas ou alors félicitations à celles et ceux qui y arrivent ! Une difficulté en plus dans le développement web, c’est que parfois, le code du rendu, html par exemple, qui est généré à la volée par des scripts exécutés côté serveur. C’est alors que des outils comme Firebug, qui est en l’occurrence une extension de Firefox entrent en jeu. Cette extension permet donc de déboguer du html, css, javascript. En voici quelques fonctionnalités :

• inspection et édition des éléments HTML
• tuning de css avec changement opéré à la volée
• mesures des rendus css en terme de taille
• calcul des temps de chargement de tous les éléments d’une page
• débogage et profilage de script javascript
• affichage des erreurs
• navigation dans l’arbre DOM
• exécution de javascript à la volée
• console javascript pour obtenir les erreurs, warning d’éxécution
• recherche dynamique d’élements
• …

Pour aller plus loin dans l’utilisation, suite à un twitt de Sébastien Douche, voici un billet qui a été écrit par Arley McBlain sur le blog Six revisions et s’intitule « Firebug Guide for Web Designers« . On y apprend comment mettre en oeuvre Firebug à travers des exemples simples et précis. A vous de jouer ! Pour les personnes voulant apprendre en vidéos, voici une page où vous trouverez votre bonheur !

Bon débogage !