Console Commands Guide

Die Entwicklerkonsole ist seit vielen Jahren in Webbrowsern in der einen oder anderen Form verfügbar. Ursprünglich als Mittel zur Meldung von Fehlern an den Entwickler gedacht, wurden ihre Fähigkeiten auf vielfältige Weise erweitert; z. B. durch die automatische Protokollierung von Informationen wie Netzwerkanfragen, Netzwerkauswertungen, Sicherheitsfehlern oder Warnungen.

Es gibt auch eine Möglichkeit für den JavaScript-Code einer Website, verschiedene Befehle auszulösen, die zur Fehlersuche in die Konsole ausgegeben werden. Diese Befehle sind in einem Konsolenobjekt enthalten, das in fast jedem Browser verfügbar ist. Auch wenn diese Funktionen zwischen den Browsern weitgehend konsistent sind, gibt es einige Unterschiede. Einige dieser Unterschiede sind rein visueller Natur, während andere leichte funktionale Unterschiede aufweisen, die man beachten sollte.

Für Neugierige gibt es hier die Spezifikation von WHATWG, verlinkt aus der MDN-Konsolen-Dokumentation.

Diese Anleitung behandelt die Funktionen des Konsolenobjekts in Firefox und Chrome, da dies oft die beliebtesten Browser für die Entwicklung sind und sie einige Unterschiede in verschiedenen Aspekten der Konsole aufweisen. Der neue Edge auf Chromium-Basis ist in vielerlei Hinsicht im Wesentlichen derselbe wie Chrome, sodass die Konsolenbefehle in den meisten Fällen weitgehend gleich funktionieren werden.

Schnellzugriff

• Protokollierung
• Löschen
• Gängige Befehle
• Zeichenkettenersetzung
• Formatierung der Ausgabe
• Assertions
• Zähl-Befehle
• Auflisten von Eigenschaften
• Gruppenbefehle
• Tabellenbefehl
• Zeitbefehle
• Anzeigen von Spuren
• Debugger-Befehl
• Konsolen-Dienstprogramme

---

Der Befehl console.log

Das Erste, was wir tun können, ist, das Konsolenobjekt selbst zu protokollieren, um zu sehen, was Ihr bevorzugter Browser tatsächlich bietet.

console.log(console);

Dieser Befehl gibt die verschiedenen Eigenschaften des Konsolenobjekts aus, wie der Browser sie kennt. Die meisten davon sind Funktionen und werden unabhängig vom Browser ziemlich konsistent sein. Wenn es Unterschiede in den Eigenschaften des Konsolenobjekts von einem Browser zum anderen gibt, können Sie die Unterschiede so erkennen. Ein solcher Unterschied, den ich zwischen Firefox und Chrome hervorheben kann, ist, dass Chrome eine „memory“-Eigenschaft bietet, die grundlegende Speicherverbrauchswerte ausgibt. Firefox bietet diese Eigenschaft nicht und hat stattdessen eine „name“-Eigenschaft, die Chrome nicht hat.

Glücklicherweise sind die meisten Unterschiede zwischen den Browsern eher trivial. So können Sie ziemlich sicher sein, dass Ihr Code unabhängig vom verwendeten Browser weitgehend gleich ausgegeben wird.

Zuerst einmal: clear()

Bei intensiver Nutzung der Konsole kommt es zu einer sehr überladenen Textausgabe. Manchmal möchten Sie einfach alles löschen und mit einer neuen Konsole beginnen. Browser bieten normalerweise eine Schaltfläche in den DevTools, die diese Aufgabe ausführt. Das Konsolenobjekt selbst bietet jedoch auch einen Befehl zur Bewältigung dieser Aufgabe

console.clear();

Dies löscht die Konsole und informiert Sie hilfreich darüber, indem eine Meldung wie "Konsole wurde gelöscht" ausgegeben wird.

Gängige Verwendung: debug(), error(), info(), log() und warn()

Es gibt fünf Befehle, die auf den ersten Blick dasselbe zu tun scheinen. Und technisch gesehen tun sie das auch. Aber Browser bieten zusätzliche Funktionen, die mit den fünf Befehlen verknüpft sind, um jedem einen eigenen, deutlichen Nutzen zu geben.

Diese fünf Befehle sind

console.debug();
console.error();
console.info();
console.log();
console.warn();

Ich bin sicher, viele von Ihnen haben console.log() schon einmal gesehen (ich meine, wir haben gerade oben darüber gesprochen) und haben es wahrscheinlich auch schon benutzt. Bevor wir uns ansehen, was wir in diesen fünf Befehlen protokollieren können, sehen wir uns unseren ersten geringfügigen Unterschied zwischen Chrome und Firefox an.

Dies ist ein Beispiel in Chrome, bei dem jeder Befehl eine Zeichenkette ausgibt, wie z. B. console.debug('console.debug()');.  Beachten Sie, dass einige von ihnen eine Farbbehandlung aufweisen, um eine visuelle Anzeige der Art der Ausgabe zu geben. Die Fehler- und Warnmeldungen weisen ein zusätzliches Symbol zur noch einfacheren Identifizierung auf.

