Condividi tramite


Guida rapida: Navigazione nel debugger (JavaScript)

Questa guida introduttiva illustra come spostarsi nel debugger di Visual Studio e come visualizzare e modificare lo stato del programma in una sessione.

La guida è destinata agli sviluppatori che non hanno familiarità con il debug in Visual Studio e a coloro che desiderano avere maggiori informazioni su come spostarsi in una sessione di debug di Visual Studio, ma non insegna l'arte stessa del debug. Le funzioni incluse nel codice di esempio sono concepite solo per illustrare le procedure di debug descritte in questo argomento. Non usano procedure consigliate per la progettazione di app o funzioni. In realtà, come scoprirai presto, le funzioni e l'app stessa non hanno alcuna finalità pratica.

Le sezioni di questa guida introduttiva sono state progettate nell'ottica della massima indipendenza per consentirti di ignorare le eventuali sezioni contenenti informazioni che già conosci. Non sei inoltre obbligato a creare un'app di esempio, anche se te lo consigliamo e abbiamo fatto in modo da rendere il processo più semplice possibile.

Tasti di scelta rapida del debugger. La navigazione nel debugger di Visual Studio è ottimizzata sia per il mouse che per la tastiera. In molti passaggi di questo argomento è indicato il tasto di scelta rapida in un commento racchiuso tra parentesi. Ad esempio, (tastiera: F5) indica che premendo il tasto F5 si avvia o si continua l'esecuzione del debugger.

Nota

Modello Module

Le app di Windows Store utilizzano spesso il modello Module JavaScript per incapsulare i dati e le funzioni in una pagina. Il modello Module utilizza una singola chiusura anonima a esecuzione automatica per mantenere la funzionalità della pagina separata dallo spazio dei nomi globale. In questo argomento chiameremo tale funzione module.

In questo argomento

Potrai apprendere come:

Creare un'app di esempio

Impostare e raggiungere un punto di interruzione, eseguire un'istruzione in una funzione ed esaminare i dati del programma

Eseguire un'istruzione, eseguire un'istruzione/routine e uscire da un'istruzione/routine delle funzioni

Impostare un punto di interruzione condizionale, eseguire fino al cursore e visualizzare una variabile

Visualizzare i dati delle variabili nella finestra Variabili locali

  • Visualizzare i dati delle variabili e la catena di prototipi di un oggetto

  • Esaminare i dati nella catena dell'ambito

Passare al codice tramite la finestra Stack di chiamate

Creare un'app di esempio

Il debug viene eseguito sul codice. L'app di esempio usa quindi il framework dell'app di Windows Store solo per creare un file di origine in cui puoi vedere come funziona la navigazione in una sessione di debug e come esaminare lo stato del programma. Tutto il codice che richiamerai viene chiamato dalla funzione module del file default.js. Non vengono aggiunti controlli, né gestiti eventi.

  1. Creare un'app di Windows Store JavaScript vuota. Apri Visual Studio. Nella home page scegli il link Nuovo progetto. Nella finestra di dialogo Nuovo progetto scegli JavaScript nell'elenco Installato, quindi scegli Windows Store. Nell'elenco di modelli di progetto scegli Applicazione vuota. Visual Studio crea una nuova soluzione e il progetto, visualizzando il file default.htm nell'editor di codice.

    Osserva i file di script caricati nella pagina.

    • I file ui.js e base.js creano la Libreria Windows per JavaScript. La Libreria Windows per JavaScript è un set di file CSS e JavaScript che semplificano la creazione di app di Windows Store utilizzando JavaScript. La userai insieme a HTML, CSS e Windows Runtime per creare la tua app.

    • Il codice inizia nel file default.js .

  2. Aprire il file di origine default.js. In Esplora soluzioni apri il nodo js e scegli default.js.

  3. Sostituire il contenuto della pagina con il codice di esempio. Elimina tutto il contenuto dal file default.js. Visita il link Codice di esempio della navigazione del debugger (JavaScript), quindi copia negli Appunti il codice riportato nella sezione JavaScript. Scegli Indietro nel browser o nel visualizzatore della Guida per tornare a questa pagina della guida introduttiva. Nell'editor di Visual Studio incolla il codice nel file default.js vuoto. Scegli CTRL + S per salvare il file.

