console

console.assert()

Protokolliert eine Fehlermeldung in die Konsole, wenn das erste Argument false ist.

console.clear()

Löscht die Konsole.

console.count()

Protokolliert die Anzahl der Aufrufe dieser Zeile mit dem angegebenen Label.

console.countReset()

Setzt den Wert des Zählers mit dem gegebenen Label zurück.

console.debug()

Gibt eine Nachricht mit dem Debug-Protokolllevel in die Konsole aus.

console.dir()

Zeigt eine interaktive Auflistung der Eigenschaften eines angegebenen JavaScript-Objekts an. Diese Auflistung ermöglicht es, mittels Aufklappdreiecken den Inhalt von Kindobjekten zu untersuchen.

console.dirxml()

Zeigt, wenn möglich, eine XML/HTML-Elementdarstellung des angegebenen Objekts oder die JavaScript-Objektansicht an, wenn dies nicht möglich ist.

console.error()

Gibt eine Nachricht mit dem Fehler-Protokolllevel in die Konsole aus.

console.exception() Nicht standardisiert Veraltet

Ein Alias für console.error().

console.group()

Erstellt eine neue Inline-Gruppe, die alle folgenden Ausgaben um ein weiteres Level einrückt. Um das Level zu verlassen, rufen Sie console.groupEnd() auf.

console.groupCollapsed()

Erstellt eine neue Inline-Gruppe, die alle folgenden Ausgaben um ein weiteres Level einrückt. Im Gegensatz zu console.group() beginnt diese Gruppe jedoch zusammengeklappt, sodass ein Offenlegungsknopf erforderlich ist, um sie zu erweitern. Um das Level zu verlassen, rufen Sie console.groupEnd() auf.

console.groupEnd()

Beendet die aktuelle Inline-Gruppe.

console.info()

Gibt eine Nachricht mit dem Info-Protokolllevel in die Konsole aus.

console.log()

Gibt eine Nachricht in die Konsole aus.

console.profile() Nicht standardisiert

Startet das eingebaute Profiler-Tool des Browsers (zum Beispiel das Firefox Performance-Tool). Sie können einen optionalen Namen für das Profil angeben.

console.profileEnd() Nicht standardisiert

Stoppt das Profiler-Tool. Sie können das resultierende Profil im Performance-Tool des Browsers einsehen (zum Beispiel das Firefox Performance-Tool).

console.table()

Zeigt tabellarische Daten als Tabelle an.

console.time()

Startet einen Timer mit einem als Eingabeparameter spezifizierten Namen. Bis zu 10.000 Timer können gleichzeitig auf einer Seite laufen.

console.timeEnd()

Stoppt den angegebenen Timer und protokolliert die seit dem Start vergangene Zeit in Millisekunden.

console.timeLog()

Protokolliert den Wert des angegebenen Timers in die Konsole.

console.timeStamp() Nicht standardisiert

Fügt der Zeitleiste des Performance-Tools des Browsers einen Markierer hinzu (Chrome oder Firefox).

console.trace()

Gibt einen Stack-Trace aus.

console.warn()

Gibt eine Nachricht in die Konsole aus mit dem Warn-Protokolllevel.

Die am häufigsten genutzte Funktion der Konsole ist das Protokollieren von Text und anderen Daten. Es gibt mehrere Kategorien von Ausgaben, die Sie mit den Methoden console.log(), console.info(), console.warn(), console.error() oder console.debug() erzeugen können. Jede dieser Methoden liefert unterschiedlich gestylte Ausgaben im Protokoll, und Sie können die Filtersteuerungen Ihres Browsers nutzen, um nur die Arten von Ausgaben anzuzeigen, die Sie interessieren.

Es gibt zwei Möglichkeiten, jede der Ausgabemethoden zu verwenden:

• Übergeben Sie eine variable Anzahl von Argumenten, deren String-Repräsentationen zu einem String zusammengeführt werden, der dann in die Konsole ausgegeben wird.
• Übergeben Sie einen String, der null oder mehr Substitutions-Strings enthält, gefolgt von einer variablen Anzahl von Argumenten, die sie ersetzen.

