Console

Das Console Objekt bietet Zurgiff auf die Debugging-Konsole des Browsers (z. B. die Web-Konsole in Firefox). Die Einzelheiten der Funktionsweise sind von Browser zu Browser unterschiedlich, es gibt jedoch de facto eine Reihe von Funktionen, die normalerweise bereitgestellt werden.

Auf das Console Objekt kann von jedem globalen Objekt aus zugegriffen werden. Window im Browser und WorkerGlobalScope als spezifische Varianten in Workern ├╝ber die Property-Konsole. Es wird unter Window.console zur Verf├╝gung gestellt und kann als einfache Konsole referenziert werden. Zum Beispiel:

console.log("Failed to open the specified link")

Diese Seite dokumentiert die Methoden, die f├╝r das Console Objekt verf├╝gbar sind und enth├Ąlt einige Anwendungsbeispiele.

Hinweis:

Dieses Feature ist in Web Workers verf├╝gbar.

Methoden

Console.assert()
Protokolliert eine Nachricht und eine Stack-Ablaufverfolgung in der Konsole, wenn das erste Argument false ist.
Console.clear()
Leert die Konsole.
Console.count()
Protokolliert, wie oft diese Zeile mit dem angegebenen Label aufgerufen wurde.
Console.countReset()
Setzt den Wert des Z├Ąhlers mit der angegebenen Bezeichnung zur├╝ck.
Console.debug()
Gibt eine Nachricht mit der Protokollebene "debug" in der Konsole aus.
Hinweis: Ab Chromium 58 wird diese Methode nur in Chromium-Browserkonsolen angezeigt, wenn die Stufe "Verbose" ausgew├Ąhlt ist.
Console.dir()
Zeigt eine interaktive Auflistung der Eigenschaften eines angegebenen JavaScript-Objekts an. In dieser Auflistung k├Ânnen Sie Offenlegungsdreiecke verwenden, um den Inhalt untergeordneter Objekte zu untersuchen.
Console.dirxml()

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

Console.error()
Gibt eine Fehlermeldung aus. Sie k├Ânnen Stringersetzung und zus├Ątzliche Argumente mit dieser Methode verwenden.
Console.exception() This API has not been standardized. This deprecated API should no longer be used, but will probably still work.
Ein Alias f├╝r error().
Console.group()
Erstellt eine neue Inline-Gruppe, in der alle folgenden Ausgaben von einer anderen Ebene einger├╝ckt werden. Um eine Ebene wieder zu verlassen, rufen Sie groupEnd() auf.
Console.groupCollapsed()
Erstellt eine neue Inline-Gruppe, in der alle folgenden Ausgaben von einer anderen Ebene einger├╝ckt werden. Anders als bei group() beginnt die Inline-Gruppe eingeklappt und muss ├╝ber einen Button erst aufgeklappt werden. Um eine Ebene wieder zu verlassen, rufen Sie groupEnd() auf.
Console.groupEnd()
Verl├Ąsst die aktuelle Inline-Gruppe.
Console.info()
Informative Protokollierung von Informationen. Sie k├Ânnen Stringersetzung und zus├Ątzliche Argumente mit dieser Methode verwenden.
Console.log()
Zur allgemeinen Ausgabe von Protokollinformationen. Sie k├Ânnen Stringersetzung und zus├Ątzliche Argumente mit dieser Methode verwenden.
Console.profile() This API has not been standardized.
Startet den integrierten Profiler des Browsers (z. B. das Firefox-Leistungstool). Sie k├Ânnen einen optionalen Namen f├╝r das Profil angeben.
Console.profileEnd() This API has not been standardized.
Stoppt den Profiler. Das resultierende Profil wird im Leistungstool des Browsers angezeigt (z. B. im Firefox-Leistungstool).
Console.table()
Zeigt tabellarische Daten als Tabelle an.
Console.time()
Startet einen Timer mit einem als Eingabeparameter angegebenen Namen. Auf einer Seite k├Ânnen bis zu 10.000 gleichzeitige Timer ausgef├╝hrt werden.
Console.timeEnd()
Stoppt den angegebenen Timer und protokolliert die abgelaufene Zeit in Sekunden seit dem Start.
Console.timeLog()
Protokolliert den Wert des angegebenen Timers in der Konsole.
Console.timeStamp() This API has not been standardized.
F├╝gt der Zeitleiste oder dem Wasserfallwerkzeug des Browsers eine Markierung hinzu.
Console.trace()
Gibt eine Stapelablaufverfolgung (stack trace) aus.
Console.warn()
Gibt eine Warnmeldung aus. Sie k├Ânnen Stringersetzung und zus├Ątzliche Argumente mit dieser Methode verwenden.

