Arbeiten mit dem Debugger in Adobe Flex Builder

Viele Flash-Entwickler verwenden entweder die Alert-Klasse zum Debuggen oder Trace-Anweisungen aufgrund von Verknüpfungen mit Flash. Flex hat einen echten Debugger und ist ein großartiges Werkzeug. Ich werde in diesem Tutorial zeigen, wie man damit umgehen kann.

Einführung

Compiler-Fehler sind leicht zu erkennen und zu beheben. Sie erhalten einen roten Punkt mit einem X, der Ihnen sagt, wo und was das Problem ist.

Laufzeitfehler sind schwerer zu verfolgen. Der Debugger hilft Entwicklern, indem Laufzeitfehler nachverfolgt werden, und es wird ein Fenster angezeigt, in dem nachgeschlagen wird, während die Anwendung ausgeführt wird, welche Werte festgelegt sind, was innerhalb einer Schleife geschieht oder warum die if-Anweisung nicht funktioniert.

OK, lass uns anfangen - aber bevor wir anfangen, hier sind einige Werkzeuge, die du brauchst:

Die Debug-Version von Flash Player

Laden Sie diese hier herunter. In diesem Lernprogramm verwende ich „den Inhaltsdebugger für Macintosh Flash Player 10 Plugin (Intel-basierte Macs) (ZIP, 6,03 MB)“. Um zu testen, welche Version von Flash Player Sie installiert haben, werfen Sie einen Blick auf dieses praktische Tool von Peter deHaan, der übrigens einen tollen Blog hat;)

In voller Größe betrachten

Adobe Flex Builder 3

Natürlich brauchst du das. Wenn Sie es nicht haben, können Sie immer eine kostenlose Kopie erhalten:

  • Kostenlos für alle Bildungskunden: https://freeriatools.adobe.com/Flex/
  • Kostenlos für arbeitslose Entwickler: https://freeriatools.adobe.com/learnFlex/

Andere nützliche Goodies

Proben mit Code

  • http://examples.adobe.com/Flex3/componentexplorer/explorer.html
  • http://examples.adobe.com/Flex3/consulting/styleexplorer/Flex3StyleExplorer.html

Adobe® Flex ™ 3.3 - Sprachhandbuch

  • http://livedocs.adobe.com/Flex/3/langref/
  • http://livedocs.adobe.com/Flex/3/html/index.html

Anmerkungen

Die Bildschirmaufnahmen in diesem Tut werden auf dem Mac gemacht, sollten jedoch auf dem PC ± gleich sein. Meine Fensterperspektive unterscheidet sich möglicherweise von dem, was Sie sehen, aber Sie finden alle Registerkarten unter dem Fenstermenü.

WENN du bereit bist, lass uns anfangen!

Schritt 1: Einrichten von Haltepunkten

Ich habe ein neues Flex-Projekt erstellt. sehr einfach, ein Panel mit zwei Tasten. Jede Taste ruft ihre Klickfunktion auf. b1_click () führt eine Schleife aus und ruft die Funktion update_Label () auf. b2_click () erzeugt einen Laufzeitfehler, da es keinen n_error-Wert gibt.

/> Volle Größe anzeigen

Was ist ein Haltepunkt?? Ein Haltepunkt wird in einer ausführbaren Zeile eines Programms festgelegt. Wenn der Haltepunkt beim Debuggen aktiviert ist, wird die Ausführung angehalten, bevor diese Codezeile ausgeführt wird. Um die Anwendung während der Ausführung zu unterbrechen, müssen Sie einen Haltepunkt setzen. Es ist einfach zu tun; Doppelklicken Sie auf die leere Stelle neben der Zeilennummer. Doppelklicken Sie erneut darauf, um es zu entfernen.

Ich setze zwei Haltepunkte. Zeilen 10 und 20 (am Rand sind zwei blaue Punkte zu sehen). Wenn ich auf button1 klicke, wird es in Zeile 10 angehalten. Klicken Sie auf button2, wird es in Zeile 20 angehalten.

Sie können alle Ihre Haltepunkte auf der Registerkarte „Haltepunkte“ sehen und sie können jederzeit hinzugefügt oder entfernt werden. Darüber hinaus können Sie die Kontrollkästchen verwenden, um sie vorübergehend zu aktivieren / deaktivieren.