Ausgabe eines einzelnen Objekts

Der einfachste Weg, die Logging-Methoden zu verwenden, besteht darin, ein einzelnes Objekt auszugeben:

const someObject = { str: "Some text", id: 5 };
console.log(someObject);

Die Ausgabe sieht ungefähr so aus:

{str:"Some text", id:5}

Der Browser zeigt so viele Informationen über das Objekt an, wie er kann und möchte. Zum Beispiel können auch der private Status des Objekts angezeigt werden. Bestimmte Arten von Objekten, wie DOM-Elemente oder Funktionen, können auch auf spezielle Weise angezeigt werden.

Schnappschüsse von Objekten

Informationen über ein Objekt werden verzögert abgefragt. Das bedeutet, dass die Lognachricht den Inhalt eines Objekts zu dem Zeitpunkt zeigt, an dem es zum ersten Mal betrachtet wird, nicht wenn es protokolliert wird. Zum Beispiel:

const obj = {};
console.log(obj);
obj.prop = 123;

Dies wird {} ausgeben. Wenn Sie jedoch die Details des Objekts erweitern, werden Sie prop: 123 sehen.

Wenn Sie Ihr Objekt mutieren und verhindern möchten, dass die protokollierten Informationen aktualisiert werden, können Sie das Objekt vor dem Protokollieren tief klonen. Ein gängiger Weg ist die Verwendung von JSON.stringify() und dann JSON.parse():

console.log(JSON.parse(JSON.stringify(obj)));

Es gibt andere Alternativen, die in Browsern funktionieren, wie zum Beispiel structuredClone(), die effektiver beim Klonen verschiedener Arten von Objekten sind.

Ausgabe mehrerer Objekte

Sie können auch mehrere Objekte ausgeben, indem Sie sie beim Aufruf der Logging-Methode auflisten, wie folgt:

const car = "Dodge Charger";
const someObject = { str: "Some text", id: 5 };
console.info("My first car was a", car, ". The object is:", someObject);

Die Ausgabe wird so aussehen:

My first car was a Dodge Charger. The object is: {str:"Some text", id:5}

Verwendung von String-Substitutionen

Der erste Parameter der Logging-Methoden kann ein String sein, der null oder mehr Substitutions-Strings enthält. Jeder Substitutions-String wird durch den entsprechenden Argumentwert ersetzt.

%o

Gibt ein JavaScript-Objekt im "optimal nützlichen Formatierungsstil" aus, z.B. können DOM-Elemente genauso angezeigt werden, wie sie im Elementinspektor erscheinen würden.

%O

Gibt ein JavaScript-Objekt im "allgemeinen JavaScript-Objektformatierungsstil" aus, normalerweise in Form eines erweiterbaren Baums. Dies ist ähnlich wie bei console.dir().

%d oder %i

Gibt eine Ganzzahl aus.

%s

Gibt einen String aus.

%f

Gibt einen Gleitkommawert aus.

%c

Wendet CSS-Stilregeln auf den gesamten folgenden Text an. Siehe Stil der Konsolenausgabe.

Einige Browser können zusätzliche Formatspezifizierer implementieren. Zum Beispiel unterstützen Safari und Firefox die C-Style-Präzisionsformatierung %.<precision>f. Beispielsweise wird console.log("Foo %.2f", 1.1) die Zahl auf 2 Dezimalstellen gerundet ausgeben: Foo 1.10, während console.log("Foo %.2d", 1.1) die Zahl als zwei signifikante Stellen mit einer führenden 0 ausgeben wird: Foo 01.

Jeder dieser zieht das nächste Argument nach dem Formatstring von der Parameterliste ab. Zum Beispiel:

for (let i = 0; i < 5; i++) {
  console.log("Hello, %s. You've called me %d times.", "Bob", i + 1);
}

Die Ausgabe sieht so aus:

Hello, Bob. You've called me 1 times.
Hello, Bob. You've called me 2 times.
Hello, Bob. You've called me 3 times.
Hello, Bob. You've called me 4 times.
Hello, Bob. You've called me 5 times.

Styling der Konsolenausgabe

Sie können die %c Direktive verwenden, um eine CSS-Formatierung auf die Konsolenausgabe anzuwenden:

console.log(
  "This is %cMy stylish message",
  "color: yellow; font-style: italic; background-color: blue;padding: 2px",
);

Der Text vor der Direktive wird nicht beeinflusst, aber der Text nach der Direktive wird mit den CSS-Erklärungen im Parameter formatiert.

Sie können %c mehrfach verwenden:

console.log(
  "Multiple styles: %cred %corange",
  "color: red",
  "color: orange",
  "Additional unformatted message",
);

Die mit der %c Syntax verwendbaren Eigenschaften sind wie folgt (zumindest in Firefox - sie können in anderen Browsern abweichen):

• background und ihre Langformen
• border und ihre Langformen
• border-radius
• box-decoration-break
• box-shadow
• clear und float
• color
• cursor
• display
• font und ihre Langformen
• line-height
• margin
• outline und ihre Langformen
• padding
• text-* Eigenschaften wie text-transform
• white-space
• word-spacing und word-break
• writing-mode

Sie können verschachtelte Gruppen verwenden, um Ihre Ausgabe zu organisieren, indem Sie verwandtes Material visuell zusammenfassen. Um einen neuen verschachtelten Block zu erstellen, rufen Sie console.group() auf. Die Methode console.groupCollapsed() ist ähnlich, erstellt jedoch den neuen Block eingeklappt, sodass ein Offenlegungsknopf erforderlich ist, um ihn zum Lesen zu öffnen.

Um die aktuelle Gruppe zu verlassen, rufen Sie console.groupEnd() auf. Zum Beispiel, gegeben dieser Code:

console.log("This is the outer level");
console.group("First group");
console.log("In the first group");
console.group("Second group");
console.log("In the second group");
console.warn("Still in the second group");
console.groupEnd();
console.log("Back to the first group");
console.groupEnd();
console.debug("Back to the outer level");

Die Ausgabe sieht so aus:

Sie können einen Timer starten, um die Dauer eines bestimmten Vorgangs zu berechnen. Um einen zu starten, rufen Sie die Methode console.time() auf und geben ihr einen Namen als einziges Argument. Um den Timer zu stoppen und die verstrichene Zeit in Millisekunden zu erhalten, rufen Sie einfach die Methode console.timeEnd() auf und geben erneut den Namen des Timers als Argument an. Bis zu 10.000 Timer können gleichzeitig auf einer Seite laufen.

Zum Beispiel, gegeben dieser Code:

console.time("answer time");
alert("Click to continue");
console.timeLog("answer time");
alert("Do a bunch of other stuff…");
console.timeEnd("answer time");

Wird die Zeit protokollieren, die der Benutzer benötigt, um das Alarmfeld zu schließen, die Zeit in die Konsole protokollieren, auf den Benutzer warten, um das zweite Alarmfeld zu schließen, und dann die Endzeit in die Konsole protokollieren:

Beachten Sie, dass der Name des Timers sowohl beim Starten als auch beim Stoppen des Timers angezeigt wird.

Das Konsolenobjekt unterstützt auch die Ausgabe eines Stack-Traces; dies zeigt Ihnen den Aufrufpfad, der genommen wurde, um den Punkt zu erreichen, an dem Sie console.trace() aufrufen. Angenommener Code wie dieser:

function foo() {
  function bar() {
    console.trace();
  }
  bar();
}

foo();

Die Ausgabe in der Konsole sieht ungefähr so aus:

• Firefox Developer Tools
• Webkonsole — wie die Webkonsole in Firefox Konsolen-API-Aufrufe behandelt
• about:debugging — wie man die Konsolenausgabe sieht, wenn das Debug-Ziel ein mobiles Gerät ist
• Google Chrome DevTools
• Microsoft Edge DevTools
• Safari Web Inspector