Hier ist dieselbe Liste in Firefox und, obwohl sie ähnlich aussieht, gibt es drei geringfügige Unterschiede. Zum Beispiel ist console.debug() nicht farblich kodiert und console.info() hat ein zusätzliches Symbol daneben. In Chrome können sowohl console.error() als auch console.warn() erweitert werden, um zusätzliche Informationen über die Ausgabe anzuzeigen, während Firefox dies nur mit console.error() tut. Diese zusätzlichen Informationen liefern eine Spur der beteiligten Codezeilen, um zu der Stelle zu gelangen, an der der jeweilige Befehl aufgerufen wurde.

Eine nützliche Sache an diesen fünf Befehlen ist, dass die Browser Filteroptionen bieten, um jeden Typ nach Wunsch ein- oder auszublenden. Firefox hat sie direkt oben in der Konsole über der Ausgabe, während Chrome sie in einem Dropdown-Menü mit der Bezeichnung "Alle Ebenen" versteckt, das Sie im früheren Chrome-Konsolen-Screenshot sehen können. "Alle Ebenen" ist dort, weil ich alle fünf so eingestellt habe, dass sie angezeigt werden. Wenn Sie die Option "Standard" wählen, wird die Debug-Ausgabe (als "Ausführlich" aufgeführt) ausgeblendet, während die anderen angezeigt werden. Durch Deaktivieren von "Info", "Warnungen" oder "Fehler" ändert sich der Titel des Dropdown-Menüs in "Benutzerdefinierte Ebenen" oder "Nur Fehler", je nachdem, was ausgewählt ist.

Die Absichten für die Verwendung von Fehler und Warnung sind leicht zu bestimmen; wie die anderen Optionen verwendet werden, liegt bei Ihnen. Wenn Sie die verschiedenen Optionen ausgiebig nutzen, könnten Sie erwägen, die Erwartungen jeder Option zu dokumentieren, um Dinge spät im Projekt nicht zu verwirren – insbesondere wenn es sich um ein Teamprojekt handelt.

Nun wollen wir besprechen, was wir tatsächlich in diesen Befehlen protokollieren können. Da sie sich alle gleich verhalten, werde ich mich als Beispiel nur auf die Protokollierung konzentrieren.

Die einfachsten Beispiele beinhalten nur das Übergeben einer Zeichenkette, Zahl, eines Objekts oder eines Arrays an den Protokollbefehl. Technisch gesehen kann jeder Datentyp von JavaScript verwendet werden, aber bei den meisten von ihnen ist die Ausgabe weitgehend dieselbe.

console.log('string');
console.log(42);
console.log({object: 'object'});
console.log(['array', 'array']);

Ich zeige diese Beispiele in Chrome mit dem bereits erweiterten Objekt und Array. Sie sind normalerweise eingeklappt, aber die Ausgabe neben dem Pfeil ist zwischen beiden Zuständen konsistent. Firefox zeigt dies ein wenig anders an, aber im Großen und Ganzen ist die Ausgabe dieselbe. Firefox teilt Ihnen mit, ob es ein Objekt oder ein Array anzeigt, bevor es erweitert wird, zeigt aber dasselbe wie Chrome im erweiterten Zustand.

Eine interessante Ergänzung ist, dass Sie mehr als ein Element als Parameter an den Protokollbefehl übergeben können und es wird sie inline anzeigen.

console.log('string', 'string');
console.log(42, 1138);
console.log({object: 'object'}, {object: 'object'});
console.log(['array', 'array'], ['array', 'array']);

Oft, wenn ich mit x- und y-Koordinaten arbeite, wie sie von Mausereignissen ausgegeben werden können, ist es nützlich, die beiden zusammen in einer Anweisung zu protokollieren.

Zeichenkettenersetzung

Die verschiedenen Konsolenprotokollbefehle bieten eine Zeichenkettenersetzung, die das Einfügen verschiedener Werte in die Zeichenkette zur Ausgabe ermöglicht. Dies ist nützlich, um eine Variable im Protokoll zu beschreiben und so klarzustellen, was gemeldet wird.

console.log('This is a string: %s', 'string');
console.log('This is a number: %i', 42);
console.log('This is an object: %o', {object: 'object'});

Hier ist eine Liste der Datentypen, die in die Ausgabestrings ersetzt werden können

Datentyp	Ersetzungssymbol
Objekte und Arrays	%o oder %O
Ganzzahlen	%d oder %i
Zeichenketten	%s
Gleitkommazahlen	%f

Der erste Parameter wäre der auszugebende String mit den Symbolen an den entsprechenden Stellen. Dann ist jeder weitere Parameter der Wert, der in den String des ersten Parameters eingesetzt werden soll. Beachten Sie, dass Sie die Ersetzungstypen und die Parameter in der richtigen Reihenfolge beibehalten müssen, sonst erhalten Sie unerwartete Ergebnisse.