A questo punto puoi proseguire con gli esempi di questo argomento.

Impostare e raggiungere un punto di interruzione, eseguire un'istruzione in una funzione ed esaminare i dati del programma

Il modo più comune per avviare una sessione di debug consiste nello scegliere Avvia debug dal menu Debug (tastiera: F5). L'app viene avviata e continua l'esecuzione fino a raggiungere un punto di interruzione. Sospendi manualmente l'esecuzione e si verifica un'eccezione o l'app termina.

Dopo la sospensione dell'esecuzione nel debugger, puoi visualizzare il valore di una variabile attiva in un suggerimento dati posizionando il puntatore del mouse sulla variabile.

Dopo la sospensione dell'esecuzione dell'app, un'operazione detta anche interruzione del debugger, puoi controllare in che modo viene eseguito il resto del codice programma. Puoi continuare riga per riga, passando da una chiamata di funzione alla funzione stessa, o eseguire una funzione chiamata in un singolo passaggio. Queste procedure sono dette esecuzione dell'app un'istruzione alla volta. Puoi anche riprendere la normale esecuzione dell'app, continuandola fino al successivo punto di interruzione impostato o fino alla riga in cui hai posizionato il cursore. Puoi arrestare la sessione di debug in qualsiasi momento. Il debugger è progettato per eseguire le necessarie operazioni di pulizia e per uscire dall'esecuzione.

Hh924759.collapse_all(it-it,VS.110).gifEsempio 1

In questo esempio potrai impostare un punto di interruzione nel corpo della funzione module in default.js che chiama la prima delle nostre istruzioni utente. Potrai quindi eseguire un'istruzione nella funzione, visualizzare i valori delle variabili nei suggerimenti dati del debugger, quindi arrestare il debug.

  1. Impostare un punto di interruzione. Imposta un punto di interruzione in corrispondenza dell'istruzione callTrack = "module function"; che si verifica subito dopo la chiamata a app.start(). Scegli la riga nella barra di navigazione ombreggiata dell'editor del codice sorgente (tastiera: posiziona il cursore sulla riga e premi F9).

    Imposta un punto di interruzione in example1

    L'icona del punto di interruzione viene visualizzata nella barra di navigazione.

  2. Eseguire fino al punto di interruzione. Avvia la sessione di debug scegliendo Avvia debug dal menu Debug (tastiera: F5).

    L'esecuzione dell'app inizia e viene sospesa immediatamente prima dell'istruzione in cui hai impostato il punto di interruzione. L'icona della riga corrente nella barra di navigazione identifica la posizione e l'istruzione corrente risulta evidenziata.

    Esegui a punto di interruzione

    A questo punto puoi controllare l'esecuzione dell'app ed esaminare lo stato del programma mentre esegui il codice un'istruzione alla volta.

  3. Eseguire un'istruzione nella funzione. Scegli Esegui istruzione dal menu Debug (tastiera: F11).

    Esegui istruzione in una riga di codice

    Come puoi notare il debugger passa alla riga successiva, che corrisponde a una chiamata alla funzione example1. Scegli di nuovo Esegui istruzione. Il debugger passa alla prima riga di codice della funzione example1. La riga evidenziata non è stata eseguita, ma la funzione è stata caricata nello stack di chiamate ed è stata allocata la memoria per le variabili locali.

  4. Quando esegui un'istruzione in una riga di codice, il debugger esegue una delle seguenti azioni:

    • Se l'istruzione successiva non è una chiamata a una funzione nella soluzione, il debugger esegue l'istruzione, passa all'istruzione successiva, quindi sospende l'esecuzione.

    • Se l'istruzione è una chiamata a una funzione nella soluzione, il debugger passa alla prima riga della funzione chiamata, quindi sospende l'esecuzione.

    Continua a eseguire le istruzioni in example1 finché non avrai raggiunto il punto di uscita. Il debugger evidenzia la parentesi graffa chiusa della funzione.

  5. Visualizzare i valori delle variabili nei suggerimenti dati. Continua a eseguire le istruzioni in example1 finché non avrai raggiunto il punto di uscita. Il debugger evidenzia la parentesi graffa chiusa della funzione. Se posizioni il mouse sul nome di una variabile, vedrai il nome e il valore in un suggerimento dati.

    Visualizza valori variabili nel suggerimento dati

  6. Aggiungere un'espressione di controllo per la variabile callTrack. La variabile callTrack viene utilizzata in tutta la guida introduttiva per illustrare le funzioni chiamate negli esempi. Per visualizzare più facilmente il valore della variabile, aggiungila a una finestra Espressioni di controllo. Seleziona il nome della variabile nell'editor, quindi scegli Aggiungi espressione di controllo dal menu di scelta rapida.

    Controlla variabile

    In una finestra Espressioni di controllo puoi controllare più variabili. I valori delle variabili controllate, come i valori nelle finestre dei suggerimenti dati, vengono aggiornati a ogni sospensione dell'esecuzione. Le variabili controllate vengono salvate in tutte le sessioni di debug.

  7. Arrestare il debug. Scegli Termina debug dal menu Debug (tastiera: MAIUSC+F5). La sessione di debug viene terminata.

