Console API - Die Devtools Konsole effektiver nutzen.

Die Konsole in den DevTools ist ein Ort an dem man als Frontend Entwickler viel Zeit verbringt. Und die meisten von uns nutzen oft console.log um schnell den Wert einer Variable auszugeben oder um zu schauen ob etwas auch aufgerufen wird. Aber log ist nur ein Teil der Console API, diese bietet nämlich noch einige weitere Möglichkeiten.

Ein Codepen mit allen Beispielen gibt es hier.

Good old console.log();

Das hier kennt man und liebt man. Es gibt einen String oder den Wert einer Variable zurück. Nicht mehr und nicht weniger, dafür aber sehr vielseitig.

console.log('Irgendein String');
console.log(variable);

Console Ausgaben leeren

// ohne viele Worte
console.clear();

Interpolated

Es ist möglich Teile eines Strings zu ersetzen. Die bekannteste Möglichkeit ist wahrscheinlich:

const hisname = "Robert Paulson";
console.log('His name is ' + hisname + '!');

Das funktioniert, ist aber etwas sperrig. Warum nicht folgendes:

const hisname = "Robert Paulson";
console.log('His name is %s!', hisname);

Dasselbe Ergebnis, aber etwas handlicher. Das %s wandelt hierbei den Wert der Variable als String um. Dies nennt sich format specifier, und neben %s gibt es noch eine Handvoll weiterer formater.

Übrigens, ein anderer Weg bietet hier etwas aus der EcmaScript6 Spezifikation - Mit Template Strings kann es auch so aussehen:

const hisname = "Robert Paulson";
console.log(`His name is ${hisname}`);

Logging with Style

Manchmal will man sicher gehen, dass Ausgaben nicht zu übersehen sind oder man will einfach nur mal etwas fancy sein. Hier hilft es ein %c Specifier vor dem entsprechenden Ausgabeteil zu setzen. Anschließend können ein paar CSS Anweisungen als Parameter angehängt werden.

//Styled
console.log('%c His name is Robert Paulson❗️', 
    'font-size: 25px; color: white; background: blue; margin: 20px');
console.log('His name is %c Robert Paulson', 
    'font-size: 30px; background: black; color: green');

Die Ausgabe sieht folgendermaßen aus.

Meine Farbwahl ist sicherlich fraglich.

Warnungen, Fehler und Infos

Es muss nicht immer ein log sein. Für bestimmte Ausgaben gibt es auch die Möglichkeit entsprechende Formate zu wählen. Dies sind Warnungen, Fehler und Infos.

// warnings
console.warn("This is your life and it's ending one minute at a time.");
// Error
console.error('If I did have a tumor, I\'d name it Marla.');
// Information
console.info('When you have insomnia, you\'re never really asleep... and you\'re never really awake.');
console.warn, console.error und console.info - Ich danke nochmal Chuck Palahniuk / David Fincher für die Fight Club Zitate.

Assertions

Ok, gestylte Ausgaben, Warnungen und Fehler kennst du schon. Aber wusstest du dass du mit assert schnell Code testen kannst? Ein Anwendungszweck wäre sicherlich das Sparen einer sonst zusätzlichen if Abfrage.

// Simple Assertion
const isTylerHere = false
console.assert( isTylerHere, 'Tyler\'s not here. Tyler went away. Tyler\'s gone.');

// Assertion in a function
function greaterThan(a,b) {
    console.assert(a > b, {"message":"a is not greater than b","a":a,"b":b});
}
greaterThan(5,6);

Mit dem Ergebnis:

console.assert Output

DOM Elemente

Dass es möglich ist Dom Elemente auszugeben ist sicherlich kein Geheimnis. Sollte man aber mehr Informationen über ein DOM Element brauchen, kann man mit console.dir alle Methoden und Properties ausgeben lassen.

// Dom Elements
const quote = document.querySelector('blockquote');
console.log(quote);
console.dir(quote);

