Debuggen von Skripts mithilfe der Entwicklertools

Artikel
02/03/2010

Neu für Windows Internet Explorer 8

Die Funktion "Entwicklertools" von Internet Explorer 8 stellt einen integrierten, einfachen Microsoft JScript-Debugger bereit, der Entwicklern ermöglicht, Haltepunkte festzulegen und clientseitigen JScript-Code ohne Verlassens des Browsers durchzugehen. In diesem Dokument werden die wichtigsten Funktionen des JScript-Debuggers beschrieben. Um sich mit den anderen Funktionen der Internet Explorer 8-Entwicklertools vertraut zu machen, informieren Sie sich in Entdecken der Internet Explorer-Entwicklertools; eine vollständige Referenz der Entwicklertools-Schnittstellenbefehle finden Sie in Referenz zur Benutzeroberfläche der Entwicklertools.

Einführung
Starten des Debuggings
Festlegen von Haltepunkten
Steuern der Ausführung
Prüfen von Variablen
Untersuchen der Aufrufliste
Verwenden der Konsole zur Ausführung von Codeanweisungen
Verwenden der Konsole zum Protokollieren von Warnungen und Fehlermeldungen
Anmerkungen
Verwandte Themen

Einführung

JScript-Debugging ist ein wichtiger Teil der Webentwicklung. Mithilfe des intuitiven und einfachen JScript-Debuggers ermöglicht die Funktion "Entwicklertools" ein einfaches und umfassendes JScript-Debugging. Entwickler können nach der Installation von Internet Explorer JScript auf jeder Site, die in Internet Explorer geladen wurde, debuggen.

Um Entwicklertools innerhalb von Internet Explorer 8 zu öffnen, drücken Sie F12. Sie können auch auf der Tools-Befehlsleiste auf die Schaltfläche für die Entwicklertools klicken.

Hinweis Obwohl der JScript-Debugger zum Debuggen jedes Moduls verwendet werden kann, das IActiveScriptSite-Schnittstellen (wie Microsoft Visual Basic Scripting Edition (VBScript)) implementiert, wird nur JScript-Debugging unterstützt.

Starten des Debuggings

Zeigt die Benutzeroberfläche der Skriptmodusregisterkarte an

Abbildung 1. Die Benutzeroberfläche der Skriptregisterkarte

Starten Sie mithilfe der Entwicklertools auf der Registerkarte "Skript" das Debugging, indem Sie auf die Schaltfläche zum Debuggen klicken oder die Taste F5 drücken. Durch das Klicken auf diese Schaltfläche werden die folgenden Ereignisse ausgelöst:

Im Dialogfeld "Debuggen erfordert Aktualisierung der Webseite" können Sie die Seite aktualisieren. Wenn Sie auf "OK" klicken, startet das Debugging, und die Seite wird aktualisiert; wenn Sie auf "Abbrechen" klicken, startet das Debugging nicht, und die Seite wird nicht aktualisiert.
Sobald das Debugging startet, wird die Fixierung aufgehoben, wenn das Fenster "Entwicklertools" auf der Internet Explorer 8-Instanz fixiert ist. Wenn das Debugging aufhört, können Sie es wieder auf der Internet Explorer 8-Instanz fixieren.

Um das Debugging zu beenden, klicken Sie entweder auf die Schaltfläche zum Beenden des Debuggings, oder drücken Sie UMSCHALT+F5.

Hinweis Das Dialogfeld "Debuggen erfordert Aktualisierung der Webseite" wird nur angezeigt, wenn Sie kein Skriptdebugging für Internet Explorer aktiviert haben. Wenn Sie im Dialogfeld auf "OK" klicken, wird vorübergehend Skriptdebugging für diese Instanz von Internet Explorer aktiviert, bis Sie das Fenster schließen. Um Skriptdebugging für alle Instanzen von Internet Explorer zu aktivieren, klicken Sie im Menü "Internetoptionen" auf die Registerkarte "Erweitert". Entfernen Sie anschließend in der Kategorie "Browsen" die Markierung für die Option "Skriptdebugging deaktivieren (Internet Explorer)", und klicken Sie dann auf "OK". Damit die Änderungen wirksam werden, schließen Sie alle Instanzen von Internet Explorer, und öffnen Sie sie erneut.