Benutzung

Text auf der Konsole ausgeben

Die am h├Ąufigsten verwendete Funktion der Konsole ist das Protokollieren von Text und anderen Daten. Sie k├Ânnen vier Ausgabekategorien erstellen, die Sie mit den Methoden console.log(), console.info(), console.warn() und console.error() generieren k├Ânnen. Jedes dieser Ergebnisse hat eine unterschiedliche Ausgabe im Protokoll. Sie k├Ânnen die von Ihrem Browser bereitgestellten Filtersteuerelemente verwenden, um nur die Arten von Ausgaben anzuzeigen, die Sie interessieren.

Es gibt zwei M├Âglichkeiten, jede der Ausgabemethoden zu verwenden. Sie k├Ânnen einfach eine Liste von Objekten ├╝bergeben, deren Stringdarstellungen zu einem String verkettet werden, dann an die Konsole ausgegeben werden, oder Sie k├Ânnen einen String ├╝bergeben, der keine oder mehrere Ersatzstrings enth├Ąlt, gefolgt von einer Liste von Objekten, um diese zu ersetzen.

Ein einzelnes Objekt ausgeben

Die einfachsten Methoden zur Verwendung der Protokollierungsmethoden sind die Ausgabe eines einzelnen Objekts:

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

Die Ausgabe sieht ungef├Ąhr so aus:

[09:27:13.475] ({str:"Some text", id:5})

Mehrere Objekte ausgeben

Sie k├Ânnen auch mehrere Objekte ausgeben, indem Sie sie beim Aufrufen der Protokollierungsmethode einfach nacheinander auflisten:

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

Diese Ausgabe sieht folgenderma├čen aus:

[09:28:22.711] My first car was a Dodge Charger . The object is: ({str:"Some text", id:5})

String-Ersetzungen verwenden

Wenn Sie einen String an eine der Methoden des Konsolenobjekts ├╝bergeben, die einen String akzeptiert (z. B. log()), k├Ânnen Sie folgende Ersatzstrings verwenden:

Ersatzstring Beschreibung
%o ode %O Gibt ein JavaScript-Objekt aus. Durch Klicken auf den Objektnamen werden weitere Informationen dazu im Inspektor ge├Âffnet.
%d oder %i

Gibt eine Ganzzahl aus. Zahlenformatierung wird unterst├╝tzt, z. B. gibt console.log("Foo %.2d", 1.1) die Zahl als zwei signifikante Ziffern mit einer f├╝hrenden 0 aus: Foo 01

%s Gibt einen String aus.
%f

Gibt einen Gleitkommawert aus. Die Formatierung wird unterst├╝tzt, zum Beispiel gibt console.log("Foo %.2f", 1.1) die Zahl mit 2 Dezimalstellen aus: Foo 1.10

Hinweis: Die Pr├Ązisionsformatierung funktioniert in Chrome nicht

Jedes dieser Elemente zieht das n├Ąchste Argument nach dem Formatstring aus der Parameterliste. Zum Beispiel:

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

Die Ausgabe sieht folgenderma├čen aus:

[13:14:13.481] Hello, Bob. You've called me 1 times.
[13:14:13.483] Hello, Bob. You've called me 2 times.
[13:14:13.485] Hello, Bob. You've called me 3 times.
[13:14:13.487] Hello, Bob. You've called me 4 times.
[13:14:13.488] Hello, Bob. You've called me 5 times.

Konsolenausgaben stylen

Sie k├Ânnen die %c Direktive verwenden, um einen CSS-Stil 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. Der Text nach der Direktive wird jedoch mit den CSS-Deklarationen im Parameter formatiert.
 
 