Eseguire un'istruzione, eseguire un'istruzione/routine e uscire da un'istruzione/routine delle funzioni

A differenza dell'esecuzione di un'istruzione in una funzione chiamata da una funzione padre, l'esecuzione di un'istruzione/routine in una funzione comporta l'esecuzione della funzione figlio e la successiva sospensione dell'esecuzione nella funzione chiamante alla ripresa della funzione padre. Prima di eseguire un'istruzione/routine di una funzione, dovrai avere acquisito familiarità con il funzionamento della funzione e avere la certezza che questa operazione non influirà sul problema che stai analizzando.

L'esecuzione di un'istruzione/routine in una riga di codice che non contiene una chiamata di funzione ha lo stesso effetto della semplice esecuzione di un'istruzione nella riga.

All'uscita da un'istruzione/routine di una funzione figlio, l'esecuzione della funzione continua, quindi viene sospesa dopo che la funzione sarà ritornata alla relativa funzione chiamante. Puoi uscire da un'istruzione/routine di una funzione lunga dopo aver stabilito che il resto della funzione non è significativo.

Sia l'esecuzione che l'uscita da un'istruzione/routine di una funzione comporta l'esecuzione della funzione.

Esegui istruzione, esci da istruzione nei metodi

Hh924759.collapse_all(it-it,VS.110).gifEsempio 2

In questo esempio proverai a eseguire un'istruzione, eseguire un'istruzione/routine e uscire da un'istruzione/routine delle funzioni.

  1. Chiamare la funzione example2 nella funzione module. Modifica la funzione module e sostituisci la riga dopo var callTrack = "module function" con example2();.

    Chiama funzione example2

  2. Eseguire fino al punto di interruzione. Avvia la sessione di debug scegliendo Avvia debug dal menu Debug (tastiera: F5). Il debugger sospende l'esecuzione nel punto di interruzione.

  3. Eseguire un'istruzione/routine della riga di codice. Scegli Esegui istruzione/routine dal menu Debug (tastiera: F10). Il debugger esegue l'istruzione var callTrack = "module function" nello stesso modo in cui procede all'esecuzione dell'istruzione.

  4. Eseguire un'istruzione in example2 e in example2_a. Premi F11 per eseguire un'istruzione nella funzione example2. Continua a eseguire le istruzioni in example2 fino a raggiungere la riga var x = example2_a();. Esegui quindi l'istruzione in questa riga per passare al punto di ingresso di example2_a. Continua a eseguire ogni istruzione di example2_a fino a tornare a example2.

    Esegui istruzione funzione

  5. Eseguire un'istruzione/routine di una funzione. Come noterai, la riga successiva in example2, var y = example2_a(); è fondamentalmente uguale alla riga precedente. Puoi tranquillamente eseguire l'istruzione/routine in questa riga. Premi F10 per passare dalla ripresa di example2 a questa seconda chiamata a example2_a. La stringa callTrack indica che la funzione example2_a è stata eseguita due volte.

  6. Uscire dall'istruzione/routine di una funzione. Premi F11 per eseguire un'istruzione nella funzione example2_b. Come puoi notare example2_b non è molto diversa da example2_a. Per uscire dall'istruzione/routine della funzione, scegli Esci da istruzione/routine dal menu Debug (tastiera: MAIUSC+F11). La variabile callTrack indica che example2_b è stata eseguita e che il debugger è ritornato al punto in cui riprende example2.

  7. Arrestare il debug. Scegli Termina debug dal menu Debug (tastiera: MAIUSC+F5). La sessione di debug viene terminata.

