Guida rapida: Debug di app (JavaScript)
Visual Studio offre un'esperienza di debug completa per le app in Windows Store compilate per Windows utilizzando JavaScript che include funzionalità note agli sviluppatori di Visual Studio e Internet Explorer. In questo argomento viene fornita una panoramica delle funzionalità di debug specifiche di queste app con esercitazioni che illustrano come utilizzarle.
Per eseguire il debug puoi utilizzare un modello interattivo, in cui è possibile visualizzare e interagire con il codice HTML, CSS e JavaScript sottoposto a rendering per risolvere i problemi. Puoi anche utilizzare un modello di debug di Visual Studio più tradizionale, che ti consente di eseguire le attività principali, come impostare punti di interruzione ed eseguire il codice istruzione per istruzione, o utilizzare una combinazione di entrambi i modelli.
Nella tabella seguente sono elencate le funzionalità di debug disponibili per le app in Windows Store utilizzando JavaScript e vengono forniti collegamenti a ulteriori informazioni.
DOM Explorer |
DOM Explorer offre una visualizzazione che rappresenta il modo in cui la shell interpreta una pagina, piuttosto che il codice sorgente originale. Fornisce l'accesso alle informazioni dinamiche su stili, layout e attributi degli elementi attualmente selezionati. Puoi modificare gli stili, i layout e gli attributi e osservare immediatamente i risultati. Per ulteriori informazioni, vedi:
|
Finestra Console JavaScript |
Nella finestra della console JavaScript hai la possibilità di interagire con l'app sottoposta a rendering inviando messaggi alla console, visualizzando i valori delle variabili locali e globali ed eseguendo il codice JavaScript. La console segnala inoltre gli errori e le eccezioni JavaScript, oltre alle eccezioni relative a Document Object Model (DOM) e Windows Runtime. Per ulteriori informazioni, vedi:
|
Aggiorna |
Questa funzionalità consente di modificare il codice sorgente e di ricaricare quindi le pagine senza arrestare e riavviare il debugger. Per ulteriori informazioni, vedi Come aggiornare un'app. |
Seleziona elemento |
In DOM Explorer puoi selezionare elementi DOM facendo clic su aree dell'app in esecuzione nel simulatore o nel computer host. Per ulteriori informazioni, vedi Selezione di elementi. |
Sessioni di debug |
Per informazioni su come avviare sessioni di debug e la distribuzione di app, vedi: |
Punti di interruzione, esecuzione di codice istruzione per istruzione |
Il debugger di Visual Studio consente di impostare punti di interruzione e di eseguire il codice un'istruzione alla volta utilizzando comandi come F5 (Avvia debug o Continua) e F11 (Esegui istruzione). Durante l'esecuzione del codice un'istruzione alla volta, puoi interagire con l'app in base allo stato corrente nella finestra della console JavaScript. Per ulteriori informazioni, vedi:
|
Profiler |
Per informazioni sull'individuazione dei problemi di prestazioni nell'app, vedi Analisi delle prestazioni di app di Windows Store |
JavaScript Memory Analyzer |
Per informazioni sull'individuazione delle perdite di memoria nell'app, vedi Analisi dell'utilizzo della memoria nelle app di Windows Store (JavaScript) |
Questo argomento fornisce inoltre informazioni sulle attività di debug JavaScript Abilitazione di eccezioni first-chance e Debug di app che utilizzano componenti Windows Runtime.
Debug interattivo mediante DOM Explorer
DOM Explorer presenta una visualizzazione della pagina sottoposta a rendering. Puoi utilizzarlo per modificare i valori e vedere immediatamente i risultati. In questo modo puoi testare le modifiche tramite un processo iterativo senza arrestare e riavviare il debugger. Il codice sorgente nel progetto non viene modificato quando interagisci con la pagina utilizzando questo metodo. Pertanto puoi arrestare il debugger e apportare le modifiche al codice sorgente quando individui le correzioni del codice che desideri.
Suggerimento
Se preferisci non arrestare il debugger, puoi apportare modifiche al codice sorgente, quindi aggiornare l'app utilizzando il pulsante Aggiorna applicazione Windows sulla barra degli strumenti di debug. Per ulteriori informazioni, vedi Come aggiornare un'app.
Puoi utilizzare DOM Explorer per:
Controllare il codice HTML, CSS e JavaScript sottoposto a rendering e passare al sottoalbero di elementi DOM.
Modificare dinamicamente gli attributi per gli elementi sottoposti a rendering.
Controllare l'applicazione degli stili CSS alla pagina e apportare modifiche dinamicamente.
Quando esegui il debug delle app, devi spesso selezionare elementi in DOM Explorer. Quando selezioni un elemento, i valori visualizzati nelle schede a destra vengono aggiornati automaticamente per riflettere l'elemento selezionato in DOM Explorer. Queste schede includono Stili, Stili traccia, Layout, Attributi ed Eventi. Per ulteriori informazioni sulla selezione di elementi, vedi Selezione di elementi.
Suggerimento
Se la finestra di DOM Explorer è chiusa, fai clic su Debug > Finestre > DOM Explorer per riaprirla. La finestra viene visualizzata solo durante una sessione di debug di script.
Nella procedura seguente eseguiremo il processo di debug interattivo di un'app utilizzando DOM Explorer. Creeremo un'app che utilizza un controllo FlipView, quindi eseguiremo il debug. Il codice dell'app contiene diversi errori.
Per utilizzare il debug interattivo in DOM Explorer
Crea una nuova soluzione in Visual Studio facendo clic su File > Nuovo progetto.
Seleziona il modello JavaScript denominato Applicazione vuota e digita un nome per il progetto, ad esempio FlipViewApp.
Nell'elemento BODY del file default.html aggiungi il codice seguente:
<div id="flipTemplate" data-win-control="WinJS.Binding.Template" style="display:none"> <div class="fixedItem" > <img src="#" data-win-bind="src: flipImg" /> </div> </div> <div id="fView" style="width:100px;height:100px;background-color:#0094ff" data-win-control="WinJS.UI.FlipView" data-win-options="{ itemDataSource: Data.items.dataSource, itemTemplate: flipTemplate }"> </div>Sostituisci il codice nel file default.js con questo codice:
(function () { "use strict"; var app = WinJS.Application; var activation = Windows.ApplicationModel.Activation; var myData = []; for (var x = 0; x < 4; x++) { myData[x] = { flipImg: "/images/logo.png" } }; var pages = new WinJS.Binding.List(myData, { proxy: true }); app.onactivated = function (args) { if (args.detail.kind === activation.ActivationKind.launch) { if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) { // TODO: . . . } else { // TODO: . . . } args.setPromise(WinJS.UI.processAll()); updateImages(); } }; function updateImages() { pages.push(0, { flipImg: "https://go.microsoft.com/fwlink/?LinkID=223195" }); pages.push(1, { flipImg: "https://go.microsoft.com/fwlink/?LinkID=223196" }); pages.push(2, { flipImg: "https://go.microsoft.com/fwlink/?LinkID=223197" }); }; app.oncheckpoint = function (args) { }; app.start(); var publicMembers = { items: pages }; WinJS.Namespace.define("Data", publicMembers); })();Nota
Il codice JavaScript precedente è incapsulato in una funzione anonima, in base al modello di programmazione tipico utilizzato nei modelli di progetto. Quando esegui il wrapping del codice in questo modo, puoi utilizzare la funzione WinJS.Namespace.define per accedere agli elementi del codice all'interno dell'app.
Seleziona Simulatore dall'elenco a discesa accanto al pulsante Avvia debug sulla barra degli strumenti Debug:
.png "Esecuzione nel simulatore")
Fai clic su Debug > Avvia debug o premi F5 per eseguire l'app in modalità debug.
L'app viene eseguita nel simulatore, ma vedrai una schermata per lo più vuota perché il codice contiene alcuni bug. Un'immagine predefinita in alto a sinistra indica che qualche elemento è stato caricato. Se fai clic in quell'area dello schermo, vedrai una freccia per FlipView che indica la creazione di un'istanza del controllo, ma le dimensioni del controllo non sono corrette.
Suggerimento
Puoi premere ALT+TAB o F12 per passare da Visual Studio all'app in esecuzione. Se esegui l'app nel simulatore anziché nel computer locale, puoi fare clic sui pulsanti di Visual Studio o del simulatore sulla barra delle applicazioni di Windows per passare da una finestra all'altra.
In Visual Studio fai clic sulla scheda DOM Explorer.
Nella finestra di DOM Explorer seleziona l'elemento DIV per la sezione che presenta un ID "fView":
.png "DOM Explorer")
Suggerimento
Puoi anche selezionare l'elemento DIV dell'angolo in basso a sinistra della finestra Console JavaScript digitando select(fView) alla richiesta di input >> e premendo INVIO.
Nota che la larghezza e l'altezza sono impostate erroneamente su valori in pixel in DOM Explorer.
I valori visualizzati nelle schede sul lato destro della finestra di DOM Explorer vengono aggiornati automaticamente per riflettere l'elemento corrente in DOM Explorer.
Nella scheda Attributi fai doppio clic sull'attributo style. Modifica l'altezza e la larghezza in modo che siano entrambe impostate su 100%. Dopo aver premuto INVIO, i nuovi valori vengono immediatamente riflessi nel simulatore, anche se non hai arrestato la sessione di debug.
.png "Scheda Attributi")
Importante
Così come puoi aggiornare i valori dell'attributo, puoi aggiornare i valori visualizzati nelle schede Stili, Stili traccia e Layout. Per ulteriori informazioni, vedi Come controllare le regole CSS e Come visualizzare e modificare il layout.
Le dimensioni del controllo FlipView ora sono corrette e il controllo funziona correttamente. Tuttavia, anziché le immagini previste vengono visualizzate le immagini predefinite, alcune immagini sono mancanti e le immagini previste sono frammiste a immagini mancanti.
Nel codice JavaScript è presente un bug che causa il problema. Nella sezione successiva vedremo come correggere il bug utilizzando la finestra della console JavaScript. Per continuare a eseguire il debug, vedi Debug interattivo mediante la finestra della console JavaScript
Per modificare il codice sorgente HTML, CSS e JavaScript e ricaricare rapidamente pagine senza arrestare e riavviare il debugger, puoi usare la funzionalità Aggiorna. Per ulteriori informazioni sulla funzionalità Aggiorna, vedi Come aggiornare un'app.
Per aggiornare l'app durante il debug
Quando l'app è ancora in esecuzione, passa a Visual Studio.
Apri il file default.html e modifica il codice sorgente modificando l'altezza e la larghezza dell'elemento DIV "fView" in 100%.
Fai clic sul pulsante Aggiorna applicazione Windows sulla barra degli strumenti di debug oppure premi F4. Il pulsante ha il seguente aspetto:
.png "Pulsante Aggiorna applicazione Windows")
.Le pagine dell'app vengono ricaricate e il simulatore ritorna in primo piano.
Come prima, le immagini non sono ancora visualizzate correttamente. Puoi continuare a eseguire il debug di questa app nella sezione successiva.
Debug interattivo mediante la finestra della console JavaScript
Puoi eseguire e aggiornare il codice JavaScript nella finestra della console JavaScript. Come DOM Explorer, la finestra della console JavaScript consente di testare le modifiche senza arrestare e riavviare il debugger. Puoi quindi osservare immediatamente i risultati nella pagina sottoposta a rendering. Quando individui la modifica o le modifiche desiderate, puoi arrestare il debugger e apportare le correzioni al codice sorgente.
Puoi utilizzare la finestra della console JavaScript per:
Eseguire script in modalità a riga singola o multiriga.
Visualizzare messaggi informativi e di errore.
Eseguire altre attività, come cancellare lo schermo. Per un elenco completo di comandi, vedi Comandi della console JavaScript.
Suggerimento
Se la finestra della console JavaScript è chiusa, fai clic su Debug > Finestre > Console JavaScript per riaprirla. La finestra viene visualizzata solo durante una sessione di debug di script.
In questa procedura continueremo a eseguire il debug dell'app FlipView, che abbiamo iniziato nella sezione Debug interattivo mediante DOM Explorer. Abbiamo già verificato che il controllo FlipView funziona correttamente ma non visualizza le immagini previste.
Per eseguire il debug del codice JavaScript nell'app FlipView
Con l'app FlipView in esecuzione nel simulatore, digita Data.items nella richiesta di input della finestra della console JavaScript e premi INVIO.
Nella finestra della console apparirà un visualizzatore per l'oggetto items. Questo indica che è stata creata un'istanza dell'oggetto items, che è disponibile nel contesto dello script. Nella finestra della console puoi fare clic sui nodi di un oggetto per visualizzare i valori delle proprietà oppure puoi utilizzare i tasti di direzione. Se facciamo clic sull'oggetto items._data, come vedi nell'illustrazione, troviamo che i riferimenti relativi all'origine delle immagini sono errati, come previsto. Le immagini predefinite sono ancora presenti nell'oggetto e vi sono immagini mancanti frammiste alle immagini previste.
.png "Finestra della console JavaScript")
Al prompt digita Data.items.push e premi INVIO. La finestra della console mostra l'implementazione della funzione push da un file di progetto Libreria Windows per JavaScript (WinJS). Con una piccola ricerca tramite IntelliSense, scopriamo che dovremmo utilizzare setAt per sostituire le immagini predefinite.
Per risolvere il problema in modo interattivo, senza arrestare la sessione di debug, apri default.js e seleziona il seguente codice dalla funzione updateImages:
pages.push(0, { flipImg: "https://go.microsoft.com/fwlink/?LinkID=223195" }); pages.push(1, { flipImg: "https://go.microsoft.com/fwlink/?LinkID=223196" }); pages.push(2, { flipImg: "https://go.microsoft.com/fwlink/?LinkID=223197" });Copia e incolla il codice nella richiesta di input della console JavaScript.
Suggerimento
Quando incolli codice multiriga nella richiesta di input della console JavaScript, questa passa automaticamente alla modalità multiriga. Puoi premere CTRL+ALT+M per attivare o disattivare la modalità multiriga. Per eseguire uno script in modalità multiriga, premi CTRL+INVIO o fai clic sul simbolo della freccia nell'angolo inferiore destro della finestra.
Correggi le chiamate di funzione push nella richiesta, sostituendo pages.push con Data.items.setAt. Fai quindi clic sul simbolo della freccia per eseguire lo script. Il codice corretto dovrebbe essere analogo al seguente:
Data.items.setAt.setAt(0, { flipImg: "https://go.microsoft.com/fwlink/?LinkID=223195" }); Data.items.setAt.setAt(1, { flipImg: "https://go.microsoft.com/fwlink/?LinkID=223196" }); Data.items.setAt.setAt(2, { flipImg: "https://go.microsoft.com/fwlink/?LinkID=223197" });Premi CTRL+ALT+M per passare dalla richiesta di input della console alla modalità a riga singola, quindi premi CTRL+A per selezionare l'input precedente in modo da rimuoverlo.
Al prompt digita Data.items.length = 3 e premi INVIO. Ciò elimina gli elementi estranei dai dati.
Controlla di nuovo il simulatore. Noterai che le immagini corrette sono contenute nelle pagine corrette di FlipView.
In DOM Explorer puoi visualizzare l'elemento DIV aggiornato e spostarti nel sottoalbero per individuare gli elementi IMG previsti.
Arresta il debug facendo clic su Debug > StopDebugging. In alternativa premi MAIUSC+F5, quindi correggi il codice sorgente.
Per la pagina default.html completa contenente il codice di esempio corretto, vedi Debug del codice di esempio delle applicazioni (JavaScript).
Debug interattivo e modalità di interruzione
Quando utilizzi gli strumenti di debug JavaScript, come la finestra della console JavaScript, puoi utilizzare i punti di interruzione ed eseguire un'istruzione nel codice. Quando un programma in esecuzione nel debugger rileva un punto di interruzione, sospende temporaneamente l'esecuzione del programma. Quando l'esecuzione viene sospesa, il programma passa dalla modalità di esecuzione alla modalità di interruzione. Puoi riprendere l'esecuzione in qualsiasi momento.
Quando un programma è in modalità di interruzione, puoi comunque utilizzare la finestra della console JavaScript per eseguire script e comandi validi nello stato dell'app corrente. In questa procedura utilizzeremo l'app FlipView creata in una procedura precedente per illustrare l'utilizzo della modalità di interruzione.
Per impostare un punto di interruzione ed eseguire il debug dell'app
Nel file default.html dell'app FlipView che hai creato precedentemente fai clic con il pulsante destro del mouse sulla funzione updateImages(), quindi su Punto di interruzione > Inserisci punto di interruzione.
Seleziona Computer locale nell'elenco a discesa accanto al pulsante Avvia debug sulla barra degli strumenti Standard.
Fai clic su Debug > Avvia debug oppure premi F5.
Quando l'esecuzione raggiunge la funzione updateImages(), l'app passa alla modalità di interruzione e la riga corrente dell'esecuzione del programma viene evidenziata in giallo.
.png "Uso della modalità di interruzione con la console JavaScript")
Puoi modificare i valori delle variabili in modo che abbiano immediatamente effetto sullo stato del programma senza terminare la sessione di debug corrente.
Al prompt digita updateImages e premi INVIO. L'implementazione della funzione viene visualizzata nella finestra della console.
Copia una riga della funzione nel prompt e modifica il valore di indice in 3:
pages.setAt(3, { flipImg: "https://go.microsoft.com/fwlink/?LinkID=223197" });Premi INVIO per eseguire la riga di codice.
Se desideri eseguire il codice riga per riga, premi F11 oppure premi F5 per continuare l'esecuzione del programma.
Premi F5 per continuare l'esecuzione del programma. Viene visualizzata l'app FlipView e ora tutte e quattro le pagine mostrano una delle immagini non predefinite.
Per passare di nuovo a Visual Studio, premi F12 o ALT+TAB.
Modalità a riga singola e modalità multiriga nella finestra della console JavaScript
La richiesta di input per la finestra della console JavaScript supporta sia la modalità a riga singola che la modalità multiriga. La procedura di debug interattiva in questo argomento viene fornita come esempio di utilizzo di entrambe le modalità. Per passare da una modalità all'altra, puoi premere CTRL+ALT+M.
La modalità a riga singola fornisce la cronologia dell'input. Puoi spostarti nella cronologia dell'input utilizzando i tasti freccia SU e freccia GIÙ. La modalità a riga singola cancella la richiesta di input quando esegui gli script. Per eseguire uno script in modalità a riga singola, premi INVIO.
La modalità multiriga non cancella la richiesta di input quando esegui gli script. Quando passi alla modalità a riga singola dalla modalità multiriga, puoi cancellare la riga di input premendo CTRL+A, quindi digitando un carattere qualsiasi. Per eseguire uno script in modalità multiriga, premi CTRL+INVIO o fai clic sul simbolo della freccia nell'angolo inferiore destro della finestra.
Selezione di elementi
Puoi selezionare gli elementi DOM in tre modi diversi durante il debug di un'app:
Facendo clic sugli elementi direttamente nella finestra di DOM Explorer oppure utilizzando i tasti di direzione.
Tramite il pulsante Seleziona elemento.
Mediante il comando select, uno dei Comandi della console JavaScript.
Quando utilizzi la finestra di DOM Explorer per selezionare elementi e posizioni il puntatore del mouse su un elemento, l'elemento corrispondente viene evidenziato nel simulatore o sul dispositivo. Devi fare clic sull'elemento in DOM Explorer per selezionarlo oppure puoi usare i tasti di direzione per evidenziare e selezionare elementi. La selezione di elementi in DOM Explorer può essere fatta anche tramite il pulsante Seleziona elemento. Nella figura che segue è illustrato il pulsante Seleziona elemento.
.png "Pulsante Seleziona elemento in DOM Explorer")
Quando fai clic su Seleziona elemento, o premi CTRL+B, la modalità di selezione cambia per consentirti di selezionare un elemento in DOM Explorer facendo clic su di esso nell'app o nel simulatore. La modalità ritorna alla modalità di selezione normale dopo un singolo clic. Quando fai clic su Seleziona elemento, l'app passa in primo piano e il cursore cambia per riflettere la nuova modalità di selezione. In questo modo, quando posizioni il puntatore del mouse sugli elementi nel simulatore o sul dispositivo, sopra l'elemento appare un contorno colorato. Quando fai clic sull'elemento con contorni, DOM Explorer ritorna in primo piano con l'elemento specificato selezionato. Per un esempio che illustra come selezionare elementi mediante il pulsante Seleziona elemento, vedi Come controllare le regole CSS.
Debug di app che utilizzano componenti Windows Runtime
Quando esegui il debug di app di Windows Store utilizzando JavaScript che fanno riferimento a file WinMD C# o Visual Basic o che includono componenti Windows Runtime C++ (un file WinMD e una DLL), puoi specificare quale debugger utilizzare. Non puoi eseguire contemporaneamente il debug di codice JavaScript e codice gestito o nativo.
Puoi specificare il debugger da eseguire nella pagina delle proprietà di debug del progetto. Per ulteriori informazioni, vedi Come avviare una sessione di debug (JavaScript).
Distribuzione di app
In alcuni scenari di debug per le app di Windows Store compilate per Windows utilizzando JavaScript, potresti avere l'esigenza di distribuire l'app senza avviarla da Visual Studio. Ad esempio, le app progettate per ricevere contenuto condiviso possono essere avviate dall'interfaccia utente della condivisione. In questo caso, è necessario eseguire il debug dall'app che condivide il contenuto. Per l'app che riceve il contenuto condiviso, puoi impostare la proprietà Avvia applicazione nella pagina delle proprietà di debug del progetto su No. Per ulteriori informazioni sugli scenari di distribuzione delle app, vedi Come avviare una sessione di debug (JavaScript).
Abilitazione di eccezioni first-chance
Utilizzando eccezioni first-chance, puoi specificare che un'app deve passare alla modalità di interruzione quando rileva un'eccezione di runtime. Quando questa funzionalità è abilitata, l'app passa alla modalità di interruzione anche quando le eccezioni sono gestite. Questo consente di visualizzare alcuni errori che normalmente non risultano evidenti durante il debug. Alcune librerie fanno ampio uso di eccezioni e, quando le utilizzi, è preferibile lasciare disabilitate le eccezioni first-chance.
Per abilitare le eccezioni first-chance
In Visual Studio fai clic su Debug > Eccezioni.
Nella finestra di dialogo Eccezioni espandere il nodo JavaScript Runtime Exceptions.
Seleziona la casella di controllo Generata per tutte le eccezioni in corrispondenza delle quali il debugger dovrà sempre interrompersi, quindi scegli OK.
Supporto di browser e piattaforme
Gli strumenti di Visual Studio per JavaScript, DOM Explorer e la finestra della console JavaScript sono supportati nelle piattaforme seguenti:
App in Windows Store compilate per Windows 8 utilizzando JavaScript
Internet Explorer 10 in esecuzione in Windows 8
Per scaricare Windows 8 e Visual Studio, vai qui.
Vedere anche
Attività
Come visualizzare listener di eventi
Riferimenti
Troubleshooting Windows Runtime errors
How to handle errors with promises
Concetti
Come controllare le regole CSS
Come visualizzare e modificare il layout