console

console.assert()

Gibt eine Fehlermeldung auf der Konsole aus, wenn das erste Argument false ist.

console.clear()

Löscht die Konsole.

console.count()

Gibt die Anzahl der Male aus, die diese Zeile mit dem angegebenen Label aufgerufen wurde.

console.countReset()

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

console.debug()

Gibt eine Nachricht auf der Konsole mit dem Debug-Protokollebene aus.

console.dir()

Zeigt eine interaktive Auflistung der Eigenschaften eines angegebenen JavaScript-Objekts an. Diese Liste ermöglicht die Verwendung von Dreiecksymbolen, um den Inhalt von Kinderobjekten zu untersuchen.

console.dirxml()

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

console.error()

Gibt eine Nachricht auf der Konsole mit der Fehler-Protokollebene aus.

console.exception() Nicht standardisiert Veraltet

Ein Alias für console.error().

console.group()

Erstellt eine neue Inline-Gruppe, durch Einrücken der gesamten nachfolgenden Ausgabe um eine weitere Ebene. Um wieder eine Ebene herauszurücken, rufen Sie console.groupEnd() auf.

console.groupCollapsed()

Erstellt eine neue Inline-Gruppe, durch Einrücken der gesamten nachfolgenden Ausgabe um eine weitere Ebene. Im Gegensatz zu console.group() beginnt dies jedoch mit der zugeklappten Inline-Gruppe, die die Verwendung einer Offenlegungstaste erfordert, um sie zu erweitern. Um wieder eine Ebene herauszurücken, rufen Sie console.groupEnd() auf.

console.groupEnd()

Beendet die aktuelle Inline-Gruppe.

console.info()

Gibt eine Nachricht auf der Konsole mit der Info-Protokollebene aus.

console.log()

Gibt eine Nachricht auf der 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 den Profiler. Sie können das resultierende Profil im Performance-Tool des Browsers sehen (zum Beispiel das Firefox Performance-Tool).

console.table()

Zeigt tabellarische Daten als Tabelle an.

console.time()

Startet einen Timer mit einem als Eingabeparameter angegebenen Namen. Bis zu 10.000 gleichzeitige Timer können auf einer gegebenen Seite laufen.

console.timeEnd()

Stoppt den angegebenen Timer und gibt die verstrichene Zeit in Millisekunden seit seinem Start aus.

console.timeLog()

Gibt den Wert des angegebenen Timers auf der Konsole aus.

console.timeStamp() Nicht standardisiert

Fügt der Zeitachse des Performance-Tools des Browsers eine Markierung hinzu (Chrome oder Firefox).

console.trace()

Gibt einen Stack-Trace aus.

console.warn()

Gibt eine Nachricht auf der Konsole mit der Warnung-Protokollebene aus.

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 Ausgaben wird unterschiedlich im Protokoll gestylt, und Sie können die Filtersteuerungen Ihres Browsers verwenden, 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-Darstellungen zu einem String verkettet und dann an die Konsole ausgegeben werden.
• Übergeben Sie einen String, der null oder mehrere Ersetzungs-Strings enthält, gefolgt von einer variablen Anzahl von Argumenten, die diese ersetzen.

Ausgabe eines einzelnen Objekts

Der einfachste Weg, die Protokollierungsmethoden 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 kann auch der private Zustand des Objekts angezeigt werden. Bestimmte Objekttypen, wie DOM-Elemente oder Funktionen, können ebenfalls auf eine spezielle Weise angezeigt werden.

Objekte schnappschussartig darstellen

Informationen über ein Objekt werden verzögert abgerufen. Das bedeutet, dass die Protokollnachricht den Inhalt eines Objekts zeigt, wenn es das erste Mal betrachtet wird, nicht als es protokolliert wurde. Zum Beispiel:

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

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

Wenn Sie Ihr Objekt ändern wollen und verhindern möchten, dass die protokollierten Informationen aktualisiert werden, können Sie das Objekt vor dem Protokollieren tief klonen. Eine übliche Methode ist es, JSON.stringify() zu verwenden und es dann mit JSON.parse() zu parsen:

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

Es gibt andere Alternativen, die in Browsern funktionieren, wie structuredClone(), die effektiver beim Klonen verschiedener Objekttypen sind.