Wenn Ihre Konsole Template-Literale unterstützt, ist es etwas einfacher, ähnliche Ergebnisse wie bei der Zeichenkettenersetzung zu erzielen.

console.log(`This is a string: ${'string'}`);
console.log(`This is a number: ${42}`);
console.log(`This is an object: ${{object: 'object'}}`);

Beachten Sie, dass das Objekt bei der Zeichenkettenersetzung etwas besser behandelt wird. Wählen Sie also die passende Option für Ihre Anforderungen. Da es möglich ist, mehr als einen Wert in die Ausgabe einzufügen, vergleichen wir die beiden.

console.log('This is a string: %s. This is a number: %i', 'string', 42);
console.log(`This is a string: ${'string'}. This is a number: ${42}`);

Bei der Zeichenkettenersetzung wird jeder Wert als Parameter hinzugefügt, der in die Ausgabe eingefügt wird. Bei Template-Literalen hingegen fügt man sie dort ein, wo sie in der Ausgabe erscheinen sollen. Sie können sie auch kombinieren.

console.log(`This is a number: ${42}. This is an object: %o`, {object: 'object'});

Es gibt also viele Optionen zur Auswahl, sodass Sie die besten Optionen für Ihre Bedürfnisse wählen können. 

Formatierung der Ausgabe

Eine weitere potenziell nützliche und unterhaltsame Sache ist, dass Sie CSS-Stile auf die Konsolenausgabe anwenden können. Es funktioniert genauso wie die Zeichenkettenersetzungsmethode, bei der Sie eine %c-Variable einfügen, damit die Stile aus den Parametern angewendet werden.

Hier ist ein einfaches Beispiel

console.log('%cThis is large red text', 'color: red; font-size: 30px;');

Dieses Mal gibt es einen leichten Unterschied in der Firefox-Ausgabe

Nicht wirklich ein großer Unterschied, aber etwas, das man im Hinterkopf behalten sollte.

Was im Wesentlichen passiert, ist, dass %c die Zeichenketten in den Parametern liest, um zu bestimmen, welche Formatierung angewendet werden soll. Wenn also ein zweites Styling übergeben wird, geht %c zum nächsten Parameter über, ähnlich wie bei der Zeichenkettenersetzung. Eine leere Zeichenkette in der Parameterliste setzt die Formatierung auf den Standard zurück.

console.log('This is %cred text %cand this is %cgreen text.', 'color: red;', '', 'color: green;');

Die verfügbaren Styling-Eigenschaften sind im Vergleich zum typischen CSS-Styling auf einer Webseite recht begrenzt. Man kann es als eine Art Inline-Textblock betrachten, der es ermöglicht, eine begrenzte Anzahl von Styling-Eigenschaften zu manipulieren.

Mit etwas Arbeit und Experimentieren könnten Sie interessante Meldungen in der Konsole erstellen. Eine Idee ist, einer bestimmten Protokollmeldung, insbesondere einer Art Fehler, besondere Aufmerksamkeit zu schenken.

console.log('%cHello there!', `
  background: white;
  border: 3px solid red;
  color: red;
  font-size: 50px;
  margin: 40px;
  padding: 20px;
`);

In diesem Beispiel sehen wir, dass das CSS etwas ausführlich ist, aber wir können etwas tun, um das Klassensystem nachzuahmen, das wir in CSS nutzen. Die Werte jedes Parameters für das Styling können in Variablen gespeichert werden, um eine wiederholte Verwendung zu ermöglichen, ohne die Stilzeichenkette in jedem Parameter duplizieren zu müssen.

const clearStyles = '';
const largeText = 'font-size: 20px;';
const yellowText = 'color: yellow;';
const largeRedText = 'font-size: 20px; color: red;';
const largeGreenText = 'font-size: 20px; color: green;';


console.log(`This is %clarge red text.
%cThis is %clarge green text.
%cThis is %clarge yellow text.`,
  largeRedText,
  clearStyles,
  largeGreenText,
  clearStyles,
  largeText + yellowText
);

Hier passieren mehrere Dinge, lassen Sie uns das ein wenig aufschlüsseln. Erstens haben wir eine Sammlung von Variablen, die unsere Stilzeichenketten enthalten. Betrachten Sie jede als eine Art Klasse, die in den Parametern des Konsolenprotokolls wiederverwendet werden kann.

Wir verwenden auch ein Template-Literal in der Protokollierung, was bedeutet, dass wir Zeilenumbrüche in unserer Ausgabe haben können. Dann gibt es für jedes %c im Text einen entsprechenden Variableneinsatz in einem Parameter, um die Stile für diesen bestimmten Teil des Ausgabetextes zu definieren. Zusätzlich zu jeder Variable, die Styling enthält, gibt es auch ein clearStyles-Argument, das verwendet werden kann, um Stile zurückzusetzen und sich auf den nächsten Satz von Stilen vorzubereiten. Man könnte einfach eine leere Zeichenkette wie in den vorherigen Beispielen verwenden, aber ich mag die klare Absicht, die vom Variablennamen ausgeht. Der letzte Parameter zeigt, dass die Variablen kombiniert werden können, was mehr Möglichkeiten zur Handhabung der Stile eröffnet.