Impostare un punto di interruzione condizionale, eseguire fino al cursore e visualizzare una variabile

Un punto di interruzione condizionale specifica una condizione che determina la sospensione dell'esecuzione da parte del debugger. La condizione viene specificata da una qualsiasi espressione di codice che possa restituire true o false. Puoi utilizzare un punto di interruzione, ad esempio, per esaminare lo stato del programma in una funzione chiamata di frequente solo quando una variabile raggiunge un determinato valore.

L'esecuzione fino al cursore corrisponde all'impostazione di un punto di interruzione unico. Quando l'esecuzione viene sospesa, puoi selezionare una riga nell'origine e riprendere l'esecuzione fino a raggiungere la riga selezionata. Ad esempio, stai eseguendo un ciclo in una funzione e determini che il codice nel ciclo viene eseguito correttamente. Anziché eseguire ogni singola iterazione del ciclo, puoi scegliere di eseguire fino al cursore che viene posizionato dopo l'esecuzione del ciclo.

A volte è difficile visualizzare il valore di una variabile nella riga di una finestra del suggerimento dati o di altri dati. Il debugger consente di visualizzare stringhe, HTML e XML in un visualizzatore di testo che presenta una visualizzazione formattata del valore in una finestra scorrevole.

Hh924759.collapse_all(it-it,VS.110).gifEsempio 3

In questo esempio imposterai un punto di interruzione condizionale che interrompe un'iterazione specifica di un ciclo, quindi procede all'esecuzione fino al cursore inserito dopo il ciclo. Puoi anche vedere il valore di una variabile in un visualizzatore di testo.

  1. Chiamare la funzione example3 nella funzione module. Modifica la funzione module e sostituisci la riga dopo var callTrack = "module function"; con la riga example3();.

    Chiama example3

  2. Eseguire fino al punto di interruzione. Avvia la sessione di debug scegliendo Avvia debug dal menu Debug (tastiera: F5). Il debugger sospende l'esecuzione nel punto di interruzione della funzione module.

  3. Eseguire un'istruzione nella funzione example3. Scegli Esegui istruzione dal menu Debug (tastiera: F11) per passare al punto di ingresso della funzione example3. Continua a eseguire istruzioni nella funzione finché non avrai iterato uno o due cicli del blocco for. Tieni presente che l'esecuzione di tutte e 1000 le iterazioni richiede molto tempo.

  4. Impostare un punto di interruzione condizionale. Nella barra di navigazione a sinistra della finestra del codice fai clic con il pulsante destro del mouse sulla riga s += i.toString() + "\n";, quindi scegli Condizione dal menu di scelta rapida.

    Seleziona la casella di controllo Condizione, quindi digita i == 500; nella casella di testo. Scegli l'opzione È true, quindi OK. Il punto di interruzione consente di controllare il valore alla 500a iterazione del ciclo for. Puoi identificare un punto di interruzione condizionale dalla relativa icona con una croce bianca.

    Icona punto di interruzione condizionale

  5. Eseguire fino al punto di interruzione. Scegli Continua dal menu Debug (tastiera: F5). Posiziona il mouse su i per verificare che il valore corrente di i sia 500. Noterai inoltre che la variabile s è rappresentata come singola riga ed è molto più lunga della finestra del suggerimento dati.

  6. Visualizzare una variabile di tipo stringa. Fai clic sull'icona a forma di lente di ingrandimento nel suggerimento dati di s.

    Viene visualizzata la finestra del Visualizzatore testo con il valore della stringa presentato come una stringa con più righe.

    Visualizzatore di testo debug

  7. Eseguire fino al cursore. Seleziona la riga callTrack += "->example3"; quindi scegli Esegui fino al cursore dal menu di scelta rapida (tastiera: CTRL+F10). Il debugger completa le iterazioni del ciclo, quindi sospende l'esecuzione in corrispondenza della riga.

  8. Arrestare il debug. Scegli Termina debug dal menu Debug (tastiera: MAIUSC+F5). La sessione di debug viene terminata.

