Debug di script client

  • 3 minuti

Pressoché tutti i browser moderni dispongono di un'estensione di debug che supporta l'acquisizione del traffico di rete, l'analisi del contenuto della pagina e il debug di script client. I seguenti set di strumenti sono utili per eseguire operazioni di debug:

  • Microsoft Edge (tramite Strumenti di sviluppo F12). Per altre informazioni, vedere la Guida all'uso degli strumenti di sviluppo F12.

  • Google Chrome (tramite Strumenti di sviluppo visualizzati mediante F12)

  • Mozilla Firefox (tramite Firebug)

  • Apple Safari (tramite Web Inspector)

Visualizzazione delle risorse di script

Quando si carica la pagina del modulo dell'app basata su modello, insieme alla pagina Web si caricano tutte le librerie di script client come singole risorse di script. Dato il volume di risorse di script necessarie per eseguire un'app basata su modello, può essere difficile individuare un file su cui eseguire il debug. Quando si usano strumenti di debug come Microsoft Edge, è in genere consigliabile annotare il nome file e usare le funzionalità di ricerca dello strumento per individuare i file script.

Scrittura di messaggi sulla console

Il metodo window.alert quando si esegue il debug di problemi di JavaScript o l'istruzione debugger per interrompere l'esecuzione sono ancora frequentemente impiegati per la risoluzione dei problemi del codice nell'applicazione. Non si tratta tuttavia di una procedura consigliata ora che tutti i browser moderni forniscono un facile accesso agli strumenti di debug, poiché altri utenti potrebbero usare l'applicazione di cui si sta eseguendo il debug. Queste chiamate di debug vengono spesso lasciate inavvertitamente nel codice causando problemi per gli utenti dell'app in produzione.

Valutare invece la possibilità di scrivere i messaggi sulla console. Di seguito è riportata una piccola funzione che è possibile aggiungere alle librerie per inviare tutti i messaggi che si desidera visualizzare sulla console quando è aperta.

function writeToConsole(message)
{
 if (typeof console != 'undefined') {
  console.log(message);
 }
}

A differenze del metodo di avviso, se si dimentica di rimuovere il codice che usa questa funzione, le persone che usano questa applicazione non vedono i messaggi. È anche utile per risolvere i problemi relativi al comportamento dell'applicazione in produzione senza interrompere gli utenti dell'app.

Uso di Fiddler Auto-Responder per sostituire il contenuto delle risorse Web

Una costante modifica delle risorse Web quando sono in fase di sviluppo può creare difficoltà e rivelarsi dispendiosa in termini di tempo. È necessario ripubblicare i file all'interno di una soluzione dopo ogni modifica e assicurarsi di svuotare la cache del browser della versione precedente delle risorse. Inoltre, se l'ambiente è condiviso da più sviluppatori, gli altri possono incontrare problemi.

Per migliorare l'efficienza, considerare l'uso di uno strumento come Auto-Responder in Telerik Fiddler per sostituire il contenuto di una risorsa Web con quello di un file locale, anziché caricarlo e ripubblicarlo ogni volta. È possibile prendere in considerazione diversi altri strumenti di terze parti che supportano anche l'editing live. Per altre informazioni su come installare e configurare Fiddler Auto-Responder, consultare Sviluppo delle risorse Web script mediante Fiddler Auto-Responder.