Quick Win: Time Logging mit Firebug

Wie der Titel schon verrät, handelt es sich hier um einen einfachen Codeschnipsel zum Tracken von Ausführungszeiten. Dazu bietet Firebug zwei Varianten: Zum einen das einfache console.time, welches die Ausführungszeit vom Aufruf bis zum Ende der Funktion misst, und als Summe in einem Wert ausgibt. Zum anderen das komplexer gebündelte console.profile, welches ich bevorzuge. Es gibt zusätzlich noch Aufschluss darüber, wie viele Funktionen ausgeführt wurden und wie lange.

console.profile

In meiner Demo, wird eine vom Nutzer definierte Anzahl von Zufallszahlen zwischen 0-10 in ein Array geschrieben und anschließend ausgegeben:

console.profile('foobar');

// do something
// ***************

console.profileEnd('foobar');

BTW: Ich habe die Eingabe auf 6 Stellen begrenzt, damit das Skript nicht den Browser lahm legt. Es sei so viel gesagt: Die Eingabe von 999999 ist schon etwas für die Mutigen unter uns ;)

Um dies sehen zu können, benötigt man einen Browser, welcher mit Firebug ausgestattet ist.
Firebug muss beim Aufruf der Demo bereits laufen und wenn alles gut gegangen ist, müsste im Console-Tab folgendes erscheinen:

console.time

Ganz ähnlich aufgebaut ist die kleine Schwester, welche die Ausführungszeiten addiert und als Info in der Console ausgibt.
Sie eignet sich besonders für das Measurement von größeren Abschnitten des DOMs.

console.time('foobar');

// do something
// ***************

console.timeEnd('foobar');

Das sieht dann so aus:

Fazit

Im Falle von Refactorings kann das Profiling mit Firebug von erheblichen Vorteil sein. Es vereinfacht den A/B-Test von Funktionen oder ganzen Stacks. Zusätzlich weißt es mich auch darauf hin, wenn Funktionen mehrfach ausgeführt wurden.

Fantastique!