Hh924759.collapse_all(it-it,VS.110).gifUtilizzare Esegui fino al cursore per tornare al codice ed eliminare un punto di interruzione

L'esecuzione fino al cursore può essere molto utile quando hai eseguito un'istruzione nel codice di libreria di Microsoft o di terze parti. Mentre l'esecuzione di un'istruzione alla volta nel codice di libreria può fornire informazioni, spesso richiede molto tempo e in genere si è molto più interessati al proprio codice. Questo esercizio illustra come procedere.

  1. Impostare un punto di interruzione nella chiamata di app.start. Nella funzione module imposta un punto di interruzione nella riga app.start()

  2. Eseguire fino al punto di interruzione ed eseguire un'istruzione nella funzione della libreria.

    Quando esegui un'istruzione in app.start(), l'editor visualizza il codice in base.js. Esegui un'istruzione in qualche altra riga.

  3. Eseguire un'istruzione/routine e uscire da un'istruzione/routine delle funzioni. Mentre esegui un'istruzione/routine (F10) ed esci da un'istruzione/routine (MAIUSC+F11) del codice in base.js, potresti giungere alla conclusione che esaminare la complessità e la lunghezza della funzione di avvio non è quello che vorresti fare.

  4. Impostare il cursore nel codice e procedere all'esecuzione fino a quel punto. Torna al file default.js nell'editor di codice. Seleziona la prima riga di codice dopo app.start() (non puoi eseguire fino a un commento o a una riga vuota). Scegli Esegui fino al cursore dal menu di scelta rapida. Il debugger continua l'esecuzione della funzione app.start e sospende l'esecuzione in corrispondenza del punto di interruzione.

Visualizzare i dati delle variabili nella finestra Variabili locali

La finestra Variabili locali è una visualizzazione albero dei parametri e delle variabili nella catena dell'ambito della funzione attualmente in esecuzione.

Hh924759.collapse_all(it-it,VS.110).gifVisualizzare i dati delle variabili e la catena di prototipi di un oggetto

  1. Aggiungere un oggetto array alla funzione module. Modifica la funzione module e sostituisci la riga dopo var callTrack = "module function" con var myArray = new Array(1, 2, 3);.

    Definizione myArray

  2. Eseguire fino al punto di interruzione. Avvia la sessione di debug scegliendo Avvia debug dal menu Debug (tastiera: F5). Il debugger sospende l'esecuzione nel punto di interruzione. Esegui un'istruzione nella riga.

  3. Aprire la finestra Variabili locali. Scegli Finestre dal menu Debug, quindi Variabili locali. (Tastiera: ALT+4).

  4. Esaminare le variabili locali nella funzione module Le finestra Variabili locali visualizza le variabili della funzione attualmente in esecuzione (la funzione module) come nodi di primo livello dell'albero. Quando immetti una funzione, JavaScript crea tutte le variabili e fornisce a ognuna un valore undefined. Alle funzioni definite nella funzione viene utilizzato il relativo testo come valore.

    Finestra Variabili locali

  5. Eseguire le definizioni callTrack e myArray un'istruzione alla volta. Individua le variabili callTrack e myArray nella finestra Variabili locali. Esegui un'istruzione/routine (F10) delle due definizioni. Noterai che i campi Valore e Tipo vengono modificati. Nella finestra Variabili locali vengono evidenziati i valori delle variabili modificati dall'ultima interruzione.

  6. Esaminare l'oggetto myArray Espandi la variabile myArray. Ogni elemento della matrice è elencato nel nodo [prototype] che contiene la gerarchia di ereditarietà dell'oggetto Array. Espandi questo nodo.

    Catena di prototipi nella finestra Variabili locali

    • Nel nodo Methods sono elencati tutti i metodi dell'oggetto Array.

    • Il nodo [prototype] contiene il prototipo dell'oggetto Object da cui è derivato Array. I nodi [prototype] possono essere ricorsivi. Ogni oggetto padre in una gerarchia di oggetti è descritto nel nodo [prototype] del relativo elemento figlio.

  7. Arrestare il debug. Scegli Termina debug dal menu Debug (tastiera: MAIUSC+F5). La sessione di debug viene terminata.

