Mange Flash-utviklere bruker enten Alert-klassen for feilsøking eller sporopplysninger på grunn av foreninger med Flash. Flex har en sann debugger, og det er et flott verktøy. Jeg skal demonstrere hvordan jeg får tak i det i denne opplæringen.
Kompilatorfeil er lett å få øye på og fikse. Du får en rød prikk med en X i den og forteller deg hvor og hva problemet er.
Runtime feil er vanskeligere å spore. Debugger hjelper utviklere ved å spore runtime feil, gir et vindu for å se hva som skjer mens applikasjonen kjører, hvilke verdier er satt til, hva skjer i en loop, eller hvorfor if-setningen ikke virker.
OK, la oss komme i gang - men før vi begynner, er det noen verktøy du trenger:
Last ned dette her. Under denne opplæringen bruker jeg "Macintosh Flash Player 10 Plugin Content Debugger (Intel-baserte Macer) (ZIP, 6.03 MB)". For å teste hvilken versjon av flash-spilleren du har installert, ta en titt på dette praktiske verktøyet av Peter deHaan, som for øvrig har en flott blogg;)
Se full størrelseSelvfølgelig trenger du dette. Hvis du ikke har det, kan du alltid få en gratis kopi:
Prøver med kode
Adobe® Flex ™ 3.3 Språkreferanse
Skjermbildet i denne tuten er laget på Mac, men bør være ± det samme på PC. Mitt vinduperspektiv kan være forskjellig fra det du ser, men du finner alle fanene under vinduesmenyen.
Hvis du er klar, la oss komme i gang!
Jeg har laget et nytt Flex-prosjekt; veldig enkelt, ett panel med to knapper i den. Hver knapp vil ringe sin klikkfunksjon; b1_click () vil kjøre en loop, call update_Label () -funksjon. b2_click () vil opprette en runtime-feil, siden det ikke er noe som n_error-verdi.
/> Se full størrelseHva er et breakpoint? Et brytepunkt er satt på en kjørbar linje i et program. Hvis bruddpunktet er aktivert når du feilsøker, avbrytes kjøringen før den kjørte linjen utføres. For å suspendere programmet mens det kjører, må du sette et brytepunkt. Det er lett å gjøre; dobbeltklikk på det tomme rommet ved siden av linjenummeret. Dobbeltklikk på den igjen for å fjerne.
Jeg satte to brytpunkter Linjer 10 og 20 (to blå prikker dukker opp i marginalen). Hvis jeg klikker på knapp1, stopper den på linje 10, klikker på knappen2 den stopper på linje 20.
Du kan se alle breakpoints i "Breakpoints" -fanen, og de kan legges til eller fjernes når som helst du ønsker. I tillegg kan du bruke avmerkingsboksen for midlertidig å aktivere / deaktivere dem.
Hvis du vil se hvordan tallet endres over tid, merker du verdien, høyreklikk, velg "Watch" num "".
"Num" er nå lagt til i fanen Expressions.
/> Se full størrelseNå har vi alt oppsett, la oss starte feilsøkingsdelen. Klikk på ikonet som ser ut som en feil
/> Se full størrelseeller velg det fra menyen:
/> Se full størrelseNår appen starter, kan du se den i nettleseren, men ingenting skjer, hva skal du gjøre neste? Brytepunktet er satt inne i funksjonen, så vi må exectue funksjonen.
/> Se full størrelseFor å utløse breakpointet, klikk på "Button 1" for å ringe b1_click () -funksjonen. Appen stopper deretter på linje 10 og num er fortsatt 0 siden koden "num + = 1;" har ikke blitt utført ennå. Se på Debug-fanen; Noen ikoner lyser opp og noen verdier er nå synlige.
/> Se full størrelseFørst, la oss ta en titt på Variabler-fanen; noen ting å merke seg:
Åpne opp "dette", en lang liste vil dukke opp. Listen fortsetter å bli lengre og lengre, så du får merke til at datamaskinen senker ned;)
Siden jeg vet at jeg vil fokusere på "button2.label", la oss finne den og høyreklikk for å velge "Create Watch Expression".
Ta en titt på fanen Expressions, enkelt og rent, akkurat slik jeg liker det. To variabler vi ser på nå, "num" vi opprettet tidligere, og "this.button2.label".
La oss nå se på debug-fanen. I denne kategorien ser du at noen ikoner er nå aktivert, en liste over funksjonsnavn og komponentnavn. Skjermbildet under viser at vi for tiden befinner oss i myLoop-funksjonen, og at komponenten "button2" utførte en handling "klikk" for å ringe denne funksjonen.
/> Se full størrelseDe ikonene vi la merke til (du finner dem under menyen> løp også), hva er de for?
/> Se full størrelseNår en tråd er suspendert, kan trinnkontrollene brukes til å gå gjennom gjennomføringen av programlinjen for linje.
Ofte kan du også bruke snarveier - husk dem!
F6 og F8 vil være dine beste venner, husk dem!
La oss trykke F6 noen ganger. Hold øye med fanen Expression, se hva verdien endrer til.
/> Se full størrelseFortsett å trykke F6! Verdien av num endres i fanen Expressions.
/> Se full størrelseHvis sløyfen din aldri slutter, slutter tidlig, eller aldri engang begynner, kan du se nærmere på handlingen nøye for å se hva som skjer. Når vi er ferdig med sløyfen, kalles den andre funksjonen update_Label (). Trykk på F6 vil gå over det, men vi vil se hva som skjer innenfor oppdateringen_Label (). Trykk F5 "gå inn i".
/> Se full størrelseNå er vi i update_Label () -funksjonen.
/> Se full størrelseDu kan trykke F7 for å gå tilbake til myLoop (). Verdien av "this.button2.label" er endret.
/> Se full størrelseLa oss trykke F8 for å gjenoppta appen. Nå har knapp2-etiketten blitt oppdatert.
/> Se full størrelseOK, la oss nå teste feilen i appen. Vi vet at det er en feil i b2_click () -funksjonen, så la oss se den i aksjon. Klikk på "Button 2", dette vil ringe til b2_click () -funksjonen, og appen stopper ved feilen.
/> Se full størrelseTa en nærmere titt på Debug-fanen. Her forteller det deg hva feilen er, og hvem ringer.
/> Se full størrelseHer er det som vises i kategorien Konsoll. Den gir deg mer informasjon om feilen og linjenummeret der feilen oppstod.
/> Se full størrelseDu kan alltid endre verdien av variabler mens programmet er suspendert. Hvis jeg for eksempel vil endre button2.label fra "num = 10" til "new label", gjør jeg følgende: Finn først variabelen "label", høyreklikk, velg Endre verdi.
Vinduet Angi verdi vises og viser gjeldende verdi.
Jeg skal endre denne strengen til "ny etikett", og trykk deretter OK.
Nå i fanen Variabler er den nye verdien satt.
Fortsett søknaden, du vil se at etiketten har blitt oppdatert.
/> Se full størrelseOk, nå vet du hvordan du bruker debuggeren! Her er et raskt sammendrag:
Hvis du tror du er klar til å teste dine feilsøkingsferdigheter nå, kan du prøve dem på din egen applikasjon!
Et siste tips for de nye til Flex: Husk å alltid eksportere en utgivelsesbygg, ikke debug build som er mye større. Jeg håper du likte å lese sammen!