Nun, das ist eine ganze Menge Text, der im Wesentlichen fünf Konsolenbefehle abdeckt, die nur Text in die Konsole ausgeben. Lassen Sie uns also zu anderen Befehlen des Konsolenobjekts übergehen. Obwohl einige dieser Befehle viele der bisher beschriebenen Funktionen nutzen können, werden wir uns bei den folgenden Befehlen nicht so sehr auf diesen Aspekt konzentrieren.

Selbstbewusst sein: assert()

Der Befehl console.assert() ist dem zuvor erwähnten Fehlerbefehl ähnlich. Der Unterschied ist, dass das Assertieren die Verwendung einer booleschen Bedingung ermöglicht, um zu bestimmen, ob der Text in die Konsole ausgegeben werden soll.

Zum Beispiel, sagen wir, Sie möchten den Wert einer Variablen testen und sicherstellen, dass er nicht größer als eine bestimmte Zahl ist. Wenn die Variable kleiner als diese Zahl ist und die Bedingung zu wahr ausgewertet wird, tut der Assert-Befehl nichts. Wenn die Bedingung zu falsch ausgewertet wird, wird der Ausgabetext angezeigt. Auf diese Weise müssen Sie keinen console.error()-Befehl mit einer if-Anweisung umschließen, um zu bestimmen, ob die Fehlermeldung überhaupt benötigt wird.

let value = 10;
console.assert(value <= 7, 'The value is greater than 7.');

Wir sehen, dass Assert das gleiche Aussehen hat wie der Fehlerbefehl, mit dem Unterschied, dass es auch "Assertion fehlgeschlagen:" vor den Ausgabetext stellt. Chrome kann diese Ausgabe auch erweitern, um eine Spur anzuzeigen, woher die Assertion stammt.

Die Spur kann bei gängigen Mustern von Funktionen innerhalb von Funktionen, die andere Funktionen aufrufen usw. sehr hilfreich sein. Obwohl Sie im obigen Beispiel sehen können, dass die Zeile, aus der der Assert stammt, Ihnen nicht sagt, wie der Code zu dieser Zeile gelangt ist.

let value = 10;


function function_one () {
  function_two();
}


function function_two () {
  function_three();
}


function function_three() {
  console.assert(value < 7, 'This was false.');
}


function_one();

Diese Sequenz ist tatsächlich in umgekehrter Reihenfolge in Bezug auf den Code. Die letzte Zeile zeigt einen anonymen Eintrag (in diesem Fall ein HTML-Skript-Tag) in Zeile 78. Dort wurde function_one aufgerufen. Innerhalb dieser Funktion gibt es einen Aufruf für function_two, die wiederum function_three aufruft. Innerhalb dieser letzten Funktion befindet sich der Assert. In dieser Entwicklungswelt von Funktionen, die sich gegenseitig aufrufen, ist eine Beschreibung des Pfades bis zu diesem Punkt des Assert recht praktisch.

Leider wird diese Spur in Firefox mit dem Assert-Befehl nicht bereitgestellt, wie es bei dem Fehlerbefehl der Fall ist.

Den Überblick behalten: count() und countReset()

Haben Sie sich jemals gefragt, wie oft eine bestimmte Sache in Ihrem Code passiert? Zum Beispiel, wie oft wird eine bestimmte Funktion während einer Ereignissequenz aufgerufen? Hier kann der Befehl console.count() helfen.

Für sich genommen ist der Zähl-Befehl eher einfach und hat nur begrenzte Verwendung. Wenn Sie den Befehl in seinem Standardzustand verwenden, erhalten Sie nur eine einfache Zählung. Wenn wir ihn zum Beispiel dreimal hintereinander aufrufen, erhalten wir eine sequentielle Zählung.

console.count();
console.count();
console.count();

Wie Sie sehen, erhalten wir eine einfache Zählung von eins bis drei. Das Standardverhalten bedeutet, dass die Zählung bei jedem Durchlauf lediglich um eins inkrementiert wird, egal wo sie im Code auftaucht. Sie erhalten zwar die Zeilennummer im Code, wo es passiert ist, aber die Zählung ist eine einfache Gesamtsumme, unabhängig von der Situation.

Um diesen Befehl etwas nützlicher zu machen, können wir ein Label angeben, um eine separate Zählung für dieses Label zu führen.

console.count('label A');
console.count('label B');
console.count('label A');
console.count('label B');
console.count('label A');
console.count('label B');

