console.log stylen

console.log gestyled

In einem Artikel von David Walsh habe ich neulich gesehen, dass man console Aufrufe stylen kann. Gerade beim debuggen ist das sicher nicht unpraktisch, beispielsweise wenn man gewisse Logs hervorheben möchte.

console.log stylen

Anstatt einfach nur die Nachricht zu übergeben, übergibt man zwei zusätzliche Parameter. Zuerst die Formatierungs-Strings für die nächsten beiden Parameter (%c für das CSS und %s bzw. %o für die Nachricht), dann die CSS Eigenschaften und schließlich was geloggt werden soll.

console.log("%c%s", "background: #123456; color: #fff; font-size: 24px", "Ziemlich abgefahren!")

Das geht natürlich auch mit Arrays und sonstigen anderen Arten von Objekten. %s eignet sich besser für Strings und %o für Arrays und Objekte.

console.log("%c%o", "border: 2px dotted red; padding: 5px; font-size: 18px", [2, 3, "test"])

Anhand des zweiten Beispiels sieht man ganz gut, dass die Konsolen der einzelnen Browser die Ausgaben unterschiedlich formatieren. Der Rahmen wird in Firefox schön dargestellt, in Chrome nicht so richtig.

Damit man nicht jedes Mal alle Eigenschaften abtippen muss, kann man eine eigene Funktion schreiben oder sich beispielsweise auch so aushelfen.

var logs = {
    o: "%c%o",
    s: "%c%s",
    error: "background: #f00; color: #fff; padding: 3px; font-size: 20px",
    info: "background: #3033E8; color: #fff; padding: 3px; font-size: 20px"
}

console.log(logs.s, logs.info, "Viel besser!");

Beispiele für gestylte Logs

Ein paar Beispiele findet man, wenn man in diesem Artikel die DevTools öffnet und sich die Konsole ansieht oder auch in der Konsole auf Google+.

log, warn, error, info und table

An dieser Stelle möchte ich darauf hinweisen, dass es neben console.log() auch noch andere Möglichkeiten gibt, etwas zu loggen (Egal ob mit oder ohne zusätzlichem Styling).

console.warn("%c%s", "background: #E8CD34; color: #fff; padding: 3px; font-size: 20px", "Warnung!")
console.error("%c%s", "background: #f00; color: #fff; padding: 3px; font-size: 20px", "Fehler!")
console.info("%c%s", "background: #3033E8; color: #fff; padding: 3px; font-size: 20px", "Info!")
console.table([[1, 2, "test"]])

console.table() kann man zwar nicht stylen, aber es ist trotzdem sehr praktisch.

Mehr dazu gibt es auf MDN

Manuel Matuzovic

Frontend Developer aus Wien.

Schreibe einen Kommentar

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