Firebug est une extension Firefox pour les développeurs. Nous allons voir comment utiliser les fonctionnalité de celle ci afin de déterminer le temps d’exécution de fonction/code JavaScript.

Utilisation de le fonction Profiler

Si vous ne souhaitez connaître que le temps d’exécution de fonction complète et non une partie de code, la fonctionnalité Profiler est parfaite. L’activation se fait via la fenêtre Firebug dans l’onglet Console. Un premier clic sur Profiler va lancer la fonctionnalité. Firebug va alors calculer le temps de traitement de chaque fonction appelée. Un deuxième clic va arrêter la fonctionnalité et afficher un tableau  récapitulatif des fonctions appelées avec le nombre d’appel, le temps d’exécution global, moyen, minimum, maximum …

Utilisation de l’API de Firebug

Firebug fournit un ensemble de fonction afin d’écrire dans la console dont notamment 2 fonctions qui permet de déterminer facilement le temps d’exécution d’une partie de code JavaScript : time et timeEnd.

Ces 2 fonctions sont à placer avant et après la partie de code dont vous souhaitez connaître la durée.

function test(){
    console.time('fonctionTest');
    var sum = 0;
    for ( var i = 0; i < 100; i += 1) {
        sum += i;
    }
    console.info('somme des entiers de 1 à 100 %d', sum);
    console.timeEnd('fonctionTest');
}
test();

Autres Navigateurs

Attention, si vous laissez dans vos scripts l’appel aux fonctions de la console, les autres navigateurs généreront une erreur !!

Afin de pouvoir utiliser la console dans d’autres navigateurs, un Firebug Lite est disponible sous la forme d’un fichier JavaScript à inclure dans votre page.

A noter également une extension pour Google Chrome disponible ici.