Guida introduttiva: Eseguire il debug di JavaScript con la console

Si applica a Windows e Windows Phone

Puoi usare la finestra Console JavaScript per interagire con le app di Windows Store compilate con JavaScript ed eseguirne il debug. Le funzionalità sono supportate per app Windows Store e Windows Phone Store. Per informazioni di riferimento sui comandi della console, vedi Comandi della console JavaScript.

La finestra Console JavaScript ti permette di:

  • Inviare oggetti, valori e messaggi dalla tua app alla finestra della console.

  • Visualizzare e modificare i valori di variabili locali e globali nell'app in esecuzione.

  • Visualizzare visualizzatori degli oggetti.

  • Eseguire codice JavaScript all'interno dell'attuale contesto di script.

  • Visualizzare errori ed eccezioni JavaScript, oltre alle eccezioni relative a Document Object Model (DOM) e Windows Runtime.

  • Eseguire altre attività, come cancellare lo schermo. Per un elenco completo di comandi, vedi Comandi della console JavaScript.

In questo argomento:

Suggerimento Suggerimento

Se la finestra Console JavaScript è chiusa, scegli Debug > Windows > Console JavaScript per riaprirla. La finestra viene visualizzata solo durante una sessione di debug di script.

Usando la finestra Console JavaScript puoi interagire con la tua app senza arrestare e riavviare il debugger. Per altre informazioni, vedi Aggiornare un'applicazione (JavaScript). Per informazioni su altre funzionalità di debug JavaScript, come l'uso di DOM Explorer e l'impostazione di punti di interruzione, vedi Guida introduttiva: Eseguire il debug di HTML e CSS e Eseguire il debug di app dello Store in Visual Studio.

Di seguito trovi i passaggi per creare un'app FlipView e le informazioni su come eseguire un debug interattivo di un errore di codifica JavaScript.

Per eseguire il debug del codice JavaScript nell'app FlipView

  1. Crea una nuova soluzione in Visual Studio scegliendo File > Nuovo progetto.

  2. Scegli JavaScript > Applicazioni Windows Store, scegli Applicazioni Windows o Applicazioni Windows Phone e infine fai clic su Applicazione vuota.

  3. Digita un nome per il progetto, ad esempio FlipViewApp, quindi scegli OK per creare l'app.

  4. Nell'elemento BODY di default.html, sostituisci il codice HTML esistente con 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" data-win-control="WinJS.UI.FlipView" data-win-options="{
        itemDataSource: Data.items.dataSource, itemTemplate: flipTemplate }">
    </div>
    
  5. Apri il file default.css e aggiungi il codice CSS per il selettore #fView:

    #fView {
        background-color:#0094ff;
        height: 500px;
        margin: 25px;
    }
    
  6. Apri default.js e sostituisci il codice con il codice JavaScript seguente:

    (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: "http://go.microsoft.com/fwlink/?LinkID=223195" });
            pages.push(1, { flipImg: "http://go.microsoft.com/fwlink/?LinkID=223196" });
            pages.push(2, { flipImg: "http://go.microsoft.com/fwlink/?LinkID=223197" });
    
        };
    
        app.oncheckpoint = function (args) {
        };
    
        app.start();
    
        var publicMembers = {
            items: pages
        };
    
        WinJS.Namespace.define("Data", publicMembers);
    
    })();
    
  7. Se non hai ancora selezionato la destinazione di debug, scegli Simulatore o, per Windows Phone, Emulator 8.1 WVGA 4 inch 512MB nell'elenco a discesa accanto al pulsante Dispositivo sulla barra degli strumenti Debug:

    Selezionare l'elenco di destinazione del debug
  8. Premi F5 per avviare il debugger.

    L'app viene eseguita, ma mancano le immagini. Gli errori APPHOST della finestra della console JavaScript indicano che mancano le immagini.

  9. Con l'app FlipView in esecuzione nel simulatore o nell'emulatore Windows Phone, digita Data.items nella richiesta di input della finestra della console (accanto al simbolo">>") 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 corrente. Nella finestra della console puoi fare clic sui nodi di un oggetto per visualizzare i valori delle proprietà oppure puoi usare i tasti di direzione. Come puoi vedere nella figura, se fai clic sull'oggetto items._data, i riferimenti relativi all'origine delle immagini non sono corretti, come previsto. Le immagini predefinite (logo.png) sono ancora presenti nell'oggetto e vi sono immagini mancanti frammiste alle immagini previste.

    Finestra della console JavaScript

    Noterai anche che nell'oggetto items._data sono presenti molti più elementi del previsto.

  10. Al prompt digita Data.items.push e premi INVIO. Nella finestra della console viene visualizzato un visualizzatore per la funzione push, implementata in un file di progetto di Libreria Windows per JavaScript (WinJS). Nell'app usiamo push per aggiungere gli elementi corretti. Con una piccola ricerca tramite IntelliSense, scopriamo che dovremmo usare setAt per sostituire le immagini predefinite.

  11. Per risolvere il problema in modo interattivo, senza arrestare la sessione di debug, apri il file default.js e seleziona questo codice dalla funzione updateImages:

    pages.push(0, { flipImg: "http://go.microsoft.com/fwlink/?LinkID=223195" });
    pages.push(1, { flipImg: "http://go.microsoft.com/fwlink/?LinkID=223196" });
    pages.push(2, { flipImg: "http://go.microsoft.com/fwlink/?LinkID=223197" });
    

    Copia e incolla il codice nella richiesta di input della console JavaScript.

    SuggerimentoSuggerimento

    Quando incolli più righe di codice nella richiesta di input della finestra 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 oppure scegli il simbolo della freccia nell'angolo inferiore destro della finestra. Per altre informazioni, vedi Modalità a riga singola e modalità multiriga.

  12. Correggi le chiamate di funzione push nella richiesta, sostituendo pages.push con Data.items.setAt. Il codice corretto dovrebbe essere analogo al seguente:

    Data.items.setAt(0, { flipImg: "http://go.microsoft.com/fwlink/?LinkID=223195" });
    Data.items.setAt(1, { flipImg: "http://go.microsoft.com/fwlink/?LinkID=223196" });
    Data.items.setAt(2, { flipImg: "http://go.microsoft.com/fwlink/?LinkID=223197" });
    
    SuggerimentoSuggerimento

    Se vuoi usare l'oggetto pages al posto di Data.items, devi impostare un punto di interruzione nel codice per mantenere l'oggetto pages nell'ambito.

  13. Scegli il simbolo della freccia verde per eseguire lo script.

  14. Premi CTRL+ALT+M per passare dalla richiesta di input della console alla modalità a riga singola, quindi scegli Cancella input ("X" rossa) per eliminare il codice dalla richiesta di input.

  15. Al prompt digita Data.items.length = 3 e premi INVIO. Ciò elimina gli elementi estranei dai dati.

  16. Controlla di nuovo il simulatore o l'emulatore Windows Phone. Noterai che le immagini corrette sono contenute nelle pagine corrette di FlipView.

  17. In DOM Explorer puoi visualizzare l'elemento DIV aggiornato e spostarti nel sottoalbero per individuare gli elementi IMG previsti.

  18. Arresta il debug scegliendo Debug > Arresta debug o premendo MAIUSC+F5 e poi correggi il codice sorgente.

    Per la pagina default.html completa contenente il codice di esempio corretto, vedi Debug del codice di esempio HTML, CSS e JavaScript.

