Working med Debugger i Adobe Flex Builder
Del
Del
Del
Del
Dette Cyber Monday Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.
Mange Flash-utviklere bruke enten Alert klassen for debugging, eller spore uttalelser grunnet assosiasjoner med Flash. Flex har en sann debugger, og det er et flott verktøy. Jeg kommer til å demonstrere hvordan du får tak i det i denne opplæringen.
Innledning
Iler feil er lett å oppdage og fikse. Du får en rød prikk med en X i det, forteller deg hvor og hva problemet er.
Runtime feil er vanskeligere å spore. Debugger hjelper utviklere ved å spore runtime feil, noe som gir et vindu for å se hva som skjer mens programmet kjører, hvilke verdier som er satt til, hva som skjer inne i en løkke, eller hvorfor hvis setningen ikke fungerer.
OK, la oss komme i gang - men før vi begynner, her er noen verktøy du trenger:
Den Debug versjon av Flash Player
Last ned dette her. I løpet av denne opplæringen jeg bruker "Macintosh Flash Player 10 Plugin innhold debugger (Intel-baserte Mac-maskiner) (zip, 6,03 MB)". For å teste hvilken versjon av flash player du har installert, ta en titt på denne hendige verktøy av Peter deHaan, som forresten har en god blogg;)
Vis Full Size
Adobe Flex Builder 3
Selvfølgelig, trenger du denne. Hvis du ikke har det kan du alltid få en gratis kopi:
Gratis til alle utdannings kunder: http://freeriatools.adobe.com/Flex/
Gratis å arbeidsledige utviklere: http://freeriatools.adobe.com/learnFlex/
Andre nyttige Goodies
Prøver med code
http://examples.adobe.com/Flex3/componentexplorer/explorer.html
http://examples.adobe.com/Flex3/consulting/styleexplorer/Flex3StyleExplorer.html
Adobe® Flex ™ 3.3 Språk Reference
http://livedocs.adobe.com/Flex/3/langref/
http://livedocs.adobe.com/Flex/3/html/index.html
Notes
The skjermdumper i denne tut er gjort på Mac, men skal være ± det samme på PC-en. Mitt vindu perspektiv kanskje forskjellig fra det du ser, men du kan finne alle kategoriene under vinduet menyen
Hvis du er klar, la oss komme i gang
Trinn 1:.! Setup Break Points
Jeg har opprettet en ny Flex prosjekt; veldig enkelt, ett panel med to knapper i den. Hver knapp vil kalle sin klikk funksjon; b1_click () vil kjøre en loop, ring update_Label () -funksjonen. b2_click () vil skape en kjøretidsfeil, siden det ikke er noe slikt som n_error verdi. Twitter /> Se Full Size
Hva er et stoppunkt?, En stoppunkt er satt på en kjørbar linje et program. Hvis stoppunkt er aktivert når du feilsøke, suspenderer utførelsen før at kodelinje utfører. For å stanse programmet mens det kjører, må du sette et stoppunkt. Det er lett å gjøre; dobbeltklikker du på den tomme plassen ved siden av linjenummer. Dobbeltklikk på den igjen for å fjerne
satt jeg to stoppunkter.; linjene 10 og 20 (to blå prikker dukker opp i margen). Hvis jeg klikker på Button1, vil den stoppe på linje 10, klikk på knappen2 det vil stoppe på linje 20.
Du kan se alle dine svake punktene i "stoppunkter" -kategorien, og de kan legges til eller fjernes helst du ønsker. I tillegg kan du bruke avmerkingsboksene til midlertidig aktivere /deaktivere dem.
Hvis du ønsker å se hvordan num endres over tid, fremheve verdien, høyreklikk, velg "Watch 'num'».
"num" er nå lagt til kategorien Expressions Twitter /> Se Full Size
Trinn 2:. Begynn Debug Mode og sjekke noen verdier
Nå har vi alt oppsett, la oss starte feilsøkingsseksjonen. Klikk på ikonet som ser ut som en bug Twitter /> Se Full Size
eller velge det fra menyen: Twitter /> Se Full Size
Trinn 3: App Startet
Som app begynner å gå, du kan se den i nettleseren, men ingenting skjer, hva du skal gjøre nå? Knekkpunktet ligger inne i funksjon, så vi trenger exectue funksjonen Twitter /> Se Full Size
Trinn 4:. Trekk av Breakpoint
For å utløse stoppunkt, klikk på "Button 1" å ringe b1_click () -funksjonen. Appen deretter stopper på linje 10 og num er fortsatt 0 siden koden "num + = 1;" har ikke utført ennå. Se på fanen Debug; noen ikoner lyse opp og noen verdier er nå synlig Twitter /> Se full størrelse
Trinn 5:. Variabler Tab
Først la oss ta en titt på kategorien variabler; et par ting å merke seg:
Dette Bilde: inkluderer alle verdiene i programmet
Hendelses Bilde: aktuelle hendelsen vedtatt i
i
: verdien som er definert i denne funksjonen
/> View Full Size
Åpne opp "dette", en lang liste vil dukke opp. Listen vil fortsette å bli lengre og lengre da vil du legge merke til datamaskinen bremse ned;)
Trinn 6: Lag Watch Expression
Siden jeg vet at jeg ønsker å fokusere på "button2.label" La oss finne det og høyreklikk for å velge "Create Watch Expression"
Trinn 7:. Expression Tab
Nå tar en titt på Expressions kategorien, enkel og ren, akkurat slik jeg liker den. To variabler vi ser på nå, "num" vi opprettet tidligere, og "this.button2.label"
Trinn 8:. Bruke Step Controls
Nå la oss ta en titt på debug-kategorien. I denne kategorien vil du se at noen ikoner er nå aktivert, vises en liste over funksjonsnavn og komponentnavnene. Bildet nedenfor viser at vi er nå i myLoop funksjon og at komponenten "knappen2" utført en handling "klikk" for å kalle denne funksjonen Twitter /> Se Full Size
Trinn 9:. Læring Step Controller
Disse ikonene vi la merke til (du finner dem under menyen > kjøre for)?, hva er de for Twitter /> Se Full Size
Når en tråd er suspendert, trinnkontroller kan brukes å gå gjennom gjennomføring av programmet linje for linje
Ofte kan du også bruke snarveier -.! huske dem La oss trykke F6 et par ganger. Hold øye på fanen Expression, se hva verdien er i endring til Twitter /> Se Full Size Fortsett å trykke F6! Verdien av num er i endring i kategorien Expressions Twitter /> Se Full Size Hvis sløyfe aldri slutter, slutter tidlig, eller aldri selv begynner, du kan se inn i handlingen nøye for å se hva som skjer. Når vi er ferdig med loop, er den andre funksjonen update_Label () kalles. Trykke F6 vil gå over det, men vi ønsker å se hva som skjer innen Nå er vi i update_Label () -funksjonen Twitter /> Se Full Size Du kan trykke F7 for å gå tilbake til myLoop (). Verdien av "this.button2.label" er endret. Twitter /> Se Full Size La oss trykke F8 for å gjenoppta programmet. Nå knappen2 plateselskap har blitt oppdatert Twitter /> Se Full Size OK, nå la oss teste bug i appen. Vi vet det er en feil i b2_click () -funksjonen, så la oss se den i aksjon. Klikk på "Knapp 2", dette vil ringe b2_click () -funksjonen, og applikasjonen vil stoppe på feil Twitter /> Se Full Size Ta en nærmere se på fanen Debug. Her inne forteller deg hva feilen er, og hvem som ringer Twitter /> Se Full Size Her er hva som vises i kategorien Console. Det gir deg mer informasjon om feilen og linjenummer der feilen oppstod Twitter /> Se Full Size Du kan alltid endre verdien av variablene mens Søknaden er suspendert. For eksempel, hvis jeg ønsker å endre button2.label fra "num = 10" til "ny label" Jeg gjør følgende: først finne variabelen "label", høyreklikk, velg Endre Verdi innstilt verdi vindu dukker opp og viser gjeldende verdi. Jeg kommer til å endre denne strengen til "nye label", og trykk deretter på OK Nå i kategorien Variabler, er den nye verdien satt Fortsett programmet, vil du se etiketten er oppdatert Anmeldelser /> Se full størrelse Alright, nå vet du hvordan du bruker debugger! Her er en rask oppsummering:.. Hvis du tror du er klar til å teste dine debug ferdigheter nå, gå prøve dem på din egen søknad Et siste tips for de som er nye Flex: husk å alltid eksportere en utgivelse bygge, ikke debug build som er mye større. Jeg håper du likte å lese sammen! Anmeldelser
Resume - F8 (ikke for Mac-bruker) fortsette kjøre applikasjonen
Avslutt -. stoppe debug-modus, programmet vil fortsette å kjøre, men du kan ikke spore lenger
Step Over -. F6, gå til neste linje med kode
Step Into - F5-tasten, dersom dagens linje med kode kaller annen funksjon, se inn den funksjonen
Trinn Return -.. F7, komme seg ut av den funksjonen
< p> F6 og F8 vil være dine beste venner, husker dem
Trinn 10: Bruke F6 Key
Trinn 11:. Verdi Endre
Trinn 12:. Bruke F5-tasten
update_Label (). Trykk F5 "skrittet inn i" Twitter /> Se Full Size
Trinn 13:.. Bruke F7 Key
Trinn 14 Bruke F8 Key
Trinn 15:. Les feilmeldingene i Debug Session
Trinn 16:. Debug Tab
Trinn 17:. Console Tab
Trinn 18:. Endre verdiene av variablene
Step. 19: Set Verdi Popup Window
Trinn 20: Skriv Ny verdi
Trinn 21:. Update Ny verdi
Trinn 22:.. Gjenoppta App
Konklusjon
Klikk på bug-ikonet for å starte feilsøkingsmodus
Provoserende handlingen til å suspendere programmet .
forteller Variabler fanen du hva verdien er.
forteller kategorien Console deg hva og hvor feilen er (hvis noen).
forteller kategorien Debug du som ringte hvem og som gjorde wha.t
Deretter venter på deg til å fortelle den hva som skal skje.