Wenn Sie beobachten möchten, wie sich die Anzahl im Laufe der Zeit ändert, markieren Sie den Wert, klicken Sie mit der rechten Maustaste, und wählen Sie "Watch 'num'" aus..

"Num" wird jetzt zur Registerkarte "Expressions" hinzugefügt.

/> Volle Größe anzeigen

Schritt 2: Starten Sie den Debug-Modus und prüfen Sie einige Werte

Jetzt haben wir alles eingerichtet. Starten wir den Debug-Abschnitt. Klicken Sie auf das Symbol, das wie ein Fehler aussieht

/> Volle Größe anzeigen

oder wähle es aus dem Menü:

/> Volle Größe anzeigen

Schritt 3: App gestartet

Wenn die App gestartet wird, können Sie sie im Browser sehen, aber es passiert nichts, was als Nächstes zu tun ist. Der Haltepunkt wird innerhalb der Funktion festgelegt, daher müssen Sie die Funktion überprüfen.

/> Volle Größe anzeigen

Schritt 4: Lösen Sie den Haltepunkt aus

Um den Haltepunkt auszulösen, klicken Sie auf „Button 1“, um die Funktion b1_click () aufzurufen. Die App stoppt dann in Zeile 10 und num ist immer noch 0, da der Code "num + = 1;" noch nicht ausgeführt Schauen Sie sich die Registerkarte Debuggen an. Einige Symbole leuchten auf und einige Werte sind jetzt sichtbar.

/> Volle Größe anzeigen

Schritt 5: Registerkarte "Variablen"

Schauen wir uns zuerst die Registerkarte Variablen an. ein paar Dinge zu beachten:

  • Diese: enthält alle Werte in der Anwendung
  • Veranstaltung: aktuelles Ereignis übergeben
  • ich: in dieser Funktion definierter Wert
/> Volle Größe anzeigen

Öffnen Sie "this", wird eine lange Liste angezeigt. Die Liste wird immer länger und Sie werden feststellen, dass Ihr Computer langsamer wird;)

Schritt 6: Überwachungsausdruck erstellen

Da ich weiß, dass ich mich auf "button2.label" konzentrieren möchte, suchen wir es und klicken Sie mit der rechten Maustaste, um "Create Watch Expression" auszuwählen..

Schritt 7: Ausdruckstabelle

Schauen Sie sich jetzt die Registerkarte "Ausdrücke" an, einfach und sauber, so wie ich es mag. Zwei Variablen, die wir jetzt betrachten, "num", die wir zuvor erstellt haben, und "this.button2.label".

Schritt 8: Verwenden der Schrittsteuerung

Schauen wir uns nun die Debug-Registerkarte an. Auf dieser Registerkarte sehen Sie, dass einige Symbole aktiviert sind, eine Liste mit Funktionsnamen und Komponentennamen. Der folgende Screenshot zeigt, dass wir uns derzeit in der myLoop-Funktion befinden und dass die Komponente "button2" eine Aktion zum Klicken auf diese Funktion ausgeführt hat.

/> Volle Größe anzeigen

Schritt 9: Lernen Sie die Schrittsteuerung

Die Icons, die wir bemerkt haben (Sie finden sie unter menu> run), wozu sie dienen?

/> Volle Größe anzeigen

Wenn ein Thread angehalten wird, können die Schrittsteuerelemente verwendet werden, um die Ausführung des Programms zeilenweise zu durchlaufen.

Häufig können Sie auch Verknüpfungen verwenden - merken Sie sich diese!

  • Resume - F8-Taste (nicht für Mac-Benutzer), um die Anwendung fortzusetzen.
  • Beenden - Beenden Sie den Debug-Modus. Die Anwendung läuft weiter, Sie können jedoch nicht mehr nachverfolgen.
  • Schritt über - Taste F6, zur nächsten Codezeile wechseln.
  • Step Into - F5-Taste: Wenn die aktuelle Codezeile eine andere Funktion aufruft, schauen Sie in diese Funktion.
  • Step Return - F7-Taste, verlassen Sie diese Funktion.

F6 und F8 werden deine besten Freunde sein, erinnere dich an sie!

Schritt 10: Verwenden der F6-Taste

Lassen Sie uns einige Male die Taste F6 drücken. Behalten Sie die Registerkarte Ausdruck im Auge und sehen Sie, wo sich der Wert ändert.