Obwohl die Verwendung des Zähl-Befehls mit Labels dazu führt, dass die Ausgabe zwischen den Labels wechselt, behält jedes seine eigene Zählung. Ein Szenario, in dem dies nützlich ist, ist die Platzierung eines Zählers innerhalb einer Funktion, sodass bei jedem Aufruf dieser Funktion die Zählung inkrementiert wird. Die Label-Option ermöglicht es, für einzelne Funktionen eine Zählung zu führen, um einen guten Überblick darüber zu geben, wie oft jede Funktion aufgerufen wird. Das ist großartig für die Fehlerbehebung bei Performance-Engpässen oder einfach nur, um zu sehen, wie viel Arbeit eine Seite leistet.

Es gibt eine Möglichkeit, die Zählung zurückzusetzen. Nehmen wir an, wir haben eine Schleife, die mehrmals aufgerufen wird, aber die Anzahl der Iterationen der Schleife kann dynamisch sein. Dies geschieht mit dem Befehl console.countReset() mit demselben Label wie beim Zähl-Befehl.

console.count();
console.count();
console.countReset();
console.count();


console.count('this is a label');
console.count('this is a label');
console.countReset('this is a label');
console.count('this is a label');

Jede Zählung – mit und ohne Label – wird zweimal aufgerufen, und console.countReset() wird direkt vor einer weiteren Zählinstanz angewendet. Sie können sehen, dass Chrome bis zwei zählt, dann neu startet, wenn es auf countReset stößt. In den DevTools gibt es keine Anzeige, dass das Zurücksetzen stattgefunden hat, daher wird angenommen, dass es geschehen ist, weil die Zählung von vorne begonnen hat.

Und doch ist derselbe Code in Firefox etwas anders.

Hier wird das Zurücksetzen durch die Zählung, die bis auf null zurückgesetzt wird, angezeigt. Das ist der Indikator dafür, dass der Reset aufgerufen wurde, während wir in Chrome keine solche Anzeige haben.

Bei den Label-Optionen kann fast alles verwendet werden. Ich vermute, eine einfache Art, es zu beschreiben, ist, dass wenn man etwas übergibt, das zu einer Zeichenkette aufgelöst werden kann, es wahrscheinlich als Label funktioniert. Man könnte sogar eine Variable verwenden, deren Werte sich im Laufe der Zeit ändern, wobei count den aktuellen Wert der Variablen jedes Mal als Label verwendet, wenn sie angetroffen wird. So könnte man die Werte im Laufe der Zeit zählen.

Beschreiben Sie dieses Ding: dir() und dirxml()

Die Hauptidee hinter diesen beiden Befehlen ist, entweder die Eigenschaften eines Javascript-Objekts mit console.dir() oder die Nachfahren-Elemente eines XML/HTML-Elements mit console.dirxml() anzuzeigen. Es scheint, dass Chrome diese wie erwartet implementiert hat, während Firefox beide einfach als Aliase für console.log() verwendet.

Geben wir console.log(), console.dir() und console.dirxml() dasselbe einfache Objekt, um zu sehen, was wir erhalten. Beachten Sie, dass Sie normalerweise ein Objekt nicht mit console.dirxml() protokollieren würden.

const count = {
  one: 'one',
  two: 'two',
  three: 'three'
};


console.log(count);
console.dir(count);
console.dirxml(count);

Firefox gibt uns im Grunde dasselbe, nur dass console.dir() automatisch erweitert wird.

Ein weiterer einfacher Vergleich mit console.log() ist, das Objekt im selben Befehl zu wiederholen.

Eigentlich nicht viel anders, außer dass Chrome das zweite Objekt in console.dir() nicht wie Firefox anzeigt. Was sinnvoll ist, denn Chrome versucht, die Eigenschaften eines Objekts anzuzeigen (das zweite ignorierend), während Firefox alles nur zu console.log() aliasiert. So gibt es in Situationen wie diesen mit Objekten wenig Unterschied zwischen console.log(), console.dir() und console.dirxml() in den Browsern.

Ein nützlicher Vorteil von console.dir() in Chrome, den ich hervorheben kann, ist die Handhabung von DOM-Elementen. Zum Beispiel, wie console.log() in Chrome und Firefox anzeigt, wenn es mit einem DOM-Element gefüttert wird.

Nun, ich mochte schon immer, wie Firefox ein DOM-Element innerhalb eines console.log() ausgibt, da es mir alle Eigenschaften dieses DOM-Elements liefert. Wenn ich also eine bestimmte Eigenschaft eines DOM-Elements nachschlagen wollte, um sie mit JavaScript zu manipulieren, ist es nur ein console.log() entfernt, um sie zu finden. Chrome hingegen gibt uns den HTML-Code des DOM-Elements in console.log() aus, genauso wie in console.dirxml().

Um die Eigenschaften in Chrome zu erhalten, verwenden Sie console.dir() mit dem DOM-Element. Ich war ziemlich glücklich, festzustellen, dass console.dir() in Chrome die Eigenschaften eines DOM-Elements genau so liefert, wie ich mich auf diese Informationen in Firefox verlassen hatte.

