So benutzt Du die JavaScript Console richtig!

So benutzt Du die JavaScript Console richtig!

Die JavaScript Console ist wohl allen Web Entwicklern bekannt. Wie aber nur wenige wissen, verbirgt sie viele unbekannte Funktionen. Dieser Beitrag bringt Licht ins Dunkel!

Standardmäßig nutzt man die console.log() Funktion. Diese bietet uns die Möglichkeit Strings und Integer, aber auch Arrays und Objekte auszugeben. Dabei hat das Console Objekt noch so viel mehr zu bieten.

Dabei sind nicht alle Funktion in jedem Browser verfügbar. Hier findest Du eine Liste der Browserkompatibilität.

1. Zeiten stoppen – console.time()

Diese Funktion eignet sich perfekt um zwei oder mehr Algorithmen miteinander zu vergleichen. Sie kann die Zeit der Ausführung messen. Und so sieht das an einem praktischen Beispiel aus:

console.time('example');
for (let i = 0; i < 1000000; i++) {
    document.getElementById('app').innerHTML = i;
}
console.timeEnd('example');

Hierbei bekommt die console.time('example') Funktion einen Identifier, über den wir den Timer wieder stoppen können. In diesem Beispiel läuft eine Schleife 1.000.000x durch und schreibt bei jedem Durchlauf die Zahl ins HTML. Nach der Schleife stoppen wir die Zeit über console.timeEnd('example'). Unsere Ausgabe in der Console sieht dann so aus:

Console time

2. Warnungen ausgeben – console.warn()

Gerade wenn wir eigene Libraries für JavaScript schreiben, ist es äußerst wichtig dem Nutzer mitzuteilen, wenn Fehler oder Warnmeldungen auftauchen.

Allerdings habe ich beim Schreiben dieses Artikels erfahren, dass diese Funktion nicht dem Standard entspricht und nicht für öffentliche Websites geeignet ist! Aus diesem Grund gehe ich hier nicht weiter auf die genaue Funktion ein, sondern verweise auf die Dokumentation von Mozilla, welche eine Erläuterung dazu enthält.

3. Console leeren – console.clear()

Eine kleine, aber dennoch sehr nützliche Funktion ist es, die Konsole zu leeren. Und genau das tut console.clear(). Die Funktion erwartet keine Parameter:

console.clear();

Dabei werden alle vorherigen Einträge aus der Console entfernt und diese Meldung wird angezeigt:

Console cleared

4. Gruppieren von Ausgaben – console.group()

Diese Funktion ist nützlich, wenn man verschiedene Werte strukturieren möchte. Man kann es z.B. mit Datei-Ordnern vergleichen. In der Realität ist diese Funktion für die Ausgabe von Dateien und Dateipfaden gut geeignet. Im folgenden Beispiel wird die Funktion groupEnd() verwendet um wieder eine Ebene nach oben zu gelangen. Die Funktion groupCollapsed() erstellt wie auch group() eine weitere Ebene, mit dem Unterschied, dass bei groupCollapsed() die Inhalte zugeklappt sind.

Optional kann man group() und groupCollapsed() einen Parameter mit der Überschrift der Gruppe mitgeben.

console.log('Level 0');

console.group('Group for Level 1');
console.log('Level 1');
console.log('Also Level 1');

console.group('Group for Level 2');
console.log('Level 2');
console.log('Yeah');
console.log('Oh, still you? :o');
console.groupEnd();

console.log('Back to Level 1');

console.groupCollapsed('Collapsed Level 2');
console.log('collapsed content');
console.groupEnd();

console.log('See you soon!');

Und so sieht die Ausgabe dazu aus. Die Gruppe „Collapsed Level 2“ kann man durch einen Klick aufklappen:

Console group

5. Fehlermeldungen markieren – console.error()

Die error() Funktion funktioniert ähnlich der log(), warn() oder info() Funktion. Sie kann jedes Attribut ausgeben, egal ob String, Integer, Objekt oder Array. Das besondere bei der error() Funktion ist, dass diese durch farbliche Hinterlegung und ein x-Icon hervorgehoben wird. Gerade für Fehlermeldungen bei eigenen Libraries, aber auch bei eigenen Funktionen sollte diese Funktion zum Einsatz kommen.

console.error('This is an fatal error!');

Ergibt folgende Ausgabe:

Console error

Die verschiedenen Ausgabemöglichkeiten der Funktion (Parameterschreibweise) werden im nächsten Punkt näher beschrieben.

6. Attribute ausgeben – console.log() & console.info()

Last, but not least die bekanntesten Console Funktionen. Diese Funktionen geben Attribute in der Konsole aus. Folgende Beispiele beziehen sich auch auf die warn() und error() Funktionen:

Es gibt zwei verschiedene Syntaxen diese Funktionen aufzurufen:

console.log(obj1 [, obj2, ..., objN]);
console.log(msg [, subst1, ..., substN]);

Zum einen kann man verschiedene Objekte übergeben, welche einfach nacheinander ausgegeben werden:

const obj1 = {
    name: 'Peter Parker',
    username: 'i_am_a_spider'
};
const obj2 = {
    name: 'Tony Stark',
    username: 'jarvis'
};
const obj3 = Math.PI;
console.log(obj1, obj2, obj3);

Dieser Code ergibt diese Ausgabe:

Console log - mehrere Parameter

In der zweiten Variante kann man Substitution Strings (Ersatzwerte) einsetzen. Dabei wird %o und %O zu einem Objekt, %d und %i zu einem Integer, %s zu einem String und %f zu einem Float. In der Praxis sieht das so aus:

const obj1 = {
    name: 'Peter Parker',
    username: 'i_am_a_spider'
};
console.log('This is object is between to sentences. Here: %O. And I think that is really cool!', obj1);

console.log('This is a very, very big integer: %d', 42);

console.log('This is %s. And I am %s!', 'Me', 'a web developer');

console.log('This is a nice float: %f', Math.PI);

Die Ausgaben sehen dann so aus. Im ersten Beispiel lässt sich das Objekt aufklappen und alle Attribute einsehen.

Console Schreibweisen

Hast Du diese Funktionen gekannt oder kennst Du noch weitere Hilfreiche? Dann schreibe sie gern in die Kommentare! 🙂

Quelle: MDN web docs – Console

Hier gibt’s noch mehr zum Thema JavaScript:

Beteilige dich an der Unterhaltung

2 Kommentare

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.