/> Volle Größe anzeigen

Schritt 11: Wertänderung

Drücke weiterhin F6! Der Wert von num ändert sich auf der Registerkarte Ausdrücke.

/> Volle Größe anzeigen

Schritt 12: Verwenden der F5-Taste

Wenn Ihre Schleife nie endet, früh endet oder nie beginnt, können Sie sich die Aktion genau ansehen, um zu sehen, was passiert. Wenn wir die Schleife beendet haben, wird die zweite Funktion update_Label () aufgerufen. Wenn Sie die Taste F6 drücken, wird der Schritt überschritten. Wir möchten jedoch sehen, was passiert innerhalb das update_Label (). Drücken Sie die Taste "F5"..

/> Volle Größe anzeigen

Jetzt befinden wir uns in der Funktion update_Label ().

/> Volle Größe anzeigen

Schritt 13: Verwenden der F7-Taste

Sie können F7 drücken, um zu myLoop () zurückzukehren. Der Wert von "this.button2.label" wurde geändert.

/> Volle Größe anzeigen

Schritt 14 Verwenden der F8-Taste

Drücken Sie F8, um die App fortzusetzen. Nun wurde das Label von button2 aktualisiert.

/> Volle Größe anzeigen

Schritt 15: Lesen Sie die Fehlermeldungen in der Debug-Sitzung

OK, jetzt testen wir den Fehler in der App. Wir wissen, dass es einen Fehler in der Funktion b2_click () gibt, also sehen wir ihn in Aktion. Klicken Sie auf "Button 2". Dadurch wird die Funktion b2_click () aufgerufen, und die App stoppt bei einem Fehler.

/> Volle Größe anzeigen

Schritt 16: Registerkarte "Debuggen"

Schauen Sie sich die Registerkarte "Debuggen" genau an. Hier erfahren Sie, was der Fehler ist und wer anruft.

/> Volle Größe anzeigen

Schritt 17: Console Tab

Folgendes wird auf der Registerkarte "Konsole" angezeigt. Sie erhalten weitere Informationen zu dem Fehler und der Zeilennummer, an der der Fehler aufgetreten ist.

/> Volle Größe anzeigen

Schritt 18: Werte von Variablen ändern

Sie können den Wert von Variablen jederzeit ändern, während die Anwendung angehalten ist. Wenn ich beispielsweise button2.label von "num = 10" in "new label" ändern möchte, mache ich Folgendes: Zuerst finde ich die Variable "label", klicke mit der rechten Maustaste und wähle "Wert ändern".

Schritt 19: Einstellungs-Popup-Fenster

Das Fenster Set Value wird angezeigt und zeigt den aktuellen Wert an.

Schritt 20: Neuen Wert eingeben

Ich ändere diese Zeichenfolge in "new label" und drücke OK.

Schritt 21: Neuen Wert aktualisieren

Jetzt wird auf der Registerkarte Variablen der neue Wert festgelegt.

Schritt 22: App fortsetzen

Setzen Sie die Anwendung fort. Sie sehen, dass das Label aktualisiert wurde.

/> Volle Größe anzeigen

Fazit

Okay, jetzt wissen Sie, wie Sie den Debugger verwenden! Hier eine kurze Zusammenfassung:

  • Doppelklicken Sie auf Einen Haltepunkt erstellen.
  • Klicken Sie auf das Fehlersymbol, um den Debug-Modus zu starten.
  • Lösen Sie die Aktion aus, um die Anwendung auszusetzen.
  • Die Registerkarte Variablen zeigt Ihnen den Wert an.
  • Auf der Registerkarte "Konsole" erfahren Sie, was und wo der Fehler ist (falls vorhanden)..
  • Auf der Registerkarte "Debuggen" erfahren Sie, wer wen angerufen hat und wer was getan hat
  • Dann wartet er darauf, dass Sie ihm sagen, welche Aktion er ergreifen soll.

Wenn Sie der Meinung sind, dass Sie jetzt bereit sind, Ihre Debug-Fähigkeiten zu testen, probieren Sie sie in Ihrer eigenen Anwendung aus!

Ein letzter Tipp für Flex-Neulinge: Denken Sie daran, immer einen Release-Build zu exportieren, nicht den Debug-Build, der viel größer ist. Ich hoffe, es hat Ihnen Spaß gemacht, mitzulesen!