Was console.dirxml() in Chrome betrifft, so kann es nützlich sein, um ein HTML-Element und seine Kinder außerhalb der Unordnung des DOM-Inspektors anzuzeigen. Sie können sogar einige der vorhandenen HTML live in der Konsole bearbeiten, aber Sie werden nicht die gleichen Fähigkeiten wie im DOM-Inspektor haben.

Lasst uns zusammenkommen: group(), groupCollapsed() und groupEnd()

Hier ist eine einfache Sache: Gruppieren Sie verschiedene Konsolenausgaben, um eine Beziehung zwischen ihnen darzustellen. Es ist in den Funktionen etwas eingeschränkt, so dass seine Nützlichkeit stark davon abhängt, wie Sie es verwenden möchten. Dies ist der Befehl console.group().

console.group();
console.log('one');
console.log('two');
console.log('three');
console.groupEnd();


console.group('this is a label');
console.log('one');
console.log('two');
console.log('three');
console.groupEnd();

Im ersten Codeblock rufen wir console.group() im Standardzustand auf, haben drei Protokolleinträge und rufen dann console.groupEnd() auf. console.groupEnd() definiert einfach das Ende der Gruppierung. Der zweite Block hat eine Zeichenkette als Parameter, die im Wesentlichen zum Label für diese Gruppe wird. Beachten Sie, dass im ersten Block ohne Label die Gruppe sich in Chrome einfach als console.group identifiziert, während sie in Firefox als <kein Gruppenlabel> angezeigt wird. In den meisten Fällen möchten Sie ein ordentliches Label, um Gruppen zu unterscheiden.

Beachten Sie auch den Pfeil neben den Labels. Durch Klicken darauf wird die Gruppe eingeklappt. In den obigen Codebeispielen, wenn wir console.group() in console.groupCollapsed() ändern, starten sie eingeklappt und müssen geöffnet werden, um die Ausgabe zu sehen.

Sie können die Gruppen auch verschachteln. Der Befehl console.groupEnd() bezieht sich einfach auf die zuletzt geöffnete Gruppe.

console.group('outer group');
console.log('outer one');
console.log('outer two');
console.group('inner group');
console.log('inner one');
console.log('inner two');
console.log('inner three');
console.groupEnd();
console.log('outer three');
console.groupEnd();

Nur als kurze Anmerkung: Wenn Sie möchten, dass das Gruppenlabel in einer Liste von Ausgaben in der Konsole etwas mehr hervorsticht, können Sie es genauso formatieren, wie wir es zuvor mit Zeichenketten getan haben.

console.group('%cstyled group', 'font-size: 20px; color: red;');
console.log('one');
console.log('two');
console.log('three');
console.groupEnd();

Nehmen Sie Platz am: table()

In früheren Beispielen haben wir gesehen, was passiert, wenn wir ein Array oder ein Objekt in console.log() oder console.dir() einfügen. Für diese Datentypen gibt es eine weitere Option für eine strukturiertere Anzeige, nämlich console.table().

Hier ist ein einfaches Beispiel mit einem Array

let basicArray = [
  'one',
  'two',
  'three'
];
console.table(basicArray);

Hier ist dasselbe Beispiel in Firefox zum Vergleich.

Ein kleiner visueller Unterschied, aber weitgehend dasselbe. Das gesagt, Chrome bietet Ihnen immer noch die erweiterbare Ausgabe unter der Tabelle, ähnlich wie Sie es in console.log() sehen würden. Chrome bietet auch grundlegende Spalten sortierung, wenn Sie auf die Überschrift klicken.

Die Ausgabe ist ähnlich, wenn ein Objekt übergeben wird

let basicObject = {
  one: 'one',
  two: 'two',
  three: 'three'
};
console.table(basicObject);

Das war also ein ziemlich einfaches Beispiel mit grundlegenden Ausgaben. Wie wäre es mit etwas Komplexerem, das oft in Coding-Projekten verwendet wird? Lassen Sie uns ein Array von Objekten betrachten.

let arrayOfObjects = [
  {
    one: 'one',
    two: 'two',
    three: 'three'
  },
  {
    one: 'one',
    two: 'two',
    three: 'three'
  },
  {
    one: 'one',
    two: 'two',
    three: 'three'
  }
];
console.table(arrayOfObjects);

Wie Sie sehen, erhalten wir ein schönes Layout von Objekten mit wiederholenden Schlüsseln als Spaltenbeschriftungen. Stellen Sie sich Daten wie Benutzerinformationen, Daten oder alles vor, was häufig in Schleifen verwendet wird. Beachten Sie, dass alle Schlüssel in jedem der Objekte als Spalte dargestellt werden, auch wenn es entsprechende Schlüssel mit Daten in den anderen Objekten gibt. Wenn ein Objekt keine Daten für eine Spalte hat, erscheint es leer.

Ein Array von Arrays ist ähnlich dem Array von Objekten. Anstelle von Schlüsseln als Spaltenbeschriftungen werden die Indizes der inneren Arrays als Spaltenbeschriftungen verwendet. Wenn also ein Array mehr Elemente enthält als die anderen Arrays, werden für diese Spalten leere Elemente in der Tabelle angezeigt. Genau wie beim Array von Objekten.

