Share
Molti sviluppatori Flash utilizzano la classe Alert per il debug o le istruzioni di tracciamento dovute alle associazioni con Flash. Flex ha un vero debugger ed è un ottimo strumento. Dimostrerò come affrontarlo in questo tutorial.
Gli errori del compilatore sono facili da individuare e correggere. Ti viene dato un punto rosso con una X in esso, che ti dice dove e qual è il problema.
Gli errori di runtime sono più difficili da rintracciare. Debugger aiuta gli sviluppatori tracciando gli errori di runtime, dando una finestra per vedere cosa sta succedendo mentre l'applicazione è in esecuzione, quali valori sono impostati, cosa succede all'interno di un ciclo o perché l'istruzione if non funziona.
OK, cominciamo - ma prima di iniziare, ecco alcuni strumenti di cui avrai bisogno:
Scarica qui. Durante questo tutorial sto usando "il debugger del contenuto del plugin per Macintosh Flash Player 10 (Mac basati su Intel) (ZIP, 6.03 MB)". Per provare quale versione di Flash Player hai installato, dai un'occhiata a questo pratico strumento di Peter deHaan, che tra l'altro ha un grande blog;)
Visualizza a grandezza naturale Certo, avrai bisogno di questo. Se non ce l'hai puoi sempre ottenere una copia gratuita:
Campioni con codice
Adobe® Flex ™ 3.3 Guida di riferimento
Le schermate acquisite con questo tut sono realizzate su Mac, ma dovrebbero essere ± uguali su PC. La prospettiva della mia finestra forse è diversa da quella che vedi, ma puoi trovare tutte le schede sotto il menu della finestra.
Se sei pronto, iniziamo!
Ho creato un nuovo progetto Flex; molto semplice, un pannello con due pulsanti. Ogni pulsante chiamerà la sua funzione click; b1_click () eseguirà un ciclo, chiama la funzione update_Label (). b2_click () creerà un errore di runtime, dato che non esiste un valore n_error.
/> Visualizza a grandezza naturale Cos'è un punto di interruzione? Un punto di interruzione è impostato su una riga eseguibile di un programma. Se il punto di interruzione è abilitato durante il debug, l'esecuzione viene sospesa prima dell'esecuzione di tale riga di codice. Per sospendere l'applicazione mentre è in esecuzione, è necessario impostare un punto di interruzione. È facile da fare; fare doppio clic sullo spazio vuoto accanto al numero di riga. Fare doppio clic su di nuovo per rimuovere.
Ho impostato due punti di interruzione; linee 10 e 20 (due punti blu compaiono sul margine). Se clicco su button1, si fermerà sulla linea 10, fare clic su button2 si fermerà sulla linea 20.
Puoi vedere tutti i tuoi punti di interruzione nella scheda "Punti di interruzione" e possono essere aggiunti o rimossi ogni volta che lo desideri. Inoltre, è possibile utilizzare le caselle di controllo per abilitarli / disabilitarli temporaneamente.
Se vuoi vedere come viene modificato il valore nel tempo, evidenzia il valore, fai clic con il pulsante destro del mouse, seleziona "Guarda" num "".
"Num" è ora aggiunto alla scheda Espressioni.
/> Visualizza a grandezza naturale Ora abbiamo tutto pronto, iniziamo la sezione di debug. Clicca sull'icona che sembra un insetto
/> Visualizza a grandezza naturale o selezionalo dal menu:
/> Visualizza a grandezza naturale Quando l'app inizia a funzionare, puoi vederla nel browser ma non succede nulla, che cosa fare dopo? Il punto di interruzione è impostato all'interno della funzione, quindi è necessario esaminare la funzione.
/> Visualizza a grandezza naturale Per attivare il punto di interruzione, fare clic su "Pulsante 1" per chiamare la funzione b1_click (). L'app si ferma quindi alla riga 10 e num è ancora 0 poiché il codice "num + = 1;" non è ancora stato eseguito. Guarda la scheda Debug; alcune icone si illuminano e alcuni valori sono ora visibili.
/> Visualizza a grandezza naturale Per prima cosa diamo un'occhiata alla scheda Variabili; alcune cose da notare:
/> Visualizza a grandezza naturale Apri "questo", apparirà una lunga lista. L'elenco continuerà a essere sempre più lungo, quindi noterai che il tuo computer sta rallentando;)
Poiché so che voglio concentrarmi su "button2.label", trovalo e fai clic con il pulsante destro del mouse per selezionare "Crea un'espressione di controllo".
Ora dai un'occhiata alla scheda delle espressioni, semplice e pulita, proprio come piace a me. Due variabili che stiamo guardando ora, "num" che abbiamo creato in precedenza e "this.button2.label".
Ora diamo un'occhiata alla scheda di debug. In questa scheda, vedrai che alcune icone sono ora abilitate, un elenco di nomi di funzioni e nomi di componenti. Lo screenshot qui sotto mostra che siamo attualmente nella funzione myLoop e che il componente "button2" ha eseguito un'azione "click" per chiamare questa funzione.
/> Visualizza a grandezza naturale Quelle icone che abbiamo notato (puoi trovarle nel menu> esegui anche tu), a cosa servono??
/> Visualizza a grandezza naturale Quando un thread è sospeso, i controlli passo possono essere utilizzati per scorrere l'esecuzione del programma riga per riga.
Spesso, puoi anche usare scorciatoie - memorizzarle!
F6 e F8 saranno i tuoi migliori amici, ricordali!
Premiamo F6 alcune volte. Tieni d'occhio la scheda Espressione, guarda a cosa sta cambiando il valore.
/> Visualizza a grandezza naturale Continua a premere F6! Il valore di num sta cambiando nella scheda Espressioni.
/> Visualizza a grandezza naturale Se il tuo ciclo non finisce mai, finisce presto, o non inizia nemmeno mai, puoi guardare l'azione da vicino per vedere cosa sta succedendo. Una volta terminato il ciclo, viene chiamata la seconda funzione update_Label (). Premendo F6 lo supereremo, ma vogliamo vedere cosa succede entro the update_Label (). Premi F5 "step in".
/> Visualizza a grandezza naturale Ora siamo nella funzione update_Label ().
/> Visualizza a grandezza naturale Puoi premere F7 per tornare a myLoop (). Il valore di "this.button2.label" è stato modificato.
/> Visualizza a grandezza naturale Premiamo F8 per riprendere l'app. Ora l'etichetta del pulsante2 è stata aggiornata.
/> Visualizza a grandezza naturale OK, ora testiamo il bug nell'app. Sappiamo che c'è un bug nella funzione b2_click (), quindi vediamo in azione. Fai clic su "Pulsante 2", questo chiamerà la funzione b2_click () e l'app si fermerà all'errore.
/> Visualizza a grandezza naturale Dai un'occhiata da vicino alla scheda Debug. Qui dentro ti dice qual è l'errore e chi sta chiamando.
/> Visualizza a grandezza naturale Ecco cosa viene visualizzato nella scheda Console. Ti dà più informazioni sull'errore e il numero di riga in cui si è verificato l'errore.
/> Visualizza a grandezza naturale È sempre possibile modificare il valore delle variabili mentre l'applicazione è sospesa. Ad esempio, se voglio cambiare button2.label da "num = 10" a "new label", faccio quanto segue: prima trova la variabile "label", fai clic con il tasto destro del mouse, seleziona Change Value.
La finestra Imposta valore si apre e visualizza il valore corrente.
Ho intenzione di cambiare quella stringa in "nuova etichetta", quindi premere OK.
Ora nella scheda Variabili, il nuovo valore è impostato.
Riprendi l'applicazione, vedrai che l'etichetta è stata aggiornata.
/> Visualizza a grandezza naturale Bene, ora sai come usare il debugger! Ecco un breve riassunto:
Se pensi di essere pronto a testare le tue abilità di debug ora, provalo sulla tua applicazione!
Un ultimo consiglio per chi è nuovo a Flex: ricorda di esportare sempre una build di rilascio, non la build di debug che è molto più grande. Spero ti sia piaciuto leggere insieme!
Accentsconagua