Arbeider med Debugger i Adobe Flex Builder

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.

Introduksjon

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:

Feilsøkingsversjonen av Flash Player

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ørrelse

Adobe Flex Builder 3

Selvfølgelig trenger du dette. Hvis du ikke har det, kan du alltid få en gratis kopi:

  • Gratis til alle utdanningskunder: https://freeriatools.adobe.com/Flex/
  • Gratis til arbeidsløse utviklere: https://freeriatools.adobe.com/learnFlex/

Andre nyttige godbiter

Prøver med kode

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

Adobe® Flex ™ 3.3 Språkreferanse

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

Merknader

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!

Trinn 1: Oppsett Brytepunkter

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ørrelse

Hva 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ørrelse

Trinn 2: Start feilsøkingsmodus og kontroller noen verdier

Nå har vi alt oppsett, la oss starte feilsøkingsdelen. Klikk på ikonet som ser ut som en feil

/> Se full størrelse

eller velg det fra menyen:

/> Se full størrelse

Trinn 3: App startet

Nå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ørrelse

Trinn 4: Utløs brytpunktet

For å 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ørrelse

Trinn 5: Variabler Tab

Først, la oss ta en titt på Variabler-fanen; noen ting å merke seg:

  • Dette: inkluderer alle verdiene i programmet
  • Begivenhet: Gjeldende begivenhet sendt inn
  • Jeg: verdi definert i denne funksjonen
/> Se full størrelse

Å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;)

Trinn 6: Lag Watch Expression

Siden jeg vet at jeg vil fokusere på "button2.label", la oss finne den og høyreklikk for å velge "Create Watch Expression".

Trinn 7: Ekspressionsfane

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".

Trinn 8: Bruk trinnkontrollene

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ørrelse

Trinn 9: Lære trinnkontrolleren

De ikonene vi la merke til (du finner dem under menyen> løp også), hva er de for?

/> Se full størrelse

Nå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!

  • Gjenoppta - F8-nøkkel (ikke for Mac-bruker) Fortsett å kjøre programmet.
  • Avslutt - stopp feilsøkingsmodus, programmet vil fortsette å løpe, men du kan ikke spore lenger.
  • Gå over - F6-tasten, gå til neste linje av kode.
  • Trinn til - F5-tasten, hvis den nåværende koden kaller en annen funksjon, se på den funksjonen.
  • Steg Retur - F7-tasten, kom deg ut av den funksjonen.

F6 og F8 vil være dine beste venner, husk dem!

Trinn 10: Bruke F6-nøkkelen

La oss trykke F6 noen ganger. Hold øye med fanen Expression, se hva verdien endrer til.

/> Se full størrelse

Trinn 11: Verdiendring

Fortsett å trykke F6! Verdien av num endres i fanen Expressions.

/> Se full størrelse

Trinn 12: Bruke F5-tasten

Hvis 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ørrelse

Nå er vi i update_Label () -funksjonen.

/> Se full størrelse

Trinn 13: Bruke F7-tasten

Du kan trykke F7 for å gå tilbake til myLoop (). Verdien av "this.button2.label" er endret.

/> Se full størrelse

Trinn 14 Bruke F8-tasten

La oss trykke F8 for å gjenoppta appen. Nå har knapp2-etiketten blitt oppdatert.

/> Se full størrelse

Trinn 15: Les feilmeldingene i debug-sesjon

OK, 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ørrelse

Trinn 16: Feilsøkingsfanen

Ta en nærmere titt på Debug-fanen. Her forteller det deg hva feilen er, og hvem ringer.

/> Se full størrelse

Trinn 17: Konsollfane

Her er det som vises i kategorien Konsoll. Den gir deg mer informasjon om feilen og linjenummeret der feilen oppstod.

/> Se full størrelse

Trinn 18: Endre verdier av variabler

Du 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.

Trinn 19: Angi verdi popup-vindu

Vinduet Angi verdi vises og viser gjeldende verdi.

Trinn 20: Skriv inn ny verdi

Jeg skal endre denne strengen til "ny etikett", og trykk deretter OK.

Trinn 21: Oppdater ny verdi

Nå i fanen Variabler er den nye verdien satt.

Trinn 22: Fortsett App

Fortsett søknaden, du vil se at etiketten har blitt oppdatert.

/> Se full størrelse

Konklusjon

Ok, nå vet du hvordan du bruker debuggeren! Her er et raskt sammendrag:

  • Dobbeltklikk Opprett et brytepunkt.
  • Klikk på feilikonet for å starte feilsøkingsmodus.
  • Utfør handlingen for å suspendere programmet.
  • Variabler-fanen forteller deg hva verdien er.
  • Konsoll-fanen forteller deg hva og hvor feilen er (hvis noen).
  • Feilsøkingsfanen forteller deg hvem som ringte hvem og hvem gjorde hva
  • Så venter på deg å fortelle det hva handlingen skal ta.

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!