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()
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()
Startet den integrierten Profiler des Browsers (z. B. das Firefox-Leistungstool). Sie können einen optionalen Namen für das Profil angeben.
Console.profileEnd()
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()
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

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid WebviewChrome für AndroidFirefox für AndroidOpera für AndroidSafari auf iOSSamsung Internet
ConsoleChrome Vollständige Unterstützung 4Edge Vollständige Unterstützung JaFirefox Vollständige Unterstützung 2IE Teilweise Unterstützung 8
Hinweise
Teilweise Unterstützung 8
Hinweise
Hinweise Only functions when developer tools are opened. Otherwise, the 'console' object is undefined.
Opera Vollständige Unterstützung 10.1Safari Vollständige Unterstützung 3.1WebView Android Vollständige Unterstützung JaChrome Android Vollständige Unterstützung JaFirefox Android Vollständige Unterstützung 4Opera Android ? Safari iOS Vollständige Unterstützung 3.2Samsung Internet Android Vollständige Unterstützung Ja
assertChrome Vollständige Unterstützung JaEdge Vollständige Unterstützung 12Firefox Vollständige Unterstützung 28IE Vollständige Unterstützung JaOpera Vollständige Unterstützung JaSafari Vollständige Unterstützung JaWebView Android Vollständige Unterstützung JaChrome Android Vollständige Unterstützung JaFirefox Android Vollständige Unterstützung 28Opera Android ? Safari iOS ? Samsung Internet Android ?
clearChrome Vollständige Unterstützung JaEdge Vollständige Unterstützung 12Firefox Vollständige Unterstützung 48IE Vollständige Unterstützung JaOpera Vollständige Unterstützung JaSafari Vollständige Unterstützung JaWebView Android Vollständige Unterstützung JaChrome Android Vollständige Unterstützung JaFirefox Android Vollständige Unterstützung 48Opera Android ? Safari iOS ? Samsung Internet Android ?
countChrome Vollständige Unterstützung JaEdge Vollständige Unterstützung 12Firefox Vollständige Unterstützung 30IE Vollständige Unterstützung JaOpera Vollständige Unterstützung JaSafari Vollständige Unterstützung JaWebView Android Vollständige Unterstützung JaChrome Android Vollständige Unterstützung JaFirefox Android Vollständige Unterstützung 30Opera Android ? Safari iOS ? Samsung Internet Android ?
countResetChrome Vollständige Unterstützung JaEdge ? Firefox Vollständige Unterstützung 62IE Keine Unterstützung NeinOpera Vollständige Unterstützung JaSafari ? WebView Android Vollständige Unterstützung JaChrome Android Vollständige Unterstützung JaFirefox Android Vollständige Unterstützung 62Opera Android ? Safari iOS ? Samsung Internet Android Vollständige Unterstützung Ja
debugChrome Vollständige Unterstützung JaEdge Vollständige Unterstützung 12Firefox Vollständige Unterstützung 4IE Vollständige Unterstützung JaOpera ? Safari Vollständige Unterstützung JaWebView Android Vollständige Unterstützung JaChrome Android Vollständige Unterstützung JaFirefox Android Vollständige Unterstützung 4Opera Android ? Safari iOS ? Samsung Internet Android ?
dir
ExperimentellNicht standardisiert
Chrome Vollständige Unterstützung JaEdge Vollständige Unterstützung 12Firefox Vollständige Unterstützung 8IE Vollständige Unterstützung 9Opera Vollständige Unterstützung JaSafari Vollständige Unterstützung JaWebView Android Vollständige Unterstützung JaChrome Android Vollständige Unterstützung JaFirefox Android Vollständige Unterstützung 8Opera Android ? Safari iOS ? Samsung Internet Android ?
dirxml
ExperimentellNicht standardisiert
Chrome Vollständige Unterstützung JaEdge Vollständige Unterstützung 12Firefox Vollständige Unterstützung JaIE Vollständige Unterstützung JaOpera Vollständige Unterstützung JaSafari ? WebView Android Vollständige Unterstützung JaChrome Android Vollständige Unterstützung JaFirefox Android Keine Unterstützung NeinOpera Android ? Safari iOS ? Samsung Internet Android ?
errorChrome Vollständige Unterstützung JaEdge Vollständige Unterstützung 12Firefox Vollständige Unterstützung 4IE Vollständige Unterstützung 8Opera Vollständige Unterstützung JaSafari Vollständige Unterstützung JaWebView Android Vollständige Unterstützung JaChrome Android Vollständige Unterstützung JaFirefox Android Vollständige Unterstützung 4Opera Android ? Safari iOS ? Samsung Internet Android ?
exception (an alias for error)
VeraltetNicht standardisiert
Chrome Keine Unterstützung NeinEdge Vollständige Unterstützung 13Firefox Vollständige Unterstützung 28IE Keine Unterstützung NeinOpera Keine Unterstützung NeinSafari Keine Unterstützung NeinWebView Android Keine Unterstützung NeinChrome Android Keine Unterstützung NeinFirefox Android Vollständige Unterstützung 28Opera Android ? Safari iOS Keine Unterstützung NeinSamsung Internet Android Keine Unterstützung Nein
groupChrome Vollständige Unterstützung 4Edge Vollständige Unterstützung 12Firefox Vollständige Unterstützung 4IE Vollständige Unterstützung 11Opera Vollständige Unterstützung JaSafari Vollständige Unterstützung 4WebView Android Vollständige Unterstützung 37Chrome Android Vollständige Unterstützung 18Firefox Android Vollständige Unterstützung 4Opera Android ? Safari iOS ? Samsung Internet Android ?
groupCollapsedChrome Vollständige Unterstützung 6Edge Vollständige Unterstützung 12Firefox Vollständige Unterstützung 52IE Vollständige Unterstützung 11Opera ? Safari Vollständige Unterstützung 5.1WebView Android Vollständige Unterstützung 37Chrome Android Vollständige Unterstützung 18Firefox Android Vollständige Unterstützung 52Opera Android ? Safari iOS ? Samsung Internet Android ?
groupEndChrome Vollständige Unterstützung 4Edge Vollständige Unterstützung 12Firefox Vollständige Unterstützung 9IE Vollständige Unterstützung 11Opera Vollständige Unterstützung JaSafari Vollständige Unterstützung 4WebView Android Vollständige Unterstützung 37Chrome Android Vollständige Unterstützung 18Firefox Android Vollständige Unterstützung 9Opera Android ? Safari iOS ? Samsung Internet Android ?
infoChrome Vollständige Unterstützung JaEdge Vollständige Unterstützung 12Firefox Vollständige Unterstützung 4IE Vollständige Unterstützung 8Opera Vollständige Unterstützung JaSafari Vollständige Unterstützung Ja
Hinweise
Vollständige Unterstützung Ja
Hinweise
Hinweise No information icon
WebView Android Vollständige Unterstützung JaChrome Android Vollständige Unterstützung JaFirefox Android Vollständige Unterstützung 4Opera Android ? Safari iOS ? Samsung Internet Android ?
logChrome Vollständige Unterstützung JaEdge Vollständige Unterstützung 12Firefox Vollständige Unterstützung 4IE Vollständige Unterstützung 8Opera Vollständige Unterstützung JaSafari Vollständige Unterstützung JaWebView Android Vollständige Unterstützung JaChrome Android Vollständige Unterstützung JaFirefox Android Vollständige Unterstützung 4Opera Android ? Safari iOS ? Samsung Internet Android ?
profile
ExperimentellNicht standardisiert
Chrome Vollständige Unterstützung 53Edge Vollständige Unterstützung 12Firefox Vollständige Unterstützung JaIE Vollständige Unterstützung JaOpera ? Safari ? WebView Android Vollständige Unterstützung 53Chrome Android Vollständige Unterstützung 53Firefox Android Vollständige Unterstützung 10Opera Android ? Safari iOS ? Samsung Internet Android ?
profileEnd
ExperimentellNicht standardisiert
Chrome Vollständige Unterstützung JaEdge Vollständige Unterstützung 12Firefox Vollständige Unterstützung JaIE Vollständige Unterstützung JaOpera ? Safari ? WebView Android Vollständige Unterstützung JaChrome Android Vollständige Unterstützung JaFirefox Android Vollständige Unterstützung 10Opera Android ? Safari iOS ? Samsung Internet Android ?
tableChrome Vollständige Unterstützung JaEdge Vollständige Unterstützung 13Firefox Vollständige Unterstützung 34IE Keine Unterstützung NeinOpera Vollständige Unterstützung JaSafari Vollständige Unterstützung JaWebView Android Vollständige Unterstützung JaChrome Android Vollständige Unterstützung JaFirefox Android Vollständige Unterstützung 34Opera Android ? Safari iOS ? Samsung Internet Android ?
timeChrome Vollständige Unterstützung 4Edge Vollständige Unterstützung 12Firefox Vollständige Unterstützung 10IE Vollständige Unterstützung 11Opera Vollständige Unterstützung JaSafari Vollständige Unterstützung 4WebView Android Vollständige Unterstützung 37Chrome Android Vollständige Unterstützung 18Firefox Android Vollständige Unterstützung 10Opera Android ? Safari iOS ? Samsung Internet Android ?
timeEndChrome Vollständige Unterstützung 4Edge Vollständige Unterstützung 12Firefox Vollständige Unterstützung 10IE Vollständige Unterstützung 11Opera Vollständige Unterstützung JaSafari Vollständige Unterstützung 4WebView Android Vollständige Unterstützung 37Chrome Android Vollständige Unterstützung 18Firefox Android Vollständige Unterstützung 10Opera Android ? Safari iOS ? Samsung Internet Android ?
timeLogChrome Vollständige Unterstützung 72Edge Keine Unterstützung NeinFirefox Vollständige Unterstützung 62IE Keine Unterstützung NeinOpera Vollständige Unterstützung 60Safari Keine Unterstützung Nein
Hinweise
Keine Unterstützung Nein
Hinweise
Hinweise See bug 186833.
WebView Android Vollständige Unterstützung 72Chrome Android Vollständige Unterstützung 72Firefox Android Vollständige Unterstützung 62Opera Android ? Safari iOS Keine Unterstützung NeinSamsung Internet Android Keine Unterstützung Nein
timestamp
ExperimentellNicht standardisiert
Chrome Vollständige Unterstützung JaEdge Vollständige Unterstützung 12Firefox Vollständige Unterstützung JaIE Vollständige Unterstützung 11Opera Vollständige Unterstützung JaSafari Vollständige Unterstützung JaWebView Android Vollständige Unterstützung JaChrome Android Vollständige Unterstützung JaFirefox Android Vollständige Unterstützung 10Opera Android ? Safari iOS ? Samsung Internet Android ?
traceChrome Vollständige Unterstützung JaEdge Vollständige Unterstützung 12Firefox Vollständige Unterstützung 10IE Vollständige Unterstützung 11Opera Vollständige Unterstützung JaSafari Vollständige Unterstützung JaWebView Android Vollständige Unterstützung JaChrome Android Vollständige Unterstützung JaFirefox Android Vollständige Unterstützung 10Opera Android ? Safari iOS ? Samsung Internet Android ?
warnChrome Vollständige Unterstützung JaEdge Vollständige Unterstützung 12Firefox Vollständige Unterstützung 4IE Vollständige Unterstützung 8Opera Vollständige Unterstützung JaSafari Vollständige Unterstützung JaWebView Android Vollständige Unterstützung JaChrome Android Vollständige Unterstützung JaFirefox Android Vollständige Unterstützung 4Opera Android ? Safari iOS ? Samsung Internet Android ?
Available in workersChrome Vollständige Unterstützung JaEdge Vollständige Unterstützung JaFirefox Vollständige Unterstützung 38IE Vollständige Unterstützung JaOpera Vollständige Unterstützung JaSafari Vollständige Unterstützung JaWebView Android Vollständige Unterstützung JaChrome Android Vollständige Unterstützung JaFirefox Android Vollständige Unterstützung 38Opera Android ? Safari iOS ? Samsung Internet Android ?

Legende

Vollständige Unterstützung  
Vollständige Unterstützung
Teilweise Unterstützung  
Teilweise Unterstützung
Keine Unterstützung  
Keine Unterstützung
Kompatibilität unbekannt  
Kompatibilität unbekannt
Experimentell. Das Verhalten kann sich zukünftig ändern.
Experimentell. Das Verhalten kann sich zukünftig ändern.
Nicht standardisiert. Erwarte schlechte browserübergreifende Unterstützung.
Nicht standardisiert. Erwarte schlechte browserübergreifende Unterstützung.
Veraltet. Nicht für den Einsatz in neuen Webseiten gedacht.
Veraltet. Nicht für den Einsatz in neuen Webseiten gedacht.
Siehe Implementierungshinweise.
Siehe Implementierungshinweise.

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