Quando utilizzi gli strumenti di debug JavaScript, come la finestra della console JavaScript, puoi usare 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 usare la finestra Console JavaScript per eseguire script e comandi validi nell'attuale contesto di esecuzione di script. In questa procedura userai la versione corretta dell'app FlipView che hai creato in una procedura precedente per illustrare l'uso della modalità di interruzione.

Per impostare un punto di interruzione ed eseguire il debug dell'app

  1. Nel file default.html dell'app FlipView che hai creato prima apri il menu di scelta rapida per la funzione updateImages() e poi scegli Punto di interruzione > Inserisci punto di interruzione.

  2. Seleziona Computer locale o Emulator 8.1 WVGA 4 inch 512MB nell'elenco a discesa accanto al pulsante Avvia debug sulla barra degli strumenti Debug.

  3. Scegli 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.

    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.

  4. Al prompt digita updateImages e premi INVIO. Nella finestra della console apparirà un visualizzatore per la funzione.

  5. Seleziona la funzione nella finestra della console per visualizzare l'implementazione di tale funzione.

    La figura seguente mostra la finestra della console in questa fase.

    Finestra della console JavaScript con un visualizzatore
  6. Copia una riga della funzione dalla finestra di output alla richiesta di input e modifica il valore di indice in 3:

    pages.setAt(3, { flipImg: "http://go.microsoft.com/fwlink/?LinkID=223197" });
    
  7. Premi INVIO per eseguire la riga di codice.

    Se vuoi eseguire il codice riga per riga, premi F11 oppure premi F5 per continuare l'esecuzione del programma.

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

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 interattivo riportata in questo argomento rappresenta un 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 usando 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 Cancella input (la "X" rossa). Per eseguire uno script in modalità multiriga, premi CTRL+INVIO oppure scegli il simbolo della freccia nell'angolo inferiore destro della finestra.

Dalla finestra Console JavaScript puoi interagire con un singolo contesto di esecuzione, che rappresenta una singola istanza dell'host della piattaforma Web (WWAHost.exe), per volta. In alcuni scenari la tua app potrebbe avviare un'altra istanza dell'host, ad esempio quando usi un iframe, un contratto di condivisione, un lavoro Web o un controllo WebView. Se viene eseguita un'altra istanza dell'host, durante l'esecuzione dell'app puoi selezionare un contesto di esecuzione diverso nell'elenco Destinazione.

La figura seguente mostra l'elenco Destinazione nella finestra Console JavaScript.

Selezione della destinazione nella finestra della console JavaScript

Puoi anche cambiare il contesto di esecuzione usando il comando cd, ma devi ricordare il nome dell'altro contesto di esecuzione e il riferimento che usi deve essere incluso nell'ambito. L'elenco Destinazione offre un accesso migliore ad altri contesti di esecuzione.

Ecco le piattaforme che supportano la finestra Console JavaScript:

  • App di Windows Store e Windows Phone Store scritte in JavaScript e HTML

  • Internet Explorer 11 in esecuzione in Windows 8.1

  • Internet Explorer 10 in esecuzione in Windows 8

Mostra:
© 2015 Microsoft