Verwenden der Konsole zum Anzeigen von Fehlern und zum Debuggen

Mit dem Tool Konsole können Sie Fehler und andere Meldungen anzeigen, Debugausgaben senden, JavaScript-Objekte und XML-Knoten überprüfen sowie JavaScript im Kontext des ausgewählten Fensters oder Frames ausführen.

Einblick in Ihren Code

Tool "Konsole" in den F12-Entwicklungstools

Der primäre Verwendungszweck des Tools Konsole ist das Senden von Informationen an und aus aktive(n) Webseiten:

  • An Webseiten: Sie führen JavaScript aus, um Werte in aktiven Webseiten anzuzeigen und zu ändern, fügen dem ausgeführten Code Funktionen hinzu und führen Debugcode direkt aus.
  • Aus Webseiten: Internet Explorer und JavaScript-Code liefern Entwicklern Status-, Fehler- und Debugmeldungen, einschließlich Inspectable-JavaScript-Objekte und -DOM-Knoten.

Senden von Informationen an die Konsole

Auswählen des Ausführungsziels

Neu in Windows 8.1 Update ist das Dropdownmenü Ziel direkt über dem Ausgabebereich Konsole der Konsole. Wenn die Webseite, die Sie anzeigen, ein iframe-Element enthält, wählen Sie im Menü Ziel das iframe-Element aus, um Befehle der Konsole nur im Bereich von iframe auszuführen. Wenn die Webseite keine iframes enthält, lautet die einzige Auswahlmöglichkeit „_top“.

Meldungen, die von Internet Explorer an die Konsole gesendet werden