Hinweis: Es werden etliche CSS-Eigenschaften von diesem Stil unterst├╝tzt. Sie sollten experimentieren und sehen, welche sich als n├╝tzlich erweisen.

 

Gruppen in der Konsole verwenden

Requires Gecko 9.0(Firefox 9.0 / Thunderbird 9.0 / SeaMonkey 2.6)

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 den neuen Block jedoch zusammengeklappt und erfordert die Verwendung einer Schaltfl├Ąche zum ├ľffnen.

Hinweis: Minimierte Gruppen werden in Gecko noch nicht unterst├╝tzt. Die Methode groupCollapsed() ist zu diesem Zeitpunkt die gleiche wie group().

Um die aktuelle Gruppe zu verlassen, rufen Sie einfach console.groupEnd() auf. Zum Beispiel mit diesem Code:

console.log("This is the outer level");
console.group();
console.log("Level 2");
console.group();
console.log("Level 3");
console.warn("More of level 3");
console.groupEnd();
console.log("Back to level 2");
console.groupEnd();
console.debug("Back to the outer level");

Die Ausgabe sieht folgenderma├čen aus:

nesting.png

Timer

Requires Gecko 10.0(Firefox 10.0 / Thunderbird 10.0 / SeaMonkey 2.7)

Um die Dauer einer bestimmten Operation zu berechnen, hat Gecko 10 die Unterst├╝tzung von Timern im console-Objekt eingef├╝hrt. Um einen Timer zu starten, rufen Sie die Methode console.time() auf und geben Sie ihm als einzigen Parameter einen Namen. Um den Timer zu stoppen und die verstrichene Zeit in Millisekunden abzurufen, rufen Sie einfach die Methode console.timeEnd() auf und ├╝bergeben den Namen des Timers erneut als Parameter. Auf einer Seite k├Ânnen bis zu 10.000 Timer gleichzeitig ausgef├╝hrt werden.

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");

Protokolliert die Zeit, die der Benutzer zum Deaktivieren des Alert-Felds ben├Âtigt, schreibt die ben├Âtigte Zeit in der Konsole, wartet, bis der Benutzer die zweite Alert-Nachricht wegklickt und protokolliert dann die Endzeit in der Konsole:

timerresult.png

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

Hinweis: Es ist wichtig zu beachten, dass der Timer die Gesamtzeit f├╝r die Transaktion angibt, wenn Sie das Timing f├╝r den Netzwerkverkehr protokollieren. Die im Netzwerkbereich aufgef├╝hrte Zeit ist nur die Zeit, die der Header ben├Âtigt. Wenn Sie die Antwort-Body-Protokollierung aktiviert haben, sollte die angegebene Zeit f├╝r den Antwortheader und den Nachrichtentext der Anzeige in der Konsolenausgabe entsprechen.

Stapelverfolgung (Strack Traces)

Das Konsolenobjekt unterst├╝tzt auch die Ausgabe eines Stack-Trace. Daraufhin wird der Anrufpfad angezeigt, mit dem Sie den Punkt erreichen, an dem Sie console.trace() aufrufen. Gegebener Code wie folgt:

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

foo();

Die Ausgabe in der Konsole sieht ungef├Ąhr so aus:

Spezifikationen

Specification Status Comment
Console API Lebender Standard Initial definition.

Browserkompatibilit├Ąt

BCD tables only load in the browser

Hinweise

  • Wenn in Firefox auf einer Seite ein console-Objekt definiert ist, wird das in Firefox integrierte Objekt ├╝berschrieben.
  • Vor Gecko 12.0 funktionieren die Methoden des console-Objekts nur, wenn die Webkonsole ge├Âffnet ist. Beginnend mit Gecko 12.0 wird die Ausgabe zwischengespeichert, bis die Webkonsole ge├Âffnet wird. Anschlie├čend wird sie angezeigt.
  • Es ist erw├Ąhnenswert, dass das in Firefox integrierte Console-Objekt mit dem von Firebug bereitgestellten kompatibel ist.

Siehe auch

Andere Implementierungen