In meiner Freizeit programmiere ich viel mit JavaScript und da gehört Loggen zum Einmaleins.

Ich denke jeder kann da also etwas mit console.log("") anfangen. Man kann es aber auch effizienter nutzen:

Objekte

Man hat vielleicht ein Account Objekt und dieses besitzt einige Argumente:

const account = { id: 1, username: 'johndoe', sessiontoken: '31312dada1312' }

Nun könnte man es wie folgt ausgeben:

console.log(account)

Wenn man das sehr oft macht, sieht man aber nicht die dazugehörigen Variablennamen.
So geht es also besser:

console.log({account})

Farben

Nun wird alles in der gleichen "Farbe" dargestellt. Um Errors und Warnings darzustellen, gibt es aber auch Mittel und Wege:

console.warn({account})
console.error({account})
console.debug({account})

Bei console.debug wird nichts ausgegeben, da ich nicht die richtigen Default levels gewählt hatte. Das kann man aber ganz leicht im Browser umstellen.

Gruppieren

Nun kann ein Account ja auch Referenzen haben:

  • shoppingItem enthält die ID vom Account

Damit man das im richtigen Kontext sieht, kann man es nun gruppiert darstellen:

const shoppingItem = { id: 1, name: 'Joghurt', accountId: '1' }

console.group('Account Cart');
console.log({account});
console.group('Shopping item');
console.log({shoppingItem});
console.groupEnd();
console.groupEnd();

Die Darstellung ist jetzt nicht so glücklich. Man kann aber die Einrückungen erkennen und wenn man es programmatisch macht, sieht es deutlich besser aus.

Viele Objekte und nun?

Wenn man jetzt zum Punkt kommt, dass man viele Objekte in einem Array hat, kann man das auch verbessert darstellen. Eine Tabelle kann ja bei sowas immer helfen und die Sache super übersichtlich darstellen.

const accounts = [account,account,account];
console.table(accounts);

Wieviel Zeit brauche ich für diesen Request?

Ich arbeite recht oft mit Restschnittstellen und da ist Laufzeit ein großes Thema. Niemand möchte für die Darstellung von Objekten zig Sekunden warten. Damit man aber herausbekommt, wie lange es tatsächlich dauert, gibt es einen einfachen console Befehl dafür:

console.time();
for (let i = 0; i < accounts.length; i++) {
  console.log(accounts[i]);
}
console.timeEnd();

Durch den Blogbeitrag habe ich ja nun ein wenig die Konsole gefüllt. Nun kann ich mithilfe von Chrome diese Konsole leeren lassen. Es geht aber auch programmatisch:

console.clear()

Aufräumen ist ja immer gut und hilfreich. Daher sollte man diesen Befehl auf jeden Fall mal mit einbauen.

I love mess

Quelle