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.
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:
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 betrachtenNatürlich brauchst du das. Wenn Sie es nicht haben, können Sie immer eine kostenlose Kopie erhalten:
Proben mit Code
Adobe® Flex ™ 3.3 - Sprachhandbuch
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!
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 anzeigenWas 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 anzeigenJetzt haben wir alles eingerichtet. Starten wir den Debug-Abschnitt. Klicken Sie auf das Symbol, das wie ein Fehler aussieht
/> Volle Größe anzeigenoder wähle es aus dem Menü:
/> Volle Größe anzeigenWenn 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 anzeigenUm 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 anzeigenSchauen wir uns zuerst die Registerkarte Variablen an. ein paar Dinge zu beachten:
Öffnen Sie "this", wird eine lange Liste angezeigt. Die Liste wird immer länger und Sie werden feststellen, dass Ihr Computer langsamer wird;)
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..
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".
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 anzeigenDie Icons, die wir bemerkt haben (Sie finden sie unter menu> run), wozu sie dienen?
/> Volle Größe anzeigenWenn 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!
F6 und F8 werden deine besten Freunde sein, erinnere dich an sie!
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 anzeigenDrücke weiterhin F6! Der Wert von num ändert sich auf der Registerkarte Ausdrücke.
/> Volle Größe anzeigenWenn 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 anzeigenJetzt befinden wir uns in der Funktion update_Label ().
/> Volle Größe anzeigenSie können F7 drücken, um zu myLoop () zurückzukehren. Der Wert von "this.button2.label" wurde geändert.
/> Volle Größe anzeigenDrücken Sie F8, um die App fortzusetzen. Nun wurde das Label von button2 aktualisiert.
/> Volle Größe anzeigenOK, 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 anzeigenSchauen Sie sich die Registerkarte "Debuggen" genau an. Hier erfahren Sie, was der Fehler ist und wer anruft.
/> Volle Größe anzeigenFolgendes 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 anzeigenSie 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".
Das Fenster Set Value wird angezeigt und zeigt den aktuellen Wert an.
Ich ändere diese Zeichenfolge in "new label" und drücke OK.
Jetzt wird auf der Registerkarte Variablen der neue Wert festgelegt.
Setzen Sie die Anwendung fort. Sie sehen, dass das Label aktualisiert wurde.
/> Volle Größe anzeigenOkay, jetzt wissen Sie, wie Sie den Debugger verwenden! Hier eine kurze Zusammenfassung:
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!