Bisher werden einfache Arrays und Objekte mit einfachen Ausgaben angezeigt. Selbst ein etwas komplexeres Array von Objekten hat immer noch eine solide, nützliche Struktur. Die Dinge können sich mit der Mischung von Datentypen jedoch etwas ändern.

Zum Beispiel ein Array von Arrays, bei dem eines der Elemente des inneren Arrays ein Objekt ist.

let arrayOfArraysWithObject = [
  ['one', 'two', {three: 'three', four: 'four'}],
  ['one', 'two', {three: 'three', four: 'four'}],
  ['one', 'two', {three: 'three', four: 'four'}]
];

console.table(arrayOfArraysWithObject);

Um zu sehen, was sich in diesen Objekten in der dritten Spalte befindet, müssen wir die Array-Ausgabe unter der Tabelle erweitern. Nicht schlecht, wirklich. Hier ist, wie Firefox dieselbe Ausgabe verarbeitet.

Firefox lässt uns das Objekt einfach innerhalb der Tabelle erweitern.

Was ist mit der umgekehrten Mischung der Datentypen, wo wir ein Objekt mit Arrays als Werten für jeden Schlüssel haben? Es funktioniert weitgehend wie das Array von Arrays. Der Unterschied ist, dass jede Zeile mit einem Schlüssel statt mit dem Index beschriftet ist. Natürlich führt jede Ebene von Datentypen, die Sie hinzufügen, zu einer komplexer aussehenden Tabelle. 

Das alles dreht sich um Zeit: time(), timeLog() und timeEnd()

Hier haben wir eine einfache Möglichkeit, zu protokollieren, wie lange etwas dauert. Wir rufen console.time() mit einem Label auf, rufen console.timeLog() mit demselben Label für ein Update auf und rufen console.timeEnd() erneut mit demselben Label auf, um den Timer zu stoppen.

console.time('this is a timer');
console.timeLog('this is a timer');
console.timeEnd('this is a timer');

Die Ausgabe für Chrome und Firefox ist weitgehend dieselbe. Hier ist ein Beispiel für die Ausgabe mit Code, der die Zeit fünf Sekunden lang jede Sekunde protokolliert und dann stoppt.

Beachten Sie, dass die gemeldeten Zeiten nicht ganz gleich sind, aber für die meisten Anforderungen wahrscheinlich nah genug. Außerdem merkt Firefox netterweise an, dass der Timer beendet ist, während Chrome eine Annahme erfordert, sobald das Label nicht mehr erscheint. Die ersten vier Zeilen der Ausgabe stammen vom Aufruf console.timeLog('this is a timer'); und die letzte Zeile vom Aufruf von console.timeEnd('this is a timer');.

Krümel hinterlassen mit: trace()

Der Befehl console.trace() ist tatsächlich ähnlich wie console.error() und console.warn(). Das Aufrufen dieses Befehls gibt einen Stack-Trace in der Konsole aus, der den Pfad durch den Code bis zu diesem Aufruf zeigt. Wir können ihm sogar einen String als eine Art Label übergeben, aber auch andere Datentypen wie Arrays oder Objekte können übergeben werden. Das Verhalten beim Übergeben solcher Daten ist dasselbe, was wir von einem console.log()-Aufruf erhalten würden. Es ist eine einfache Möglichkeit, Informationen an die Konsole weiterzugeben, ohne einen eher ernsten console.error()- oder console.warn()-Aufruf auszulösen.

debugger

Dies ist ein einfacher Befehl, um eine Pause im Debugger der Konsole auszulösen, falls vorhanden. Er ist vergleichbar mit dem Setzen eines Breakpoints im Debugger oder dem Browser-Äquivalent, um denselben Pausentyp während der Ausführung von Code zu erzielen. Hier ist ein einfaches Beispiel.

function whatsInHere() {
  debugger;
  // rest of the code
}

In diesem speziellen Beispiel hält der Debugger der geöffneten Konsole die Ausführung des Codes an und der Browser öffnet die Quelldatei, um die Codezeile anzuzeigen, sobald die Funktion aufgerufen wird. Dies kann bei komplizierten Projekten für einfache Breakpoints nützlich sein.

Technisch gesehen ist der Befehl debugger kein Teil des Konsolenobjekts im Browser. Es ist ein nützliches Feature, auf das die Konsole aus JavaScript-Code reagiert.

Einige zusätzliche Konsolen-Utilities

Das gibt einen guten Überblick über die meisten Standardbefehle, die uns im Konsolenobjekt zur Verfügung stehen. Jeder dieser Befehle verhält sich in modernen Browsern mehr oder weniger gleich. Es kann einige Unterschiede zwischen den Browsern geben, wie wir in einigen Beispielen gesehen haben. Aber es gibt noch ein paar weitere Dinge, auf die ich kurz eingehen möchte, da sie auf verschiedene Weise nützlich sein könnten.

