Share
Många Flash-utvecklare använder antingen Alert-klassen för debugging eller spårningsförklaringar på grund av associationer med Flash. Flex har en sann debugger och det är ett bra verktyg. Jag ska demonstrera hur man får tag i det i den här handledningen.
Kompilatorfel är lätta att upptäcka och fixa. Du får en röd prick med en X i den och berättar var och vad problemet är.
Runtime fel är svårare att spåra. Debugger hjälper utvecklare genom att spåra runtime fel, ger ett fönster för att se vad som händer medan applikationen körs, vilka värden är inställda på, vad som händer inom en slinga, eller varför if-satsen inte fungerar.
OK, låt oss komma igång - men innan vi börjar, här är några verktyg du behöver:
Ladda ner det här här. Under denna handledning använder jag "Macintosh Flash Player 10 Plugin content debugger (Intel-baserade Mac) (ZIP, 6.03 MB)". För att testa vilken version av flash-spelare du har installerat, ta en titt på det här praktiska verktyget av Peter deHaan, som för övrigt har en bra blogg;)
Se full storlek Självklart behöver du det här. Om du inte har det kan du alltid få en gratis kopia:
Prov med kod
Adobe® Flex ™ 3.3 Språkreferens
Skärmbilden i denna tut görs på Mac, men ska vara ± samma på datorn. Mitt fönsterperspektiv kanske skiljer sig från vad du ser, men du hittar alla flikar under fönstermenyn.
Om du är redo, låt oss börja!
Jag har skapat ett nytt Flex-projekt väldigt enkelt, en panel med två knappar i den. Varje knapp kommer att ringa sin klickfunktion; b1_click () kör en loop, call update_Label () funktion. b2_click () kommer att skapa ett runtime-fel, eftersom det inte finns något sådant som n_error-värde.
/> Visa full storlek Vad är en brytpunkt? En brytpunkt ställs in på en körbar linje i ett program. Om brytpunkten är aktiverad när du debuggar, avbryts körningen innan koden körs. För att avbryta programmet medan det körs måste du ange en brytpunkt. Det är lätt att göra; dubbelklicka på det tomma utrymmet bredvid linjenummeret. Dubbelklicka på den igen för att ta bort.
Jag ställer in två brytpunkter Linjerna 10 och 20 (två blå prickar dyker upp i marginalen). Om jag klickar på knappen 1 kommer den att sluta på rad 10, klicka på knappen2 det kommer att sluta på rad 20.
Du kan se alla dina brytpunkter i fliken "Brytpunkter" och de kan läggas till eller tas bort när som helst du vill. Dessutom kan du använda kryssrutorna för att tillfälligt aktivera / inaktivera dem.
Om du vill titta på hur numet ändras över tiden markerar du värdet, högerklickar, välj "Watch" num "".
"Num" läggs nu till fliken Uttryck.
/> Visa full storlek Nu har vi allt setup, låt oss starta felsökningssektionen. Klicka på ikonen som ser ut som en bugg
/> Visa full storlek eller välj det från menyn:
/> Visa full storlek När appen börjar springa kan du se den i webbläsaren men inget händer, vad ska man göra nästa? Brytpunkten sätts inuti funktionen, så vi behöver exectue funktionen.
/> Visa full storlek För att utlösa brytpunkten, klicka på "Knapp 1" för att ringa b1_click () -funktionen. Appen stannar sedan vid rad 10 och num är fortfarande 0 eftersom koden "num + = 1;" har inte körts än. Titta på fliken Debug; vissa ikoner tänds och vissa värden är nu synliga.
/> Visa full storlek Låt oss först titta på fliken Variabler; några saker att notera:
/> Visa full storlek Öppna "här", en lång lista kommer att dyka upp. Listan fortsätter att bli längre och längre så kommer du märka att datorn saktar ner;)
Eftersom jag vet att jag vill fokusera på "button2.label", låt oss hitta den och högerklicka för att välja "Create Watch Expression".
Ta en titt på fliken Expressions, enkelt och rent, precis som jag gillar det. Två variabler vi tittar på nu, "num" vi skapade tidigare, och "this.button2.label".
Låt oss nu titta på felsökningsfliken. I den här fliken ser du att vissa ikoner nu är aktiverade, en lista över funktionsnamn och komponentnamn. Skärmbilden nedan visar att vi för närvarande är i myLoop-funktionen och att komponenten "button2" utför en åtgärd "klicka" för att ringa denna funktion.
/> Visa full storlek De ikoner vi märkte (du hittar dem under menyn> kör också), vad är de för?
/> Visa full storlek När en tråd är avstängd kan stegkontroller användas för att gå igenom utförandet av programlinjen för rad.
Ofta kan du också använda genvägar - memorera dem!
F6 och F8 kommer vara dina bästa vänner, kom ihåg dem!
Låt oss trycka på F6 några gånger. Håll ögonen på fliken Expression, se vad värdet ändras till.
/> Visa full storlek Fortsätt trycka på F6! Värdet på num ändras på fliken Uttryck.
/> Visa full storlek Om din slinga aldrig slutar, slutar tidigt, eller aldrig ens börjar, kan du titta in i åtgärden noggrant för att se vad som händer. När vi har avslutat slingan heter den andra funktionen update_Label (). Att trycka på F6 kommer att gå över det, men vi vill se vad som händer inom uppdateringen_Label (). Tryck på F5 "steg in".
/> Visa full storlek Nu är vi i funktionen update_Label ().
/> Visa full storlek Du kan trycka på F7 för att gå tillbaka till myLoop (). Värdet på "this.button2.label" har ändrats.
/> Visa full storlek Låt oss trycka på F8 för att återuppta appen. Nu har knapp2-etiketten uppdaterats.
/> Visa full storlek OK, nu ska vi testa buggen i appen. Vi vet att det finns en bugg i funktionen b2_click (), så låt oss se den i aktion. Klicka på "Button 2", det här kommer att ringa b2_click () -funktionen, och appen stoppar vid felet.
/> Visa full storlek Ta en titt på fliken Debug. Här berättar du vad felet är och vem ringer.
/> Visa full storlek Här visas vad som visas på fliken Konsol. Det ger dig mer information om felet och radnumret där felet inträffade.
/> Visa full storlek Du kan alltid ändra värdet av variabler medan programmet är avstängt. Om jag till exempel vill ändra button2.label från "num = 10" till "new label" gör jag följande: först hitta variabeln "label", högerklicka och välj Ändra värde.
Fönstret Inställningsvärde dyker upp och visar det aktuella värdet.
Jag ska ändra den här strängen till "ny etikett" och tryck sedan på OK.
Nu på fliken Variabler är det nya värdet inställt.
Fortsätt programmet, så ser du att etiketten har uppdaterats.
/> Visa full storlek Okej, nu vet du hur du använder debuggeren! Här är en snabb sammanfattning:
Om du tror att du är redo att testa dina felsökningsförmågor nu, försök dem på din egen ansökan!
Ett sista tips för de nya till Flex: kom ihåg att alltid exportera en släppbyggnad, inte debug build som är mycket större. Jag hoppas att du njöt av att läsa tillsammans!
Accentsconagua