by Adobe
Adobe logo

Created

2 May 2011

 

Client-seitigen Code debuggen

 
 

Code

<?xml version="1.0" encoding="utf-8"?> <s:Application …> <fx:Script> <![CDATA[ (…) protected function empDg_gridItemEditorSessionSaveHandler(event:GridItemEditorEvent):void { trace(employee.firstname); trace(employee); trace(empDg.dataProvider); trace((empDg.dataProvider as AsyncListView).list); employeeService.updateEmployee(employee); ]]> </fx:Script> (…) </s:Application>

Übung

In dieser Übung verwenden Sie den Debugger von Flash Builder, um Fehler in Ihrem Flex-Code zu ermitteln und zu beheben. Zuerst verfolgen Sie Variablen, um ihre Werte während der Laufzeit in der Konsolenansicht von Flash Builder anzuzeigen. Danach fügen Sie Haltepunkte hinzu, um die Ausführung des Codes in einem Ereignis-Handler anzuhalten und die Werte der Variablen im Debugger von Flash Builder zu prüfen.
 
Zum Debuggen von Applikationen muss die Debug-Version von Flash Player für Ihren Browser installiert sein. Debug-Versionen von Flash Player werden zusammen mit Flash Builder installiert.
 

 
1. Schritt: Variablen verfolgen

Verwenden Sie im gridItemEditorSessionSave-Handler des Datenrasters empDg_gridItemEditorSessionSave die Funktion trace(), um employee.firstname, employee, empDg.dataProvider und (empDg.dataProvider as AsyncListView).list anzuzeigen.
 
Der Handler sollte wie folgt aussehen:
 
protected function empDg_gridItemEditorSessionSaveHandler(event:GridItemEditorEvent):void { trace(employee.firstname); trace(employee); trace(empDg.dataProvider); trace((empDg.dataProvider as AsyncListView).list); employeeService.updateEmployee(employee); }

 
2. Schritt: Applikation debuggen

Klicken Sie zum Debuggen der Applikation auf die Schaltfläche „Debuggen“. Bearbeiten Sie den Vornamen eines Mitarbeiters, kehren Sie dann zu Flash Builder zurück und navigieren Sie zur Konsolenansicht.
 
Als erstes Trace für employee.firstname wird der neue Vorname des bearbeiteten Mitarbeiters angezeigt (siehe Abbildung 1). Als zweites Trace für employee wird „[object Employee]“ anzeigt. Daran erkennen Sie, dass es sich um ein komplexes Objekt des Typs „Employee“ handelt. Es werden jedoch keine Eigenschaftswerte zurückgegeben. Als drittes Trace für empDg.dataProvider wird die Information angezeigt, dass es sich um ein Objekt vom Typ „AsyncListView“ mit 13 Elementen handelt. Als viertes Trace erhalten Sie eine kommagetrennte Liste von „Employee“-Objekten. Daran erkennen Sie, dass es sich um ein Array aus „Employee“-Objekten handelt. Es werden aber auch hier keine Eigenschaftswerte angezeigt.
 
Zeigen Sie in der Konsolenansicht verfolgte mitarbeiterbezogene Variablen an.
Abb. 1: Zeigen Sie in der Konsolenansicht verfolgte mitarbeiterbezogene Variablen an.

 
3. Schritt: Debugger stoppen und Perspektive ändern

Wählen Sie eine der roten Schaltflächen zum Beenden und klicken Sie dann auf die Flash- und Flash Debug-Schaltflächen oben rechts, um zwischen der Entwicklungs- und Debugging-Perspektive zu wechseln. Beenden Sie den Vorgang in der Entwicklungsperspektive.
 
Wenn nicht beide Schaltflächen angezeigt werden, klicken Sie auf den linken Rand der Registerkarte und ziehen Sie sie nach links, bis beide sichtbar sind (siehe Abbildung 2).
 
Wechseln Sie zwischen der Entwicklungs- und der Debugging-Perspektive.
Abb. 2: Wechseln Sie zwischen der Entwicklungs- und der Debugging-Perspektive.
 

 
4. Schritt: Haltepunkt hinzufügen

Doppelklicken Sie in der Markierungsleiste (links neben den Zeilennummern) neben die erste Codezeile im gridItemEditorSessionSave-Handler des Datenrasters empDg_gridItemEditorSessionSaveHandler (siehe Abbildung 3). Debuggen Sie die Applikation und bearbeiten Sie eine Zelle.
 
Fügen Sie einen Haltepunkt hinzu.
Abb. 3: Fügen Sie einen Haltepunkt hinzu.
Nachdem Sie im Browser eine Zelle bearbeitet haben, wird Flash Builder automatisch wieder aufgerufen (bzw. blinkt in der Dock- oder Task-Leiste auf und muss manuell aufgerufen werden). Neben der ersten Codezeile im Handler wird ein Pfeil angezeigt, der die Position angibt, an der die Ausführung des Codes gestoppt wurde (siehe Abbildung 4).
 
Suchen Sie die Stelle, an der die Ausführung des Codes angehalten wurde.
Abb. 4: Suchen Sie die Stelle, an der die Ausführung des Codes angehalten wurde.

 
5. Schritt: Variablen in der Variablenansicht prüfen

Zeigen Sie das Objekt „event“ an und suchen Sie nach der Eigenschaft columns.dataField.
 
Zwei Variablen sollten angezeigt werden, nämlich „this“ und „event“ (siehe Abbildung 5). „this“ verweist auf die Applikation selbst. „event“ ist die Variable, die an „empDg_gridItemEditorSessionSaveHandler()“ weitergeleitet wird. Suchen Sie die Eigenschaft event.column.dataField. Sie verweist auf das Feld, das im Datenraster bearbeitet wurde.
 
Zeigen Sie Variablen in der Variablenansicht an.
Abb. 5: Zeigen Sie Variablen in der Variablenansicht an.
 

 
6. Schritt: Geerbte Eigenschaften des Ereignisobjekts prüfen

Zeigen Sie die geerbten Eigenschaften des Objekts: „event“ und anschließend die Eigenschaft currentTarget an (siehe Abbildung 6).
 
currentTarget verweist auf das Datenraster „empDg“ und ist das Listenerobjekt für das gesendete Ereignis. Zeigen Sie die Eigenschaften des Objekts currentTarget an und suchen Sie nach der Eigenschaft „dataProvider“. Der „dataProvider“ ist vom Typ „AsyncListView“, dessen Eigenschaft list auf eine „ArrayCollection“ von „Employee“-Objekten gesetzt ist. Sehen Sie sich die Werte für eines der „Employee“-Objekte an.
 
Zeigen Sie die geerbte Eigenschaft des Objekts „currentTarget“ an.
Abb. 6: Zeigen Sie die geerbte Eigenschaft des Objekts „currentTarget“ an.
 
Hinweis: Mit einem Doppelklick auf die Registerkarte „Variablen“ (oder eine beliebige andere Registerkarte in Flash Builder) rufen Sie die Vollbildanzeige auf. Im Vollbildmodus können Sie eine größere Anzahl von Variablen sehen. Mit einem weiteren Doppelklick auf die Registerkarte kehren Sie zum ursprünglichen Anzeigemodus zurück.
 

 
7. Schritt: Code schrittweise prüfen

Klicken Sie mehrmals auf die Schaltfläche „Step-Into“ (siehe Abbildung 7) und beobachten Sie, wie der Debugger Ihren Code schrittweise prüft. Halten Sie den Debug-Prozess an, wenn er bereits die nächste Datei prüft. Klicken Sie dann auf die Schaltfläche „Step-Return“, sodass wieder der Code Ihrer MXML-Datei ausgeführt wird.
 
Beim Ausführen von Code in anderen Klassen werden verschiedene Dateien geöffnet und geschlossen.
 
Verwenden Sie die Schaltflächen der Werkzeugleiste der Debug-Ansicht zur schrittweisen Codeprüfung.
Abb. 7: Verwenden Sie die Schaltflächen der Werkzeugleiste der Debug-Ansicht zur schrittweisen Codeprüfung.
 
Sie können mit der schrittweisen Prüfung des Codes fortfahren und die Variablenwerte in der Variablenansicht verfolgen. Wenn Sie sich jedoch nur für bestimmte Variablen interessieren, können Sie die Prüfung auf diese Variablen beschränken.
 
PHP-Entwickler, die Flash Builder 4.5 für PHP verwenden: Sie können Haltepunkte auch in PHP-Dateien im Flash Builder-PHP-Projekt platzieren und dadurch Client- und Server-seitigen Code schrittweise prüfen und debuggen. Führen Sie beim Debuggen von Server-seitigem Code die Applikation als „Web-Applikation (PHP)“ und nicht als „Web-Applikation“ aus, da der PHP-Debugger von einer PHP-Browsersitzung aus gestartet werden muss. Wenn Sie sicherstellen möchten, dass Sie eine „Web-Applikation (PHP)“ ausführen, wählen Sie im Menü der Schaltfläche „Debuggen“ die Option „Debuggen als“ oder wählen Sie die Option aus dem Menü „Ausführen“ oder erstellen Sie eine spezielle Ausführungskonfiguration.
 

 
8. Schritt: Variablen überwachen

Wählen Sie eine Instanz von „employee“ im empDg_gridItemEditorSessionSaveHandler()-Handler. Wählen Sie anschließend die Option „Neuen Beobachtungsausdruck erstellen“. Fügen Sie in der Ansicht „Ausdrücke“ einen neuen zu überwachenden Ausdruck „employee.firstname“ hinzu (siehe Abbildung 8). Klicken Sie im Debugger von Flash Builder auf die Schaltfläche „Fortsetzen“ (siehe Abbildung 7), kehren Sie zur Applikation im Browser-Fenster zurück und ändern Sie einen weiteren Wert im Datenraster. Kehren Sie dann zu Flash Builder zurück und überprüfen Sie die neuen Werte in der Ansicht „Ausdrücke“ (siehe Abbildung 9).
 
Erstellen Sie einen Beobachtungsausdruck.
Abb. 8: Erstellen Sie einen Beobachtungsausdruck.
 
Beobachten Sie eine Variable.
Abb. 9: Beobachten Sie eine Variable.
 
Stoppen Sie den Debugger.
 
In diesem Modul haben Sie gelernt, wie Sie mit der Funktion „Methode testen“ von Flash Builder Ihren Server-seitigen Code testen, mit der Netzwerküberwachung den Verkehr zwischen Ihrer Flex-Applikation und dem Server verfolgen und mit dem Debugger Fehler in Ihrer Flex-Applikation ermitteln können.
 
Im nächsten Modul erfahren Sie, wie Sie Ihre Applikation bereitstellen.
 

 
Weitere Infos

Näheres zu diesem Thema finden Sie hier:
 
 
Dokumentation: Verwenden von Flash Builder 4.5
 
Dokumentation: Verwenden von Flex 4.5
 
Flex Developer Center