Die folgenden Beispiele können eher als Konsolen-"Utilities" betrachtet werden. Sie sind, im Gegensatz zu den meisten vorherigen Beispielen, kein Teil des Konsolenobjekts. Daher werden sie nicht mit einer führenden Konsolenobjekt-Referenz aufgerufen. Diese Utilities werden direkt von den Browsern selbst unterstützt. Sie können nicht aus JavaScript-Code aufgerufen werden, sondern müssen direkt in die Konsole eingegeben werden, um verwendet zu werden. In einigen Fällen ist das Utility möglicherweise einzigartig für einen bestimmten Browser, in anderen Fällen wird das Utility in mehreren Browsern auf ähnliche Weise unterstützt. Ihre Erfahrungen können je nach gewähltem Browser variieren.

$0, $1, $2, $3, $4

Diese fünf Befehle sind äußerst praktisch. Der erste, $0, repräsentiert das aktuell ausgewählte Element im DOM-Inspektor. Dies bietet im Wesentlichen eine Abkürzung, anstatt traditionellere DOM-Methoden wie getElementById oder querySelector verwenden zu müssen. Sie können es auf verschiedene Weise verwenden, innerhalb verschiedener Konsolenbefehle oder allein, um Informationen über das aktuell ausgewählte Element zu erhalten. Zum Beispiel:

console.log($0);

Die anderen Befehle in dieser Gruppe repräsentieren zuvor ausgewählte Elemente. Betrachten Sie sie als eine Art Auswahlhistorie. $1 ist das vorherige Element, $2 ist das davor, und so weiter. Obwohl der erste Befehl in Firefox verfügbar ist, sind die Befehle für zuvor ausgewählte Elemente nicht vorhanden.

$(‘element’), $$(‘elements’)

Wenn Sie wiederholt document.querySelector('element') in die Konsole tippen, gibt es eine Abkürzung. Sie können einfach $('element') eingeben, und es führt dieselbe Funktion aus. Die Abkürzung erinnert viele an jQuery, aber das Auswählen mehrerer Elemente erinnert mich an MooTools. Um mehrere Elemente auszuwählen, würden Sie $$('elements') anstelle von document.querySelectorAll('elements') verwenden.

$x(‘//element’)

Dies ist eine Abkürzung für XPath, die ein Array von Elementen zurückgibt, die dem Ausdruck entsprechen. Ein einfaches Beispiel ist $x('//div'), das ein Array aller div-Elemente auf der Seite anzeigt. Dies unterscheidet sich nicht wesentlich von der Verwendung von $$('div'), wie wir es mit $('element') getan haben, aber es gibt viele Optionen für das Schreiben von XPath-Ausdrücken.

Ein Beispiel für eine einfache Erweiterung eines XPath-Ausdrucks ist $x('//div[descendant::span]') (dank Neil Erdwien für die Korrektur), die die div-Elemente auf der Seite zurückgibt, die zufällig ein span-Element enthalten. Dies entspricht dem `:has` in der CSS Selectors Level 4 Draft, welches noch nicht in Browsern unterstützt wird.

Dies sind nur grundlegende Beispiele, die nur an der Oberfläche von XPath kratzen.

clear()

Dies ist eine weitere Version von console.clear(), aber ohne die Meldung „Konsole wurde gelöscht“.

getEventListeners(object)

Dieser Befehl meldet, wenn ihm ein DOM-Element übergeben wird, die auf dieses Element registrierten Event-Listener. Zum Beispiel können wir mit dem obigen $0-Beispiel getEventListeners($0) verwenden, um etwas wie das Folgende zu erhalten:

Das Erweitern jedes Elements im Array liefert verschiedene Informationen über diesen Event-Listener. Diese Funktion wird in Firefox nicht unterstützt, bietet aber etwas Ähnliches, das im DOM-Inspektor zu finden ist.

Das Klicken auf die „Event“-Badge neben dem Element zeigt eine Liste der für das Element registrierten Ereignisse an. Dann kann jedes Ereignis erweitert werden, um den beteiligten Code anzuzeigen.

Das war's vorerst!

 Ich beende es hier, mit einer großen Menge an Informationen, die verschiedene Befehle detailliert beschreiben, die in der Konsolenausgabe des Browsers oder mit JavaScript verwendet werden können. Dies ist nicht *alles*, was möglich ist – es gibt einfach zu viel abzudecken. In einigen Fällen hat jeder Browser seine eigenen Fähigkeiten oder Utilities, die genutzt werden können. Wir haben uns die meisten Dinge angesehen, die wir in Chrome und Firefox finden könnten, aber es gibt wahrscheinlich noch mehr. Außerdem werden in Zukunft immer neue Features eingeführt. Ich lade Sie ein, tiefer zu graben, um weitere Möglichkeiten zu entdecken, Browser-DevTools für Ihre Coding-Projekte zu nutzen.