Hinweis Alle Skripts auf einer Seite, sowohl separate Dateien als auch Inlineskriptblöcke, sind im Dropdownfeld "Skriptliste" verfügbar, unabhängig davon, ob das Debugging gestartet wurde oder nicht. Sie können jederzeit zwischen diese Dateien umschalten, während Sie sich auf der Registerkarte "Skriptmodus" befinden. Die Quelle der gerade ausgewählten Datei wird im primären Inhaltsbereich angezeigt.

Festlegen von Haltepunkten

Im primären Inhaltsbereich, in dem der Skriptcode angezeigt wird, können Sie Haltepunkte folgendermaßen festlegen:

Klicken auf die Zeilennummer, um einen Haltepunkt einzufügen oder zu löschen
Klicken mit der rechten Maustaste auf eine Codezeile und Auswahl von "Haltepunkt einfügen"
Positionieren des Cursors auf einer Codezeile und Drücken von F9, um einen Haltepunkt einzufügen oder zu löschen

Haltepunkte können festgelegt werden, unabhängig davon, ob der Debugger gestartet wurde oder nicht. Sobald ein Haltepunkt festgelegt wird, wird das Haltepunktsymbol neben der Zeilennummer des Codes angezeigt, und der Code für diese Zeile wird hervorgehoben.

Ein Haltepunkt hält die Skriptausführung unmittelbar vor der Haltepunktzeile an, und der Debugger hebt die nächste Zeile hervor, die ausgeführt werden soll. Beim Debuggen führen alle Laufzeitfehler dazu, dass der Debugger automatisch an der Fehlerstelle angehalten wird. Um zu verhindern, auf einem Fehler anzuhalten, entfernen Sie die Markierung für die Umschaltfläche "Bei Fehler unterbrechen", oder drücken Sie STRG+UMSCHALT+E. Während der Debugger die Ausführung anhält, reagiert der Browser nicht auf Benutzereingaben.

Zeigt die Einstellung und das Verwalten von Haltepunkten an

Abbildung 2. Festlegen und Verwalten von Haltepunkten

Die Registerkarte "Haltepunkte" des Debuggers enthält eine Liste aller Haltepunkte. Dort können Sie den Speicherort aller Haltepunkte finden, zusammen mit dem Dateinamen und der Nummer der Zeile, für die ein Haltepunkt festgelegt wurde. Um zum Quellcodespeicherort eines Haltepunkts zu wechseln, doppelklicken Sie in der Liste auf den Haltepunkt. Um den Haltepunkt zu deaktivieren, ohne ihn zu entfernen, deaktivieren Sie das Kontrollkästchen neben dem Haltepunkt. Um den Haltepunkt zu entfernen, klicken Sie mit der rechten Maustaste auf ihn, und wählen Sie im Kontextmenü "Löschen" aus. Selbst wenn Sie von der aktuellen Website weg navigieren, behält Windows Internet Explorer die Haltepunktinformationen bei, bis Sie die Entwicklertools schließen.

Hinweis Ein Haltepunkt kann in zahlreichen Szenarien ungültig werden. Ein ungültiger Haltepunkt wird deaktiviert, und ein Warnsymbol wird oben auf dem Haltepunktsymbol angezeigt. Ein Haltepunkt wird ungültig, wenn Sie von der Site weg navigieren, auf der er festgelegt wurde. Er kann ungültig sein, wenn Sie ihn im Debugmodus an einer falschen Position festlegen, oder wenn Sie anfangen zu debuggen und der Debugger keinen entsprechenden Code findet. Er kann auch ungültig werden, wenn Sie die Seite aktualisieren, auf der er festgelegt wird, und der Quellcode geändert wird.

Wenn ein Haltepunkt festgelegt wird, hält die Ausführung jedes Mal beim Haltepunkt an, wenn sie auf ihn trifft. Wenn Sie möchten, dass die Ausführung nur dann bei diesem Haltepunkt angehalten wird, wenn eine bestimmte Bedingung den Wert true hat, legen Sie eine Bedingung für diesen Haltepunkt fest. Um eine Haltepunktbedingung festzulegen, gehen Sie wie folgt vor:

Klicken Sie mit der rechten Maustaste auf den Haltepunkt im primären Inhaltsbereich oder im Haltepunktbereich. Ein Kontextmenü wird angezeigt.
Wählen Sie die Option "Bedingung..." aus. Ein Dialogfeld wird angezeigt.
Geben Sie im Dialogfeld "Bedingter Haltepunkt" die Bedingung ein, und klicken Sie auf "OK".

Dies bewirkt, dass der Debugger die Ausführung an diesem Haltepunkt nur dann anhält, wenn die Bedingung den Wert true hat.

Steuern der Ausführung

Haltepunkte werden verwendet, um die Skriptausführung anzuhalten, um Ihnen die Möglichkeit zu geben, den Zustand der Codes an diesem Punkt zu überprüfen. Wenn die Ausführung an einem Haltepunkt anhält, können Sie die Ausführung mit einer der folgenden Befehlsschaltflächen steuern:

Die Ablaufsteuerungsschaltflächen des Debuggers

Fortsetzen

Führt das Skript weiterhin aus, ohne anzuhalten, bis ein anderer Haltepunkt oder ein Skriptfehler getroffen wird. Tastenkombination: F5.
Alle unterbrechen

Hält die Ausführung sofort an, bevor die nächste Skriptanweisung ausgeführt wird. Klicken Sie auf die Schaltfläche, oder drücken Sie STRG+UMSCHALT+B, um diesen Befehl zu aktivieren. Führen Sie dann die Aktionen aus, die Sie debuggen möchten.
Bei Fehler unterbrechen

Halten Sie die Ausführung an dem Punkt an, an dem der Fehler aufgetreten ist. Dieser Befehl ist standardmäßig aktiv. Wenn Sie nicht möchten, dass die Ausführung an diesen Fehlerpunkten angehalten wird, klicken Sie auf diese Schaltfläche, um diesen Befehl zu deaktivieren. In beiden Fällen wird jedoch in der Konsole für jeden Fehler eine Fehlermeldung angezeigt. Tastenkombination, um den Befehl ein- bzw. auszuschalten: STRG+UMSCHALT+E.
Einzelschritt

Führt die nächste Zeile des Skripts aus und hält an, auch wenn sich die nächste Zeile in einer neuen Methode befindet. Tastenkombination: F11.
Prozedurschritt

Fährt zur nächsten Zeile des Skripts in der aktuellen Methode fort und hält dann an. Die ist nützlich, um über Methodenaufrufe hinwegzugehen. Tastenkombination: F10.
Ausführen bis Rücksprung

Führt das Skript bis zur nächsten Zeile in der Methode aus, die die aktuelle Methode aufgerufen hat. Dies ist nützlich, um aus Schleifen und Methodenaufrufen herauszugehen. Tastenkombination: UMSCHALT+F10.

Prüfen von Variablen

Jede Variable kann in den Bereichen "Lokale Variablen" und "Überwachen" überprüft werden. So überprüfen Sie Variablen

Starten Sie den Debugger durch Klicken auf "Debuggen starten".
Legen Sie einen oder mehrere Haltepunkte für den Ausführungspfad fest.
Führen Sie anschließend die Skripts aus.

Während der Ausführung hält der Debugger beim ersten Haltepunkt an, auf den er trifft. Sobald die Ausführung angehalten wird, können die Variablen in den Bereichen "Lokale Variablen" und "Überwachen" überprüft und bearbeitet werden.

Im Bereich "Lokale Variablen" des Debuggers werden der Name, der Wert und der Typ aller Variablen angezeigt, die im aktuellen Ausführungsbereich verfügbar sind. Wenn eine Variable nicht innerhalb des Bereichs ist, ist sie nicht verfügbar und wird nicht im Bereich "Lokale Variablen" angezeigt. Verwenden Sie für diese Variablen und Objekte außerhalb des Bereichs den Bereich "Überwachen", um diese zu überwachen.

Sie können Variablen aus verschiedenen Bereichen beobachten, indem Sie sie dem Bereich "Überwachen" hinzufügen. Sie können dem Bereich "Überwachen" auf die mehrere Arten Variablen hinzufügen:

Wählen Sie aus dem primären Inhaltsbereich einen Skripttext aus, klicken Sie dann mit der rechten Maustaste, um das Kontextmenü zu aktivieren, und klicken Sie auf "Überwachung hinzufügen". Dies fügt der Überwachungsliste diesen Text hinzu.
Klicken Sie mit der rechten Maustaste im Bereich "Lokale Variablen" auf eine Variable oder ein Objekt, klicken Sie dann auf "Überwachung hinzufügen", um sie bzw. es der Überwachungsliste hinzuzufügen.
Klicken Sie im Bereich "Überwachen" auf "Zum Hinzufügen klicken", und geben Sie dann den Namen einer Variablen ein, die Sie beobachten möchten. Der Text, den Sie durch Klicken hinzugefügt haben, finden Sie am Ende der Überwachungsliste, da es sich um das letzte Element in der Überwachungsliste handelt.

Zeigt überprüfende Variablen im Bereich Lokale Variablen an.

Abbildung 3. Das Überprüfen von Variablen im Bereich "Lokale Variablen".

Mit jeder Ausführung einer Codezeile aktualisiert der Debugger die Variablenwerte in den Bereichen "Lokale Variablen" und "Überwachen". Die aktualisierten Werte werden als roter Text angezeigt. Um den Wert einer Variablen im Bereich "Lokale Variablen" oder "Überwachen" zu ändern, doppelklicken Sie auf den Wert, geben Sie einen neuen Wert ein, und drücken Sie die EINGABETASTE. Alternativ können Sie mit der rechten Maustaste auf das Objekt und dann auf "Wert bearbeiten" klicken, um mit der Bearbeitung anzufangen. Sobald Sie fertig sind, drücken Sie die EINGABETASTE, um die Bearbeitung zu übergeben, oder auf ESC, um die Bearbeitung zu verwerfen.

Untersuchen der Aufrufliste

Der Bereich "Callstack" stellt immer dann eine Liste von Ausführungskontexten bereit, wenn der Debugger die Ausführung an einem Haltepunkt anhält. Um zu irgendeinem Stapelelement zu springen, doppelklicken Sie auf das Element. Der Debugger zeigt diese Methode im primären Inhaltsbereich an. Von dort können Sie die Variablen in diesem Ausführungskontext in den Bereichen "Lokale Variablen" und "Überwachen" überprüfen.

Verwenden der Konsole zur Ausführung von Codeanweisungen

Der Bereich "Konsole" des Debuggers stellt eine Konsole für die direkte Ausführung von Skriptanweisungen bereit. Geben Sie eine gültige Anweisung oder einen gültigen Variablennamen ein, und drücken Sie die EINGABETASTE (oder klicken Sie auf "Skript ausführen"), um diese Anweisung im Kontext der aktuellen Seite direkt dort auszuführen, wo die Ausführung angehalten wird.

Um die Werte von Variablen festzulegen, verwenden Sie die Standardzuweisungssyntax:

s = 'my query string';

Durch Klicken auf die Schaltfläche "Mehrzeiliger Modus" wird das Eingabefenster erweitert, um das Eintragen mehrerer Zeilen zu ermöglichen. Außerdem wird das Verhalten der EINGABETASTE geändert, so dass der Schlüssel eine neue Zeile erstellt anstatt das Skript auszuführen. Hier können Sie mehrere Codezeilen eingeben und diese dann durch Klicken auf "Skript ausführen" ausführen. Das Eingabefenster, das in der Größe veränderbar ist, bietet zusätzliche Steuerungen durch das Kontextmenü an.

Sie können den Bereich "Konsole" jederzeit verwenden, auch wenn Debugger nicht gestartet wurde. Wenn die Ausführung an einem Haltepunkt anhält, werden die in diesem Bereich eingegebenen Befehle im Ausführungsbereich des Haltepunkts ausgeführt; wenn die Ausführung nicht angehalten wird, werden die Befehle im globalen Bereich ausgeführt.

Verwenden der Konsole zum Protokollieren von Warnungen und Fehlermeldungen

