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

Publié par Gui dans Développement, Tips

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)

Utilisation de la console de firebug pour optimiser et débugger son site

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 :

Temps de réponse du script

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 !

1 commentaire

  1. Xavier Artot

    Bonjour,
    J’ai essayé sur ce plugin :
    http://xavier-artot.com/blog/?p=142

    $(document).ready(function() {
    console.time(« dnd »);
    $(‘#drop’).dnd({
    dragBox:’#dragBox’
    });
    console.timeEnd(« dnd »);

    });

    Cela ne fonctionne pas

Laisser une réponse


Post shadow