Esaminare i dati nella catena dell'ambito

La catena dell'ambito di una funzione include tutte le variabili attive e raggiungibili dalla funzione. Le variabili globali fanno parte della catena dell'ambito, come tutti gli oggetti (funzioni incluse) specificati nella funzione che definisce la funzione attualmente in esecuzione. La variabile callTrack definita nella funzione module di default.js, ad esempio, è raggiungibile da qualsiasi funzione definita nella funzione module. Ogni ambito è elencato separatamente nella finestra Variabili locali.

  • Le variabili della funzione attualmente in esecuzione sono elencate nella parte superiore della finestra.

  • Le variabili di ogni ambito di funzione nella catena dell'ambito sono elencate nel nodo [Scope] relativo alla funzione. Le funzioni di ambito sono elencate in base al relativo ordine nella catena, dalla funzione che definisce la funzione corrente alla funzione più esterna della catena.

  • Nel nodo [Globals] sono elencati gli oggetti globali definiti all'esterno di qualsiasi funzione.

Le catene dell'ambito possono generare confusione e vengono illustrate più chiaramente con un esempio. Nell'esempio seguente puoi vedere in che modo la funzione module crea il relativo ambito e come puoi creare un altro livello di ambito creando una chiusura.

Hh924759.collapse_all(it-it,VS.110).gifEsempio 4

  1. Chiamare la funzione example4 dalla funzione module. Modifica la funzione module e sostituisci la riga dopo var callTrack = "module function" con example4().

    Chiama example4

  2. Eseguire fino al punto di interruzione. Avvia la sessione di debug scegliendo Avvia debug dal menu Debug (tastiera: F5). Il debugger sospende l'esecuzione nel punto di interruzione.

  3. Aprire la finestra Variabili locali. Se necessario, scegli Finestre dal menu Debug, quindi Variabili locali. (Tastiera: Alt+4). Come puoi notare, nella finestra sono elencate tutte le variabili e le funzioni della funzione module ed è presente anche un nodo [Globals].

  4. Esaminare le variabili globali. Espandi il nodo [Globals]. Gli oggetti e le variabili in questo nodo sono stati impostati dalla Libreria Windows per JavaScript. Puoi aggiungere le tue variabili all'ambito globale.

  5. Eseguire un'istruzione in example4 ed esaminare le variabili di ambito e locali Esegui un'istruzione (tastiera: F11) nella funzione example4. Poiché example4 è definito nella funzione module, la funzione module diventa l'ambito padre. example4 può chiamare qualsiasi funzione nella funzione module e accedere alle variabili. Espandi il nodo [Scope] nella finestra Variabili locali. Noterai che contiene gli stessi oggetti e le stesse variabili della funzione module.

    Ambito del metodo example4

  6. Eseguire un'istruzione in example4_a ed esaminare le variabili di ambito e locali Continua a eseguire istruzioni in example4 e nella chiamata a example4_a. Noterai che ora le variabili locali provengono da example4_a e che il nodo [Scope] continua a contenere le variabili della funzione module. Anche se le variabili di example4 sono attive, non possono essere raggiunte da example4_a e non fanno più parte della catena dell'ambito.

  7. Eseguire un'istruzione in multipyByA ed esaminare le variabili di ambito e locali Esegui un'istruzione alla volta nel resto di example4_a e nella riga var x = multilpyByA(b);.

    La funzione variabile multipyByA è stata impostata sulla funzione multiplyClosure che è una chiusura. multipyClosure definisce e restituisce una funzione interna, mulitplyXbye acquisisce (si chiude) il parametro e la variabile. In una chiusura la funzione interna restituita ha accesso ai dati della funzione esterna e crea quindi il proprio livello di ambito.

    Quando esegui un'istruzione in var x = multilpyByA(b);, passi alla riga return a * b; nella funzione interna mulitplyXby.

  8. Nella finestra Variabili locali solo il parametro b è elencato come variabile locale in multiplyXby, ma è stato aggiunto un nuovo livello [Scope]. Se espandi questo nodo, vedrai che contiene i parametri, le funzioni e le variabili di multiplyClosure, inclusa la variabile a chiamata nella prima riga di multiplyXby. Un rapido controllo del secondo nodo [Scope] rivela le variabili della funzione module, a cui multiplyXby accede nella riga successiva.

    Ambiti di una chiusura nella finestra Variabili locali

  9. Arrestare il debug. Scegli Termina debug dal menu Debug (tastiera: MAIUSC+F5). La sessione di debug viene terminata.