Alle Skriptfehler in einer bestimmten Instanz von Internet Explorer werden zum Bereich "Konsole" protokolliert, sobald das Entwicklertool geöffnet ist. Um zum Fehlerspeicherort zu navigieren, klicken Sie auf die Quellinformationen, die im Fehler bereitgestellt wurden.

Sie können Nachrichten in der Konsole auch mithilfe von console.log-APIs protokollieren. Rufen Sie "console.log" auf, um Zeichenfolgen in den Bereich "Konsole" auszugeben, statt "window.alert()" zu verwenden und unzählige Dialogfelder zu generieren. Um zwischen Nachrichten zu unterscheiden, verwenden Sie eine andere console.log-APIs, z. B.:

console.log
console.info
console.warn
console.error
console.assert

Diese Konsolenbefehle können mit einer Liste von Argumenten aufgerufen werden, die verkettet werden, um die Ausgabezeichenfolge zu generieren. Die Argumente können auch mit Ersetzungsmustern im Format von "printf" formatiert werden. Sie können z. B. in einer der folgenden Methoden "console.log" anrufen:

console.log("Variable x = " + x + " and variable y = " + y)
console.log("Variable x = ", x, " and variable y = ", y)
console.log("Variable x = %d and variable y = %d", x, y)

Der console.assert-Befehl erfordert jedoch einen Ausdruck im ersten Argument, um entweder als wahr oder als false auszuwerten. Wenn der Ausdruck true ergibt, dann wird die Assertionsnachricht nicht zur Konsole ausgegeben; andernfalls wird die Nachricht zur Konsole ausgegeben. Beispiel:


var x = 1;
var y = 1;
//This expression evaluates to TRUE, so the message will not show up in the console
console.assert(x==y, "ASSERT: x == " + x + "; y == " + y);
//This expression will evaluates to FALSE so the message will show up in the console
y = 2;
console.assert(x==y, "ASSERT: x == " + x + "; y == " + y);

Diese Konsolennachrichten können im Konsolenbereich gefiltert werden, um angezeigt oder ausgeblendet zu werden. Um die Nachrichten auszuwählen, die Sie im Konsolenbereich anzeigen oder ausblenden möchten, legen Sie den Filter wie folgt fest: Klicken Sie mit der rechten Maustaste auf den Konsolenbereich, und verschieben Sie den Cursor auf "Filter". Eine Liste verfügbarer Filter wird dort angezeigt, wo der Filter mit einem Häkchen aktiviert ist.

Außerdem kann das Konsolenobjekt erweitert werden, um der Entwicklung neue Funktionalitäten hinzuzufügen. Beispielsweise soll eine benutzerdefinierte Methode die Debugmeldungen zur Konsole ausgeben. Um einen console.debug-Befehl hinzuzufügen, könnten Sie dem JScript-Code die folgenden Codeausschnitte hinzufügen:

console.debug = function(name, value){
	console.warn("DEBUG: " + name + "==" + value);
}

Dieses Beispiel verwendet zwei Argumente und gibt diese mit minimaler Formatierung einfach an den Konsolenbereich aus. Da Sie console.debug definieren, können Sie die Funktionsargumenten und das Verhalten an die Anforderungen anpassen. Auf diese Weise kann das Konsolenobjekt verwendet werden, um eine beliebige Anzahl benötigter Befehle hinzuzufügen.

Hinweis Da Sie vorhandene Konsolenbefehle im neuen Befehl verwenden, wird der Filter weiterhin angewendet. Der console.debug-Befehl im vorherigen Beispiel gibt Nachrichten mithilfe von console.warn in den Konsolenbereich aus. Wenn Sie Konsolenwarnungen aus der Filterliste deaktivieren, wird keine der Ausgaben von console.warn im Bereich Konsole angezeigt.

Anmerkungen

Um alle console.log-Nachrichten zu löschen, verwenden Sie console.clear() im Code oder in der Befehlszeile der Konsole. console.clear() löscht keine Skriptfehlermeldungen oder Codes, die Sie in die Befehlszeile der Konsole eingegeben haben.
Um den Konsolenbereich vollständig zu löschen, klicken Sie mit der rechten Maustaste in den Konsolenbereich, und wählen Sie die Option "Konsole löschen" aus. Dies löscht alle Nachrichten im Konsolenbereich.