Quick tip: Bien utiliser Firebug pour optimiser et débugger son site

Firebug est incontestablement l’outil indispensable pour tout développement web (si bien entendu, on utilise Firefox). Mais utilisez-vous toutes ses fonctionnalités ?

Je vous propose aujourd’hui de regarder de plus près la console de Firebug.

La console affiche toutes sortes d’informations utiles pour une page donnée qui peuvent être utilisées à différentes fins. Firebug n’étant disponible que sur Firefox, pensez à bien vérifier que la console peut être activée :

if (this.console && typeof console.log != "undefined")

Debuggage

Il est bien pratique d’ajouter un mode debug (comme l’option debugMode de jDiaporama) pour logger des actions et debugger une application javascript par exemple.

Grâce à la console de Firebug, nous disposons de différents outils pour bien gérer l’avancement d’un projet:

• Simple information (info)
• Avertissement (warn)
• Erreur (error)

Optimisation

Un autre outil bien pratique pour optimiser son code est la fonction console.time() qui fonctionne comme suit:

console.time("maBoucle");
for(i=0; i<1000; i++)
{
	document.write("test");
}
console.timeEnd("maBoucle");

Et qui donne comme résultat :

On peut ainsi facilement se rendre compte du temps d’éxécution de chaque fonction et voir le gain de temps procuré par les différentes optimisations du code.

A vos consoles, prêts ? partez !