Ergebnis:

Teilweiser Output mit console.dir

Grouping

Bei einer Fehlersuche kann eine Ausgabe mit Logs schonmal ausarten. Die Console API gibt die Möglichkeit Ausgaben zu gruppieren und diese einzeln ein- und auszuklappen.
Für mein Beispiel hab ich mal ein Array mit Objekten befüllt und lasse diese einzeln ausgeben. Mit .group() / .groupCollapsed() wird eine Gruppe gestartet und kann auch mit einem Label versehen werden. Beendet wird die Gruppe mit .groupEnd().

// table
const actors = [
   {name: 'Edward Norton', role: 'The Narrator', type:'real'},
   {name: 'Brad Pitt', role: 'Tyler Durden', type:'not real'},
   {name: 'Meat Loaf', role: 'Robert Paulson', type:'real'},
   {name: 'Helena Bonham Carter', role: 'Marla Singer', type:'real'},
];

// grouping
actors.forEach( actor => {
   // show uncollapsed
   // console.group(actor.name);
   // collapsed
   console.groupCollapsed(actor.name);
   console.info(`${actor.name} is ${actor.role}`);
   console.info(`${actor.role} is ${actor.type}`);
   console.groupEnd();
});
console.group bündelt Ausgaben.

Counting

Mit console.count lassen sich Konsolenausgaben mit gleichen Inhalt zählen.

// counting
console.count(actors[0].name)
console.count(actors[0].name)
console.count(actors[1].name)
console.count(actors[3].name)
console.count(actors[0].name)
console.count(actors[3].name)
console.count(actors[3].name)
console.count(actors[0].name)

In diesem Beispiel gebe ich drei verschiedene Strings unterschiedlich oft aus. Wie man sieht werden nur gleiche Ausgaben gezählt.

console.count zählt gleiche Ausgaben

Tabelle

Mit console.table lassen sich Arrays als Tabelle ausgeben.

console.table( actors );
console.table gibt gleichartige Array Objekte als Tabelle aus.

Weitere Informationen finden sich hier.

Timings

Will man wissen wie lange etwas braucht, kann man mit console.time eine Zeitmessung starten. Hierbei wird der zu messende Bereich mit console.time bzw. console.timeEnd umfasst. Ein beschreibendes Label kann hier noch als Parameter mitgegeben werden.

// timings
console.time('Fetching Quotes');
const quotes = fetch('https://raw.githubusercontent.com/Soarez/fight-club-quotes/master/index.json');
const fcQuotes = [];
quotes
   .then( data => data.json())
   .then( data => fcQuotes.push(...data))
   .then(data => console.info(fcQuotes[3]));
console.timeEnd('Fetching Quotes');

In dem Beispiel hole ich eine JSON Datei mit Zitaten und verarbeite sie mit einen Promise. Mit console.time starte ich die Messung und mit console.timeEnd beende ich sie und gebe die Daten aus.

console.timing Beispiel

War es das?

Es gibt noch viel mehr Möglichkeiten, die Dokumentation von Google und Mozilla sind da sehr ergiebig. So kann man tracen, timestamps erstellen oder auch Daten als XML zurückgeben lassen. Aber darauf gehe ich vielleicht mal in einen separaten Teil ein.

Ich denke, dass viele dieser Ausgaben im Entwickler Alltag mehr als nützlich sind. Viele Funktionen baut man meist mit komplexeren Operatoren und einer Vielzahl an einzelnen console.log() Eingaben nach.

Wer das ganze nocheinmal live sehen möchte, hier habe ich eine Codepen Demo vorbereitet.

Achja!

Artikel wie diese sind sehr viel Arbeit und freue mich über jedes Feedback. Sollte euch der Artikel gefallen haben, schreibt per Mail oder auf Twitter und abonniert meinen YouTube Channel! Vorallem Feedback zu dem Video ist sehr willkommen.