Die Konsole zeigt erst dann Meldungen an, wenn sie gestartet wurde. Starten Sie die Konsole, indem Sie die F12-Entwicklungstools öffnen und das Tool Konsole auswählen (STRG+2). Sie können die Konsole auch in anderen Tools mithilfe der Schaltfläche Konsole anzeigen in der oberen rechten Ecke des Toolbereichs oder mit STRG+` öffnen.

Beispiel für eine Systemmeldung der Konsole

Wie Sie in dieser Abbildung sehen können, gibt es drei Kategorien von Internet Explorer-Systemmeldungen. Diese Kategorien sind:

  • Info: Nicht kritische Informationen, die für Sie nützlich sein können.
  • Warnung: Mögliche Fehler in Ihrer Webseite, die nicht unbedingt zu einer Unterbrechung der Ausführung, aber zu unerwartetem Verhalten führen können.
  • Fehler: Kritische Fehler, die die Ausführung des Codes verhindern. Weitere Informationen finden Sie in der Liste der in der Konsole verwendeten Internet Explorer-Fehlercodes.

Diese Meldungen können in der Konsolenausgabe herausgefiltert werden. Die oben im Konsolenbereich angezeigten Symbole für die einzelnen Meldungstypen fungieren als Umschaltflächen. Klicken Sie auf ein Symbol, um den zugehörigen Meldungstyp auszublenden. Wenn Sie erneut darauf klicken, werden die Meldungen wieder angezeigt. Sie können auch mit der rechten Maustaste in die Konsolenausgabe klicken und die Kontrollkästchen für die Meldungstypen im Kontextmenü verwenden.

Wenn Sie auf den Dateinamen hinter einer Meldung klicken, öffnen Sie dadurch das Tool Debugger und laden die Datei in den Skriptbereich.

Neu im Windows 8.1-Update ist ein weiterer Umschalter neben den Meldungstypen auf der rechten Seite. Wenn das Symbol Beim Navigieren löschen markiert ist, führt die Konsole bei jedem Navigieren des Browsers zu einer neuen Webseite einen Löschvorgang aus. Wenn das Symbol nicht markiert ist, behält der Browser die Inhalte der Konsole bei.

In früheren Versionen der F12-Tools werden an die Konsole geleitete Ausgaben während einer Browsersitzung erst dann aufgezeichnet, nachdem die Konsole geöffnet wurde. Für Entwickler, die eine fortlaufende Aufzeichnung von Meldungen durch die Konsole benötigen, beinhaltet Windows 8.1 Update die neue Option Meldungen der Entwicklerkonsole immer aufzeichnen. So finden Sie die Option

  • Öffnen Sie im Menü Extras das Fenster Internetoptionen.
  • Auf der Registerkarte Erweitert im Bereich Browsen finden Sie die Option Meldungen der Entwicklerkonsole immer aufzeichnen.

Für eine optimale Browserleistung wird empfohlen, die Option Meldungen der Entwicklerkonsole immer aufzeichnen zu deaktivieren, wenn Sie Ihre eigenen Inhalte nicht aktiv debuggen.

Meldungen, die Entwickler über den Code an die Konsole senden können

Die API für das Debuggen über die Konsole bietet Methoden, mit denen Sie über Ihren Code Informationen an die Konsole senden können. Folgende Arten von Informationen werden dabei unterschieden:

Benutzerdefinierte Meldungen

Für benutzerdefinierte Meldungen stehen Ihnen vier Optionen zur Verfügung. Bei drei dieser Optionen wird das Format von Systemmeldungen verwendet: console.info() für Informationsmeldungen, console.warn() für Warnungen und console.error() für Fehler. Die vierte Option console.log() stellt Nur-Text ohne Warnsymbol dar. Alle vier Optionen akzeptieren die gleichen Argumentformate für die Meldung.

  • Nur Text:
    
    console.log('This is some text');
    
    
    This is some text
    
  • Nur eine Variable:
    
    var mytext = 'This is some text';
    console.log(mytext);
    
    
    This is some text
    
  • Mischung aus Text und Variablen:
    
    var mytext = 'pieces';
    var myval = 0;
    console.log("The number of " + mytext + "is " + myval);
    
    
    The number of pieces is 0
    
  • Variablenersetzung:
    
    var mytext = 'pieces';
    var myval = 5;
    console.log("The number of %s is %d", mytext, myval);
    
    
    The number of pieces is 5
    

    Für die Variablenersetzung sind fünf Variablentypen verfügbar:

    • %s – Zeichenfolge
    • %d – ganze Zahl
    • %i – ganze Zahl
    • %f – Gleitkommazahl
    • %o – Objekt
    • %b – Binärwert
    • %x – Hexadezimalwert
    • %e – Exponent
    Die Variablentypen bestimmen, wie die Variable dargestellt wird. Ein durch einen ganzzahligen Variablentyp dargestellter Floatwert wird z. B. als ganze Zahl angezeigt.

Inspectable-Objekte und -Knoten

Inspectable-Objekte sind neu in Internet Explorer 11. Sie werden in der Konsole in einem reduzierten Strukturformat mit erweiterbaren Knoten angezeigt.

Um ein Inspectable-JavaScript-Objekt anzuzeigen, senden Sie es mit console.dir() an die Konsole.
Um einen Inspectable-DOM-Knoten anzuzeigen, senden Sie ihn mit console.dirxml() an die Konsole.


<div id="thediv">
   <p>Click the button to show this div as a JavaScript object and a 
   <em>DOM</em> node.</p>
   <button id="thebutton">show it</button>
</div>
<script>
  document.getElementById('thebutton').addEventListener('click', function(e){
    var divid = document.getElementById('thediv');
    console.log('Showing the div element as a DOM node.');	
    console.dirxml(divid);
    console.log('Showing the div element as a JavaScript object.');
    console.dir(divid);
    console.log('Showing the div element via a plain console.log.');
    console.log(divid);
    console.log('Showing the click event via a plain console.log.');
    console.log(e);
    console.log('Argument logging for %s', thediv.id, thediv)
  });
</script>

Verwendung der Methoden "console.dir()" und "console.dirxml()" in der Konsole

Verwenden Sie die Pfeile auf der linken Seite, um Objekte und Knoten zu erweitern.

Wenn Sie mit der rechten Maustaste auf DOM-Knoten klicken, enthält das Kontextmenü eine Option Als Objekt auswerten. Bei Auswahl dieser Option wird der Knoten als Objekt an die Konsole gesendet. Für JavaScript-Objekte, die DOM-Knoten darstellen, ist ebenfalls eine Option Als Objekt auswerten im Kontextmenü verfügbar.

Neu im Windows 8.1-Update ist die intelligentere Protokollierung durch die Konsole. Beispiel: bei der Konsolenanzeige via console.log() wird das div-Element als Inspectable-DOM-Knoten angezeigt, während das Click-Ereignis jedoch als Inspectable-JavaScript-Objekt angezeigt wird. Selbst wenn Text ausgegeben wird und console.log() ein HTML-Element oder JavaScript-Objekt als Argument enthält, ist die Ausgabe ein Inspectable-Objekt.

Zähler

Das Einrichten eines Zählers im Code ist recht einfach, aber auch eine Aufgabe, die sich oft wiederholt. Um den Arbeitsablauf für Entwickler zu beschleunigen, bietet die API für das Debuggen über die Konsole eine einfache Kompaktmethode.

Verwenden Sie console.count() mit einer Zeichenfolge, die eine Zählerbezeichnung als Argument enthält. Bei der ersten Verwendung mit einer bestimmten Bezeichnung wird ein Zähler in der Konsolenausgabe eingerichtet. Bei nachfolgenden Verwendungen von console.count() mit derselben Bezeichnung wird der Zählerwert erhöht. Um den Zähler auf Null zurückzusetzen, verwenden Sie console.countReset() mit der Bezeichnung.


console.count('mylabel');
for(var i = 0; i < 10; i++){
  console.count('mylabel');
}

mylabel:         11

Timer

Wie das Erstellen von Zählern ist auch das Erstellen eines Timers im Code recht einfach. Die API für das Debuggen über die Konsole bietet jedoch eine einfache Kompaktmethode, durch die das Ganze noch einfacher wird.

Verwenden Sie console.time() an einer beliebigen Stelle in Ihrem Code, um einen Timer zu starten, und console.timeEnd(), um den Timer zu beenden und das Ergebnis an die Konsole zu senden. Falls Sie eine Bezeichnung für Ihren Timer angeben möchten oder mehrere Timer benötigen, übergeben Sie eine Zeichenfolge mit einer eindeutigen Bezeichnung als Argument für die console.time()- und console.timeEnd()-Methoden. Wenn Sie kein Argument übergeben, verwenden die Methoden "default" als Bezeichnung.

Assertionen

Assertionen sind eine weitere Kompaktmethode, um den Arbeitsablauf für Entwickler zu straffen. Wenn das erste mit console.assert() verwendete Argument zu false ausgewertet wird, wird console.error() mit den weiteren Argumenten der Assertion für die Fehlermeldung ausgeführt.

Verwenden Sie die folgende Codezeile:


console.assert(f < 25, 'f is not less than %d, but is instead %o', 25, f);

Und das Äquivalent für:


if(!(f < 25)){
  console.error('f is not less than %d, but is instead %o', 25, f)
}

Im Beispielcode haben wir %o zum Ausgeben der Variable verwendet. Da die obige Auswertung fehlschlägt, wenn es sich beim Wert der Variable nicht um eine Zahl handelt, bietet %o die Möglichkeit, die Variable so anzuzeigen wie sie ist, anstatt sie in einen bestimmten Typ umzuwandeln.

Ablaufverfolgungen und Profile

Zu wissen, wo Ihr Code aufgerufen wird, welcher Code ausgeführt wird und wie lange diese Ausführung dauert, kann beim Analysieren von Geschwindigkeitsproblemen oder unerwartetem Verhalten hilfreich sein.

Eine Ablaufverfolgung zeigt den Ausführungspfad Ihres Codes ab der Ablaufverfolgungsanforderung. Verwenden Sie console.trace() in Ihrem Code, um eine Ablaufverfolgung anzuzeigen.

Dieser Code...


function a(){
  c();
}
function b(){
  c();
}
function c(){
  console.trace()
}
function d(){
  b();
}

a();
d();

...zeigt die folgende Ausgabe in der Konsole an:

console.trace()
at c (http://www.contoso.com/trace.html:24:3)
at a (http://www.contoso.com/trace.html:18:3)
at Global code (http://www.contoso.com/trace.html:30:1)
console.trace()
at c (http://www.contoso.com/trace.html:24:3)
at b (http://www.contoso.com/trace.html:21:3)
at d (http://www.contoso.com/trace.html:27:3)
at Global code (http://www.contoso.com/trace.html:31:1)

In anderen Fällen kann es sehr nützlich sein, jedes Stückchen Code zu sehen, das zwischen zwei Punkten ausgeführt wird. In diesen Situationen ist der Profiler das beste Tool. Es kann aber auch vorkommen, dass mehr Genauigkeit als ein manuelles Beenden und Starten erforderlich ist.

Um den Profiler in Ihrem Code präzise zu starten und zu beenden, verwenden Sie console.profile() zum Starten der Aufzeichnung einer Profiler-Sitzung und console.profileEnd() zum Beenden der Aufzeichnung.

Übergeben Sie eine Zeichenfolge als Argument der Methode an console.profile(), um sie als Namen für den Profilerstellungsbericht zu verwenden.

Achtung  Überlappende Profilerstellungssitzungen können zu unerwarteten Ergebnissen führen. Verwenden Sie console.trace() anstelle von console.profile() für einen ersten Testlauf, um sicherzustellen, dass Sie console.profile() vor dem Beenden der Profilerstellungssitzung nicht mehrmals aufrufen. Falls Sie mehr Ablaufverfolgungen als erwartet erhalten, kann dies Ihr Problem sein.

Verwalten von Meldungen zum Verbessern der Lesbarkeit

Organisieren von Meldungen in Gruppen

Da sehr viele Meldungs- und Inhaltstypen an die Konsole gesendet werden, kann es schwierig sein, den Überblick zu behalten. Mit den folgenden Befehlen können Sie Ordnung in Ihre Meldungen bringen:

  • console.group() beginnt eine reduzierbare Gruppe in erweitertem Zustand. Jede Meldung, die nach diesem Befehl an die Konsole gesendet wird, wird dieser Gruppe zugeordnet, bis die console.groupEnd()-Methode aufgerufen wird. Wenn eine Zeichenfolge als erstes Argument für die Methode angegeben wird, wird die Zeichenfolge als Bezeichnung für die Gruppe verwendet.
  • console.groupCollapsed() beginnt eine reduzierbare Gruppe in reduziertem Zustand. Ansonsten verhält sich die Methode wie console.group().
  • console.groupEnd() schließt die zuletzt geöffnete Gruppe.
  • console.clear() löscht alle momentan in der Konsole angezeigten Meldungen.

Gruppen können ineinander geschachtelt werden, um detailliertere Gruppierungsebenen zu schaffen.

Verwenden Sie Filter, um verschiedene Meldungstypen zu aktivieren und zu deaktivieren.

Oben im Tool Konsole befinden sich Symbole für Fehler-, Warnungs- und Informationsmeldungen, neben denen die jeweilige Anzahl von Meldungen angezeigt wird. Klicken Sie auf ein Symbol, um die Anzeige des jeweiligen Meldungstyps ein- oder auszuschalten. Ausgeschaltete Meldungstypen werden ausgeblendet, aber nicht gelöscht, und können durch erneutes Klicken auf das Symbol wieder angezeigt werden.

Wenn Sie mit der rechten Maustaste in die Konsolenausgabe klicken, wird ein Kontextmenü mit Kontrollkästchen für die drei Hauptmeldungstypen sowie mit console.log() gesendete Meldungen angezeigt.

Senden von JavaScript an die Konsole

Die Konsole zeigt nicht nur die Ausgabe von Code an, sondern ist auch eine Schnittstelle für die Ausführung von Code. Geben Sie einfach im Befehlszeilenbereich unten in der Konsole gültigen JavaScript-Code ein.

Einzeilige Befehlszeile in der F12-Konsole

Das gesamte, in der Befehlszeile eingegebene Skript wird im globalen Gültigkeitsbereich des momentan ausgewählten Fensters ausgeführt. Wenn Sie Ihre Webseite mit einem frameset- oder iframes-Element erstellt haben, laden diese Frames ihre Dokumente in eigenen Fenstern.

Um das Fenster eines Frameset-Frames oder IFrames als Ziel festzulegen, verwenden Sie den Befehl cd() mit dem Namen oder ID-Attribut des Frames bzw. IFrames als Argument. Angenommen, Sie haben einen Frame mit dem Namen microsoftFrame und laden darin die Microsoft-Homepage.


cd(microsoftFrame);

Current window: www.microsoft.com/en-us/default.aspx

Wichtig  Beachten Sie, dass der Name des Frames nicht in Anführungszeichen gesetzt wird. Übergeben Sie nur den Namen ohne Anführungszeichen oder den ID-Wert als Parameter.

Um zum Fenster auf oberster Ebene zurückzukehren, verwenden Sie cd() ohne Argument.

Auswählen von Elementen in der Konsole

Konsolenselektoren sind neu in IE11. Sie ermöglichen die schnelle Auswahl von Elementen in der DOM-Struktur. Folgende Selektoren sind verfügbar:

Wichtig  Wenn Code in einer Webseite $ oder $$ eine Funktion zuweist, setzt diese Funktion die Konsolenselektorfunktionen außer Kraft, während die Konsole mit der Seite oder den Seitenframes interagiert.

The multiline command line

Das Senden einzeiliger Befehle ist nützlich, manche Aufgaben erfordern aber die Ausführung längerer Skripts. Klicken Sie auf den doppelten Pfeil nach oben, um die Befehlszeile zu erweitern. Geben Sie im Mehrzeilenmodus so viele Zeilen wie nötig ein, und klicken Sie anschließend auf den grünen Pfeil, um den Code in der Konsole auszuführen.

Befehlszeile der F12-Konsole im Mehrzeilenmodus

Verwandte Themen

API für das Debuggen über die Konsole
Fehlermeldungen in der Konsole in F12-Entwicklertools

 

 

Anzeigen:
© 2014 Microsoft