Ausgabe mehrerer Objekte

Sie können auch mehrere Objekte ausgeben, indem Sie sie bei der Aufruf der Protokollierungsmethode auflisten, so:

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 sieht wie folgt aus:

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

Verwendung von String-Substitutionen

Der erste Parameter der Protokollierungsmethoden kann ein String sein, der null oder mehrere Ersetzungs-Strings enthält. Jeder Ersetzungs-String wird durch den entsprechenden Argumentwert ersetzt.

%o

Gibt ein JavaScript-Objekt im "optimal nützlichen Formatierungsstil" aus, beispielsweise können DOM-Elemente genauso angezeigt werden, wie sie im Element-Inspektor erscheinen.

%O

Gibt ein JavaScript-Objekt im "generischen JavaScript-Objekt-Formatierungsstil" aus, normalerweise in Form eines erweiterbaren Baumes. Dies ist ähnlich zu console.dir().

%d oder %i

Gibt eine Ganzzahl aus.

%s

Gibt einen String aus.

%f

Gibt einen Gleitkommawert aus.

%c

Wendet CSS-Stilregeln auf allen folgenden Text an. Siehe Konsolenausgabe stylen.

Einige Browser könnten zusätzliche Formatbezeichner implementieren. Zum Beispiel unterstützen Safari und Firefox die C-Style Präzisionsformatierung %.<precision>f. Beispielsweise gibt console.log("Foo %.2f", 1.1) die Zahl auf 2 Dezimalstellen aus: Foo 1.10, während console.log("Foo %.2d", 1.1) die Zahl mit zwei signifikanten Stellen mit einer führenden Null ausgibt: Foo 01.

Jeder dieser zieht das nächste Argument nach dem Format-String 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 wie folgt 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.

Konsolenausgabe stylen

Sie können die %c-Anweisung verwenden, um einen CSS-Stil für Konsolenausgaben anzuwenden:

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

Der Text vor der Anweisung wird nicht beeinflusst, aber der Text nach der Anweisung wird mit den CSS-Deklarationen im Parameter gestylt.

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 seine Langform-Äquivalente
• border und seine Langform-Äquivalente
• border-radius
• box-decoration-break
• box-shadow
• clear und float
• color
• cursor
• display
• font und seine Langform-Äquivalente
• line-height
• margin
• outline und seine Langform-Äquivalente
• 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 kombinieren. Um einen neuen verschachtelten Block zu erstellen, rufen Sie console.group() auf. Die Methode console.groupCollapsed() ist ähnlich, erstellt jedoch den neuen Block zugeklappt und erfordert die Verwendung einer Offenlegungstaste, um ihn zum Lesen zu öffnen.

Um die aktuelle Gruppe zu verlassen, rufen Sie console.groupEnd() auf. Zum Beispiel, mit diesem 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 einer spezifischen Operation zu berechnen. Um einen zu starten, rufen Sie die Methode console.time() auf und geben ihr einen Namen als einzigen Parameter. Um den Timer zu stoppen und die vergangene Zeit in Millisekunden zu erhalten, rufen Sie einfach die Methode console.timeEnd() auf, wobei Sie erneut den Namen des Timers als Parameter übergeben. Bis zu 10.000 Timer können gleichzeitig auf einer angegebenen Seite laufen.

Zum Beispiel, mit diesem 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 protokolliert, die der Benutzer benötigt, um das Alert-Fenster zu schließen, die Zeit an die Konsole senden, warten, bis der Benutzer das zweite Alert schließt, und dann die Endzeit an die Konsole senden:

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

Das Konsolenobjekt unterstützt auch das Ausgeben eines Stack-Traces; dies zeigt Ihnen den Aufrufpfad, der zu dem Punkt führt, an dem Sie console.trace() aufrufen. Mit Code wie diesem:

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

foo();

Die Ausgabe in der Konsole sieht so aus:

• Firefox Developer Tools
• Web-Konsole — wie die Web-Konsole in Firefox mit Console-API-Aufrufen umgeht
• about:debugging — wie Sie Konsolenausgaben sehen, wenn das Debugging-Ziel ein Mobilgerät ist
• Google Chrome DevTools
• Microsoft Edge DevTools
• Safari Web Inspector