Passare al codice tramite la finestra Stack di chiamate

Lo stack di chiamate è una struttura di dati che contiene informazioni sulle funzioni attualmente in esecuzione nel thread corrente dell'applicazione. Quando raggiungi un punto di interruzione, nella finestra Stack di chiamate viene visualizzato un elenco di tutte le funzioni attive nello stack. La funzione attualmente in esecuzione è visualizzata all'inizio dell'elenco nella finestra Stack di chiamate. La funzione che avvia il thread si trova in fondo all'elenco. Le funzioni tra la prima e l'ultima mostrano il percorso di chiamate dalla funzione iniziale a quella corrente.

Oltre a visualizzare il percorso di chiamate alla funzione attualmente in esecuzione, la finestra Stack di chiamate può essere utilizzata per passare al codice nell'editor di codice. Questa funzionalità può essere utile quando utilizzi più file e desideri passare rapidamente a una determinata funzione.

Hh924759.collapse_all(it-it,VS.110).gifEsempio 5

In questo esempio eseguirai un'istruzione in un percorso di chiamate contenente cinque funzioni definite dall'utente.

  1. Chiamare la funzione example5 nella funzione module. Modifica la funzione module e sostituisci la riga dopo var callTrack = "module function"; con la riga example5();.

    Chiama example5

  2. Eseguire fino al punto di interruzione. Avvia la sessione di debug scegliendo Avvia debug dal menu Debug (tastiera: F5). Il debugger sospende l'esecuzione nel punto di interruzione della funzione module.

  3. Aprire la finestra Stack di chiamate. Scegli Finestre dal menu Debug, quindi Stack di chiamate (Tastiera: ALT+7). Nella finestra Stack di chiamate sono illustrate due funzioni:

    • Global code è il punto di ingresso della funzione module nella parte inferiore dello stack di chiamate.

    • Anonymous function indica la riga nella funzione module in cui l'esecuzione viene sospesa. Questa è la parte superiore dello stack di chiamate.

  4. Eseguire un'istruzione nelle funzioni per raggiungere la funzione example5_d. Scegli Esegui istruzione dal menu Debug (tastiera: F11) per eseguire le chiamate nel percorso di chiamate fino a raggiungere il punto di ingresso della funzione example5_d. Ogni volta che una funzione chiama una funzione, il numero di riga della funzione chiamante viene salvato e la funzione chiamata viene posizionata all'inizio dello stack. Il numero di riga della funzione chiamante è il punto in cui la funzione chiamante ha sospeso l'esecuzione. Una freccia gialla indica la funzione attualmente in esecuzione.

    Finestra Stack di chiamate

  5. Utilizzare la finestra Stack di chiamate per passare al codice di example5_a e impostare un punto di interruzione. Nella finestra Stack di chiamate seleziona l'elemento di elenco example5_a, quindi scegli Vai a origine dal menu di scelta rapida. L'editor di codice imposta il cursore in corrispondenza del ritorno a capo della funzione. Imposta un punto di interruzione in questa riga. Noterai che la riga di esecuzione corrente non viene modificata. Solo il cursore dell'editor è stato spostato.

  6. Eseguire un'istruzione nelle funzioni, quindi eseguire fino al punto di interruzione. Continua a eseguire istruzioni in example5_d. Quando esci dalla funzione, questa viene eliminata dallo stack di chiamate. Premi F5 per continuare l'esecuzione del programma, che si arresterà nel punto di interruzione creato nel passaggio precedente.

  7. Arrestare il debug. Scegli Termina debug dal menu Debug (tastiera: MAIUSC+F5). La sessione di debug viene terminata.

Vedere anche

Concetti

Come avviare una sessione di debug (JavaScript)

Guida rapida: Navigazione nel debugger (JavaScript)

Guida rapida: Debug di app (JavaScript)

Come attivare eventi di sospensione, ripresa e background nelle app di Windows Store

Debug di app di Windows Store