Informazioni sulle funzionalità di debug di ASP.NET AJAX

di Scott Cate

La possibilità di eseguire il debug del codice è una competenza che ogni sviluppatore deve avere nell'arsenale indipendentemente dalla tecnologia usata. Anche se molti sviluppatori sono abituati a usare Visual Studio .NET o Web Developer Express per eseguire il debug di applicazioni ASP.NET che usano VB.NET o codice C#, alcuni non sono consapevoli che è anche estremamente utile per il debug del codice lato client, ad esempio JavaScript. Lo stesso tipo di tecniche usate per eseguire il debug di applicazioni .NET può essere applicato anche alle applicazioni abilitate per AJAX e in modo più specifico ASP.NET applicazioni AJAX.

Debug di applicazioni ASP.NET AJAX

Dan Wahlin

La possibilità di eseguire il debug del codice è una competenza che ogni sviluppatore deve avere nell'arsenale indipendentemente dalla tecnologia usata. Va senza dire che la comprensione delle diverse opzioni di debug disponibili può risparmiare un enorme tempo su un progetto e forse anche alcuni mal di testa. Anche se molti sviluppatori sono abituati a usare Visual Studio .NET o Web Developer Express per eseguire il debug di applicazioni ASP.NET che usano VB.NET o codice C#, alcuni non sono consapevoli che è anche estremamente utile per il debug del codice lato client, ad esempio JavaScript. Lo stesso tipo di tecniche usate per eseguire il debug di applicazioni .NET può essere applicato anche alle applicazioni abilitate per AJAX e in modo più specifico ASP.NET applicazioni AJAX.

In questo articolo si vedrà come Visual Studio 2008 e diversi altri strumenti possono essere usati per eseguire il debug di applicazioni ASP.NET AJAX per individuare rapidamente bug e altri problemi. Questa discussione includerà informazioni sull'abilitazione di Internet Explorer 6 o versioni successive per il debug, usando Visual Studio 2008 e Esplora script per eseguire il passaggio del codice e l'uso di altri strumenti gratuiti, ad esempio Guida per lo sviluppo Web. Si apprenderà anche come eseguire il debug ASP.NET applicazioni AJAX in Firefox usando un'estensione denominata Firebug che consente di eseguire il passaggio del codice JavaScript direttamente nel browser senza altri strumenti. Infine, verranno introdotte le classi nella ASP.NET libreria AJAX che può essere utile per varie attività di debug, ad esempio istruzioni di traccia e asserzione del codice.

Prima di provare a eseguire il debug di pagine visualizzate in Internet Explorer, è necessario eseguire alcuni passaggi di base per abilitarlo per il debug. Esaminiamo alcuni requisiti di configurazione di base che devono essere eseguiti per iniziare.

Configurazione di Internet Explorer per il debug

La maggior parte delle persone non è interessato a visualizzare i problemi javaScript rilevati in un sito Web visualizzato con Internet Explorer. Infatti, l'utente medio non sa nemmeno cosa fare se ha visualizzato un messaggio di errore. Di conseguenza, le opzioni di debug vengono disattivate per impostazione predefinita nel browser. Tuttavia, è molto semplice attivare il debug e metterlo in uso durante lo sviluppo di nuove applicazioni AJAX.

Per abilitare la funzionalità di debug, passare a Strumenti opzioni Internet nel menu Internet Explorer e selezionare la scheda Avanzate. Nella sezione Esplorazione assicurarsi che gli elementi seguenti siano deselezionati:

• Disabilitare il debug di script (Internet Explorer)
• Disabilitare il debug dello script (Altro)

Anche se non è necessario, se si sta tentando di eseguire il debug di un'applicazione, è probabile che eventuali errori JavaScript nella pagina siano immediatamente visibili e ovvi. È possibile forzare tutti gli errori da visualizzare con una casella di messaggio selezionando la casella di controllo "Visualizza una notifica su ogni errore di script". Anche se si tratta di un'ottima opzione per attivare durante lo sviluppo di un'applicazione, può diventare rapidamente fastidioso se si sta solo perusando altri siti Web perché le probabilità di riscontrare errori JavaScript sono abbastanza buone.

Nella figura 1 viene illustrato il modo in cui la finestra di dialogo avanzata di Internet Explorer deve essere eseguita correttamente per il debug.

Figura 1: Configurazione di Internet Explorer per il debug. (Fare clic per visualizzare l'immagine full-size)

Dopo aver attivato il debug, verrà visualizzata una nuova voce di menu nel menu Visualizza denominato Debugger script. Sono disponibili due opzioni, tra cui Open e Break in Next Statement. Quando Si seleziona Apri viene richiesto di eseguire il debug della pagina in Visual Studio 2008 (si noti che Visual Web Developer Express può essere usato anche per il debug). Se Visual Studio .NET è attualmente in esecuzione, è possibile scegliere di usare tale istanza o di creare una nuova istanza. Quando l'istruzione Break at Next viene selezionata, verrà richiesto di eseguire il debug della pagina quando viene eseguito il codice JavaScript. Se il codice JavaScript viene eseguito nell'evento onLoad della pagina, è possibile aggiornare la pagina per attivare una sessione di debug. Se il codice JavaScript viene eseguito dopo che viene fatto clic su un pulsante, il debugger verrà eseguito immediatamente dopo il clic del pulsante.

Nota

Se si esegue in Windows Vista con l'utente abilitato Controllo di accesso (UAC) e si dispone di Visual Studio 2008 impostato per l'esecuzione come amministratore, Visual Studio non verrà collegato al processo quando viene richiesto di allegare. Per risolvere questo problema, avviare Prima Visual Studio e usare tale istanza per eseguire il debug.

Anche se la sezione successiva illustra come eseguire il debug di una pagina ASP.NET AJAX direttamente dall'interno di Visual Studio 2008, l'uso dell'opzione Debugger script di Internet Explorer è utile quando una pagina è già aperta e si vuole esaminarla più completamente.

Debug con Visual Studio 2008

Visual Studio 2008 offre funzionalità di debug che gli sviluppatori di tutto il mondo si basano su tutti i giorni per eseguire il debug delle applicazioni .NET. Il debugger predefinito consente di eseguire il passaggio del codice, visualizzare i dati dell'oggetto, watch per variabili specifiche, monitorare lo stack di chiamate e molto altro ancora. Oltre al debug del codice VB.NET o C#, il debugger è utile anche per il debug ASP.NET applicazioni AJAX e consente di passare attraverso la riga di codice JavaScript. I dettagli che seguono le tecniche che possono essere usate per eseguire il debug dei file di script lato client anziché fornire un discorso sul processo complessivo delle applicazioni di debug usando Visual Studio 2008.

Il processo di debug di una pagina in Visual Studio 2008 può essere avviato in diversi modi. Prima di tutto, è possibile usare l'opzione Debugger script di Internet Explorer menzionata nella sezione precedente. Questo funziona bene quando una pagina è già caricata nel browser e si vuole avviare il debug. In alternativa, è possibile fare clic con il pulsante destro del mouse su una pagina aspx nella Esplora soluzioni e scegliere Imposta come pagina iniziale dal menu. Se si è abituati a eseguire il debug di pagine ASP.NET, è probabile che sia stato fatto prima. Dopo aver premuto F5, è possibile eseguire il debug della pagina. Tuttavia, anche se in genere è possibile impostare un punto di interruzione ovunque si desidera nel codice VB.NET o C#, questo non è sempre il caso con JavaScript come verrà visualizzato di seguito.

Script incorporati e esterni

Il debugger di Visual Studio 2008 tratta JavaScript incorporato in una pagina diversa dai file JavaScript esterni. Con i file di script esterni, è possibile aprire il file e impostare un punto di interruzione in qualsiasi riga scelta. I punti di interruzione possono essere impostati facendo clic sull'area della barra grigia a sinistra della finestra dell'editor di codice. Quando JavaScript è incorporato direttamente in una pagina usando il tag, l'impostazione di un punto di interruzione facendo clic nell'area <script> della barra grigia non è un'opzione. I tentativi di impostare un punto di interruzione su una riga dello script incorporato generano un avviso che indica che "Non è una posizione valida per un punto di interruzione".

È possibile risolvere questo problema spostando il codice in un file esterno .js e facendo riferimento a questo problema usando l'attributo <src del tag di script> :

<script type="text/javascript" src="Scripts/YourScript.js"></script>

Cosa accade se lo spostamento del codice in un file esterno non è un'opzione o richiede più lavoro che vale la pena? Anche se non è possibile impostare un punto di interruzione usando l'editor, è possibile aggiungere l'istruzione debugger direttamente nel codice in cui si vuole avviare il debug. È anche possibile usare la classe Sys.Debug disponibile nella libreria AJAX ASP.NET per forzare l'avvio del debug. Altre informazioni sulla classe Sys.Debug verranno fornite più avanti in questo articolo.

Un esempio di uso della debugger parola chiave viene visualizzato in Elenco 1. In questo esempio il debugger viene interrotto prima che venga eseguita una chiamata a una funzione di aggiornamento.

Elenco 1. Uso della parola chiave debugger per forzare l'interruzione del debugger .NET di Visual Studio.

function BuildPerson()
{
 var person =
 {
 FirstName: $get("txtFirstName").value,
 LastName: $get("txtLastName").value,
 Address:
 {
 Street: $get("txtStreet").value,
 City: $get("txtCity").value,
 State: $get("txtState").value
 }
 };
 debugger;
 UpdatePerson(person);
}

Dopo aver raggiunto l'istruzione debugger, verrà richiesto di eseguire il debug della pagina usando Visual Studio .NET e iniziare a eseguire l'esecuzione del codice. Durante questa operazione, è possibile che si verifichi un problema durante l ASP.NET'accesso ai file di script della libreria AJAX usati nella pagina, quindi si esaminerà l'uso di Visual Studio . Esplora script di NET.

Uso di Windows .NET di Visual Studio per il debug

Dopo aver avviato una sessione di debug e iniziare a seguire il codice usando la chiave F11 predefinita, è possibile che venga visualizzata la finestra di dialogo di errore visualizzata nella figura 2, a meno che tutti i file di script usati nella pagina siano aperti e disponibili per il debug.

Figura 2: Finestra di dialogo di errore visualizzata quando non è disponibile codice sorgente per il debug. (Fare clic per visualizzare l'immagine full-size)

Questa finestra di dialogo viene visualizzata perché Visual Studio .NET non è sicuro come ottenere il codice sorgente di alcuni degli script a cui fa riferimento la pagina. Anche se questo può essere abbastanza frustrante per primo, c'è una semplice correzione. Dopo aver avviato una sessione di debug e aver raggiunto un punto di interruzione, passare alla finestra Debug di Esplora script di Windows nel menu Visual Studio 2008 o usare il tasto di scelta rapida CTRL+ALT+N.

Nota

Se non è possibilevisualizzareil menu Esplora script elencato, passare a Strumenti> Personalizza >comandi nel menu .NET di Visual Studio. Individuare la voce Debug nella sezione Categorie e fare clic su di essa per visualizzare tutte le voci di menu disponibili. Nell'elenco Comandi scorrere verso il basso in Esplora script e quindi trascinarlo nel menu Debug di Windows in precedenza. A questo scopo, la voce di menu Esplora script sarà disponibile ogni volta che si esegue Visual Studio .NET.

Esplora script può essere usato per visualizzare tutti gli script usati in una pagina e aprirli nell'editor di codice. Dopo l'apertura di Esplora script, fare doppio clic sulla pagina aspx attualmente in fase di debug per aprirla nella finestra dell'editor di codice. Eseguire la stessa azione per tutti gli altri script visualizzati in Esplora script. Dopo aver aperto tutti gli script nella finestra del codice, è possibile premere F11 (e usare gli altri tasti di scelta rapida di debug) per eseguire il codice. La figura 3 mostra un esempio di Esplora script. Elenca il file corrente sottoposto a debug (Demo.aspx) e due script personalizzati e due script inseriti dinamicamente nella pagina dal ASP.NET AJAX ScriptManager.

Figura 3. Esplora script consente di accedere facilmente agli script usati in una pagina. (Fare clic per visualizzare l'immagine full-size)

È anche possibile usare diverse finestre per fornire informazioni utili durante il passaggio del codice in una pagina. Ad esempio, è possibile usare la finestra Variabili locali per visualizzare i valori di variabili diverse usate nella pagina, la finestra Immediata per valutare variabili o condizioni specifiche e visualizzare l'output. È anche possibile usare la finestra Output per visualizzare le istruzioni di traccia scritte usando la funzione Sys.Debug.trace (che verrà illustrata più avanti in questo articolo) o la funzione Debug.writeln di Internet Explorer.

Quando si esegue il codice usando il debugger, è possibile passare il mouse sulle variabili nel codice per visualizzare il valore assegnato. Tuttavia, il debugger di script occasionalmente non mostrerà nulla mentre si passa il mouse su una determinata variabile JavaScript. Per visualizzare il valore, evidenziare l'istruzione o la variabile che si sta tentando di visualizzare nella finestra dell'editor di codice e quindi passare il mouse su di esso. Anche se questa tecnica non funziona in ogni situazione, molte volte sarà possibile visualizzare il valore senza dover cercare in una finestra di debug diversa, ad esempio la finestra Variabili locali.

Un'esercitazione video che illustra alcune delle funzionalità descritte qui può essere visualizzata all'indirizzo http://www.xmlforasp.net.

Debug con l'helper di sviluppo Web

Anche se Visual Studio 2008 (e Visual Web Developer Express 2008) sono strumenti di debug molto capaci, sono disponibili opzioni aggiuntive che possono essere usate anche più leggere. Uno degli strumenti più recenti da rilasciare è l'helper di sviluppo Web. Nikhil Kothari di Microsoft (uno dei ASP.NET principali architetti AJAX di Microsoft) ha scritto questo eccellente strumento che può eseguire molte attività diverse, dal debug semplice alla visualizzazione di messaggi di richiesta e risposta HTTP.

L'helper per lo sviluppo Web può essere usato direttamente all'interno di Internet Explorer, che lo rende comodo da usare. Viene avviato selezionando Strumenti Helper sviluppo Web dal menu di Internet Explorer. Verrà aperto lo strumento nella parte inferiore del browser, che è bello perché non è necessario lasciare il browser per eseguire diverse attività, ad esempio la registrazione di richieste HTTP e messaggi di risposta. La figura 4 mostra l'aspetto dell'helper di sviluppo Web in azione.

Figura 4: Web Development Helper (Fare clic per visualizzare l'immagine a dimensione intera)

L'helper sviluppo Web non è uno strumento che verrà usato per eseguire la riga di codice in base alla riga di codice come con Visual Studio 2008. Può tuttavia essere usato per visualizzare l'output di traccia, valutare facilmente le variabili in uno script o esplorare i dati all'interno di un oggetto JSON. È anche molto utile per visualizzare i dati passati da e verso una pagina ASP.NET AJAX e un server.

Quando l'helper sviluppo Web è aperto in Internet Explorer, è necessario abilitare il debug di script selezionando Script Enable Script Debugging (Abilita debug script) dal menu helper Sviluppo Web, come illustrato in precedenza nella figura 4. Ciò consente allo strumento di intercettare gli errori che si verificano durante l'esecuzione di una pagina. Consente inoltre di accedere facilmente ai messaggi di traccia che vengono restituiti nella pagina. Per visualizzare le informazioni di traccia o eseguire comandi script per testare funzioni diverse all'interno di una pagina, selezionare Script Show Script Console (Mostra console script) dal menu Helper Sviluppo Web. In questo modo è possibile accedere a una finestra di comando e a una finestra immediata semplice.

Visualizzazione dei messaggi di traccia e dei dati degli oggetti JSON

La finestra immediata può essere usata per eseguire comandi script o anche caricare o salvare script usati per testare funzioni diverse in una pagina. Nella finestra di comando vengono visualizzati messaggi di traccia o debug scritti dalla pagina visualizzata. L'elenco 2 mostra come scrivere un messaggio di traccia usando la funzione Debug.writeln di Internet Explorer.

Elenco 2. Scrittura di un messaggio di traccia sul lato client usando la classe Debug.

function BuildPerson()
{
 var person =
 {
 FirstName: $get("txtFirstName").value,
 LastName: $get("txtLastName").value,
 Address:
 {
 Street: $get("txtStreet").value,
 City: $get("txtCity").value,
 State: $get("txtState").value
 }
 };
 Debug.writeln("Person name: " + person.LastName);
 UpdatePerson(person);
}

Se la proprietà LastName contiene un valore Doe, l'helper sviluppo Web visualizzerà il messaggio "Person name: Doe" nella finestra di comando della console di script (presupponendo che il debug sia stato abilitato). Web Development Helper aggiunge anche un oggetto debugService di primo livello in pagine che possono essere usate per scrivere informazioni di traccia o visualizzare il contenuto degli oggetti JSON. L'elenco 3 mostra un esempio di utilizzo della funzione di traccia della classe debugService.

Elenco 3. Uso della classe debugService di Web Development Helper per scrivere un messaggio di traccia.

function BuildPerson()
{
 var person =
 {
 FirstName: $get("txtFirstName").value,
 LastName: $get("txtLastName").value,
 Address:
 {
 Street: $get("txtStreet").value,
 City: $get("txtCity").value,
 State: $get("txtState").value
 }
 };
 if (window.debugService)
 {
 window.debugService.trace("Person name: " + person.LastName);
 }
 UpdatePerson(person);
}

Una caratteristica interessante della classe debugService è che funzionerà anche se il debug non è abilitato in Internet Explorer, semplificando sempre l'accesso ai dati di traccia quando è in esecuzione l'helper di sviluppo Web. Quando lo strumento non viene usato per eseguire il debug di una pagina, le istruzioni di traccia verranno ignorate perché la chiamata a window.debugService restituirà false.

La classe debugService consente inoltre di visualizzare i dati degli oggetti JSON usando la finestra di controllo dell'helper di sviluppo Web. L'elenco 4 crea un semplice oggetto JSON contenente i dati delle persone. Dopo aver creato l'oggetto, viene effettuata una chiamata alla funzione inspect della classe debugService per consentire l'ispezione visiva dell'oggetto JSON.

Elenco 4. Uso della funzione debugService.inspect per visualizzare i dati dell'oggetto JSON.

function BuildPerson()
{
 var person =
 {
 FirstName: $get("txtFirstName").value,
 LastName: $get("txtLastName").value,
 Address:
 {
 Street: $get("txtStreet").value,
 City: $get("txtCity").value,
 State: $get("txtState").value
 }
 };
 if (window.debugService)
 {
 window.debugService.inspect("Person Object",person);
 }
 UpdatePerson(person);
}

La chiamata alla funzione GetPerson() nella pagina o nella finestra immediata comporterà la visualizzazione della finestra di dialogo Controllo oggetti, come illustrato nella figura 5. Le proprietà all'interno dell'oggetto possono essere modificate in modo dinamico evidenziandole, modificando il valore visualizzato nella casella di testo Valore e quindi facendo clic sul collegamento Aggiorna. L'uso di Object Inspector semplifica la visualizzazione dei dati degli oggetti JSON e l'applicazione di valori diversi alle proprietà.

Errori di debug

Oltre a consentire la visualizzazione dei dati di traccia e degli oggetti JSON, l'helper Sviluppo Web può essere utile anche per il debug degli errori in una pagina. Se si verifica un errore, verrà richiesto di continuare con la riga di codice successiva o di eseguire il debug dello script (vedere la figura 6). La finestra di dialogo Errore script mostra lo stack di chiamate completo e i numeri di riga in modo da poter identificare facilmente dove si trovano i problemi all'interno di uno script.

Figura 5: Utilizzo della finestra Controllo oggetti per visualizzare un oggetto JSON. (Fare clic per visualizzare l'immagine a dimensione intera)

La selezione dell'opzione di debug consente di eseguire istruzioni script direttamente nella finestra immediata dell'helper di sviluppo Web per visualizzare il valore delle variabili, scrivere oggetti JSON e altro ancora. Se la stessa azione che ha attivato l'errore viene eseguita di nuovo e Visual Studio 2008 è disponibile nel computer, verrà richiesto di avviare una sessione di debug in modo che sia possibile scorrere la riga di codice per riga, come illustrato nella sezione precedente.

Figura 6: Finestra di dialogo di errore dello script dell'helper sviluppo Web (fare clic per visualizzare l'immagine a dimensione intera)

Controllo dei messaggi di richiesta e risposta

Durante il debug ASP.NET pagine AJAX è spesso utile visualizzare i messaggi di richiesta e risposta inviati tra una pagina e un server. La visualizzazione del contenuto all'interno dei messaggi consente di verificare se i dati appropriati vengono passati e le dimensioni dei messaggi. L'helper sviluppo Web offre un'eccellente funzionalità di logger di messaggi HTTP che semplifica la visualizzazione dei dati come testo non elaborato o in un formato più leggibile.

Per visualizzare ASP.NET messaggi di richiesta e risposta AJAX, il logger HTTP deve essere abilitato selezionando HTTP Abilita registrazione HTTP dal menu Helper sviluppo Web. Dopo l'abilitazione, tutti i messaggi inviati dalla pagina corrente possono essere visualizzati nel visualizzatore log HTTP a cui è possibile accedere selezionando HTTP Mostra log HTTP.

Anche se la visualizzazione del testo non elaborato inviato in ogni messaggio di richiesta/risposta è certamente utile (e un'opzione nell'helper di sviluppo Web), spesso è più facile visualizzare i dati dei messaggi in un formato più grafico. Dopo aver abilitato la registrazione HTTP e aver registrato i messaggi, è possibile visualizzare i dati dei messaggi facendo doppio clic sul messaggio nel visualizzatore log HTTP. In questo modo è possibile visualizzare tutte le intestazioni associate a un messaggio e il contenuto effettivo del messaggio. La figura 7 mostra un esempio di messaggio di richiesta e messaggio di risposta visualizzato nella finestra Visualizzatore log HTTP.

Figura 7: Uso del Visualizzatore log HTTP per visualizzare i dati dei messaggi di richiesta e risposta. (Fare clic per visualizzare l'immagine a dimensione intera)

Il Visualizzatore log HTTP analizza automaticamente gli oggetti JSON e li visualizza usando una visualizzazione albero che semplifica la visualizzazione dei dati delle proprietà dell'oggetto. Quando si usa UpdatePanel in una pagina ASP.NET AJAX, il visualizzatore suddivide ogni parte del messaggio in singole parti, come illustrato nella figura 8. Si tratta di un'ottima funzionalità che semplifica notevolmente la visualizzazione e la comprensione di ciò che si trova nel messaggio rispetto alla visualizzazione dei dati dei messaggi non elaborati.

Figura 8: Messaggio di risposta UpdatePanel visualizzato usando il Visualizzatore log HTTP. (Fare clic per visualizzare l'immagine a dimensione intera)

Sono disponibili diversi altri strumenti che possono essere usati per visualizzare i messaggi di richiesta e risposta oltre all'helper di sviluppo Web. Un'altra buona opzione è Fiddler, disponibile gratuitamente all'indirizzo http://www.fiddlertool.com. Anche se Fiddler non verrà discusso qui, è anche una buona opzione quando è necessario esaminare accuratamente intestazioni e dati dei messaggi.

Debug con Firefox e Firebug

Anche se Internet Explorer è ancora il browser più utilizzato, altri browser come Firefox sono diventati molto popolari e vengono usati sempre di più. Di conseguenza, è necessario visualizzare ed eseguire il debug delle pagine ASP.NET AJAX in Firefox e Internet Explorer per assicurarsi che le applicazioni funzionino correttamente. Anche se Firefox non può collegarsi direttamente a Visual Studio 2008 per il debug, ha un'estensione denominata Firebug che può essere usata per eseguire il debug delle pagine. Firebug può essere scaricato gratuitamente passando a http://www.getfirebug.com.

Firebug offre un ambiente di debug completo che può essere usato per scorrere la riga di codice per riga, accedere a tutti gli script usati all'interno di una pagina, visualizzare strutture DOM, visualizzare gli stili CSS e persino tenere traccia degli eventi che si verificano in una pagina. Dopo l'installazione, è possibile accedere a Firebug selezionando Strumenti Firebug Apri Firebug dal menu Firefox. Come l'helper per lo sviluppo Web, Firebug viene usato direttamente nel browser, anche se può essere usato anche come applicazione autonoma.

Quando Firebug è in esecuzione, i punti di interruzione possono essere impostati in qualsiasi riga di un file JavaScript indipendentemente dal fatto che lo script sia incorporato in una pagina o meno. Per impostare un punto di interruzione, caricare prima di tutto la pagina appropriata di cui eseguire il debug in Firefox. Dopo aver caricato la pagina, selezionare lo script di cui eseguire il debug dall'elenco a discesa Script di Firebug. Verranno visualizzati tutti gli script usati dalla pagina. Un punto di interruzione viene impostato facendo clic nell'area grigia di Firebug nella riga in cui deve essere inserito il punto di interruzione come si farebbe in Visual Studio 2008.

Dopo aver impostato un punto di interruzione in Firebug, è possibile eseguire l'azione necessaria per eseguire lo script che deve essere sottoposto a debug, ad esempio facendo clic su un pulsante o aggiornando il browser per attivare l'evento onLoad. L'esecuzione verrà arrestata automaticamente nella riga contenente il punto di interruzione. La figura 9 mostra un esempio di punto di interruzione attivato in Firebug.

Figura 9: Gestione dei punti di interruzione in Firebug. (Fare clic per visualizzare l'immagine a dimensione intera)

Una volta raggiunto un punto di interruzione, è possibile eseguire l'istruzione, eseguire o uscire dal codice usando i pulsanti freccia. Durante l'esecuzione del codice, le variabili di script vengono visualizzate nella parte destra del debugger che consente di visualizzare i valori e il drill-down negli oggetti. Firebug include anche un elenco a discesa Stack di chiamate per visualizzare i passaggi di esecuzione dello script che hanno portato fino alla riga corrente sottoposta a debug.

Firebug include anche una finestra della console che può essere usata per testare istruzioni script diverse, valutare le variabili e visualizzare l'output di traccia. È accessibile facendo clic sulla scheda Console nella parte superiore della finestra Firebug. La pagina sottoposta a debug può anche essere "ispezionata" per visualizzarne la struttura e il contenuto DOM facendo clic sulla scheda Ispeziona. Quando si passa il mouse sui diversi elementi DOM visualizzati nella finestra di controllo, la parte appropriata della pagina verrà evidenziata, rendendo più semplice vedere dove viene usato l'elemento nella pagina. I valori degli attributi associati a un determinato elemento possono essere modificati "live" per sperimentare l'applicazione di larghezze, stili e così via diversi. a un elemento . Si tratta di una funzionalità interessante che consente di evitare di dover passare costantemente tra l'editor del codice sorgente e il browser Firefox per visualizzare il modo in cui le modifiche semplici influiscono su una pagina.

Nella figura 10 viene illustrato un esempio di utilizzo del controllo DOM per individuare una casella di testo denominata txtCountry nella pagina. Il controllo Firebug può essere usato anche per visualizzare gli stili CSS usati in una pagina, nonché gli eventi che si verificano, ad esempio il rilevamento dei movimenti del mouse, i clic dei pulsanti e altro ancora.

Figura 10: Uso del controllo DOM di Firebug. (Fare clic per visualizzare l'immagine a dimensione intera)

Firebug offre un modo leggero per eseguire rapidamente il debug di una pagina direttamente in Firefox, nonché uno strumento eccellente per esaminare diversi elementi all'interno della pagina.

Supporto per il debug in ASP.NET AJAX

La libreria ASP.NET AJAX include molte classi diverse che possono essere usate per semplificare il processo di aggiunta di funzionalità AJAX in una pagina Web. È possibile usare queste classi per individuare gli elementi all'interno di una pagina e modificarli, aggiungere nuovi controlli, chiamare Servizi Web e persino gestire gli eventi. La libreria ASP.NET AJAX contiene anche classi che possono essere usate per migliorare il processo di debug delle pagine. In questa sezione verrà introdotta la classe Sys.Debug e si vedrà come può essere usata nelle applicazioni.

Uso della classe Sys.Debug

La classe Sys.Debug (classe JavaScript che si trova nello spazio dei nomi Sys) può essere usata per eseguire diverse funzioni, tra cui la scrittura dell'output di traccia, l'esecuzione di asserzioni di codice e l'imposizione dell'esito negativo del codice in modo che possa essere sottoposto a debug. Viene usato ampiamente nei file di debug della libreria ASP.NET AJAX (installati in C:\Programmi\Microsoft ASP.NET\ASP.NET 2.0 AJAX Extensions\v1.0.61025\MicrosoftAjaxLibrary\System.Web.Extensions\1.0.61025.0 per impostazione predefinita) per eseguire test condizionali (denominati asserzioni) che assicurano che i parametri vengano passati correttamente alle funzioni, che gli oggetti contengono i dati previsti e per scrivere istruzioni di traccia.

La classe Sys.Debug espone diverse funzioni che possono essere usate per gestire la traccia, le asserzioni di codice o gli errori, come illustrato nella tabella 1.

Tabella 1. Funzioni della classe Sys.Debug.

Nome della funzione	Descrizione
assert(condition, message, displayCaller)	Dichiara che il parametro della condizione è true. Se la condizione sottoposta a test è false, verrà usata una finestra di messaggio per visualizzare il valore del parametro del messaggio. Se il parametro displayCaller è true, il metodo visualizza anche informazioni sul chiamante.
clearTrace()	Cancella l'output delle istruzioni dalle operazioni di traccia.
fail(message)	Fa sì che il programma arresti l'esecuzione e si interrompa nel debugger. Il parametro del messaggio può essere usato per fornire un motivo per l'errore.
trace(message)	Scrive il parametro del messaggio nell'output di traccia.
traceDump(object, name)	Restituisce i dati di un oggetto in un formato leggibile. Il parametro name può essere usato per fornire un'etichetta per il dump della traccia. Tutti gli oggetti secondari all'interno dell'oggetto di cui viene eseguito il dump verranno scritti per impostazione predefinita.

La traccia sul lato client può essere usata in modo analogo alla funzionalità di traccia disponibile in ASP.NET. Consente di visualizzare facilmente messaggi diversi senza interrompere il flusso dell'applicazione. L'elenco 5 mostra un esempio di utilizzo della funzione Sys.Debug.trace per scrivere nel log di traccia. Questa funzione accetta semplicemente il messaggio che deve essere scritto come parametro.

Elenco 5. Uso della funzione Sys.Debug.trace.

function BuildPerson()
{
 var address = new XmlForAsp.Address($get("txtStreet").value, $get("txtCity").value, $get("txtState").value, $get("txtZip").value);
 var person = new XmlForAsp.Person(null, $get("txtFirstName").value, $get("txtLastName").value, address);
 Sys.Debug.trace("Person's name: " + person.get_firstName() + " " + person.get_lastName());
 UpdatePerson(person);
}

Se si esegue il codice visualizzato nell'elenco 5, non verrà visualizzato alcun output di traccia nella pagina. L'unico modo per vedere è usare una finestra della console disponibile in Visual Studio .NET, helper di sviluppo Web o Firebug. Se si vuole visualizzare l'output della traccia nella pagina, sarà necessario aggiungere un tag TextArea e assegnargli un ID TraceConsole, come illustrato di seguito:

<textArea id="TraceConsole" rows="10" cols="50"></textArea>

Tutte le istruzioni Sys.Debug.trace nella pagina verranno scritte in TraceConsole TextArea.

Nei casi in cui si vogliono visualizzare i dati contenuti in un oggetto JSON, è possibile usare la funzione traceDump della classe Sys.Debug. Questa funzione accetta due parametri, tra cui l'oggetto che deve essere sottoposto a dump nella console di traccia e un nome che può essere usato per identificare l'oggetto nell'output di traccia. L'elenco 6 mostra un esempio di utilizzo della funzione traceDump.

Elenco 6. Uso della funzione Sys.Debug.traceDump.

function UpdatePerson(person)
{
 //Dump contents of the person object to the trace output
 Sys.Debug.traceDump(person,"Person Data");

 alert("Person updated! " + person.get_firstName() + " " + person.get_lastName());
}

La figura 11 mostra l'output della chiamata alla funzione Sys.Debug.traceDump. Si noti che oltre a scrivere i dati dell'oggetto Person, scrive anche i dati del sottooggetto Address.

Oltre alla traccia, la classe Sys.Debug può essere usata anche per eseguire asserzioni di codice. Le asserzioni vengono usate per verificare che vengano soddisfatte condizioni specifiche durante l'esecuzione di un'applicazione. La versione di debug degli script della libreria ASP.NET AJAX contiene diverse istruzioni assert per testare un'ampia gamma di condizioni.

L'elenco 7 mostra un esempio di utilizzo della funzione Sys.Debug.assert per testare una condizione. Il codice verifica se l'oggetto Address è Null prima di aggiornare un oggetto Person.

Figura 11: Output della funzione Sys.Debug.traceDump. (Fare clic per visualizzare l'immagine a dimensione intera)

Elenco 7. Uso della funzione debug.assert.

function UpdatePerson(person)
{
 //Check if address is null
 Sys.Debug.assert(person.get_address() == null,"Address is null!",true);

 alert("Person updated! " + person.get_firstName() + " " + person.get_lastName());
}

Vengono passati tre parametri, inclusa la condizione da valutare, il messaggio da visualizzare se l'asserzione restituisce false e se devono essere visualizzate o meno informazioni sul chiamante. Nei casi in cui un'asserzione ha esito negativo, il messaggio verrà visualizzato e le informazioni sul chiamante se il terzo parametro è true. La figura 12 mostra un esempio della finestra di dialogo di errore visualizzata se l'asserzione mostrata nell'elenco 7 ha esito negativo.

La funzione finale da coprire è Sys.Debug.fail. Quando si vuole forzare l'esito negativo del codice in una determinata riga di uno script, è possibile aggiungere una chiamata Sys.Debug.fail anziché l'istruzione debugger usata in genere nelle applicazioni JavaScript. La funzione Sys.Debug.fail accetta un singolo parametro stringa che rappresenta il motivo dell'errore, come illustrato di seguito:

Sys.Debug.fail("My forced failure of script.");

Figura 12: Messaggio di errore Sys.Debug.assert. (Fare clic per visualizzare l'immagine a dimensione intera)

Quando viene rilevata un'istruzione Sys.Debug.fail durante l'esecuzione di uno script, il valore del parametro del messaggio verrà visualizzato nella console di un'applicazione di debug, ad esempio Visual Studio 2008 e verrà richiesto di eseguire il debug dell'applicazione. Un caso in cui ciò può risultare molto utile è quando non è possibile impostare un punto di interruzione con Visual Studio 2008 in uno script inline, ma si vuole che il codice si arresti su una riga specifica in modo da poter esaminare il valore delle variabili.

Informazioni sulla proprietà ScriptMode del controllo ScriptManager

La libreria ASP.NET AJAX include versioni di script di debug e versione installate in C:\Programmi\Microsoft ASP.NET\ASP.NET 2.0 AJAX Extensions\v1.0.61025\MicrosoftAjaxLibrary\System.Web.Extensions\1.0.61025.0 per impostazione predefinita. Gli script di debug sono ben formattati, facili da leggere e hanno diverse chiamate Sys.Debug.assert sparse in tutte le chiamate, mentre gli script di versione hanno spazi vuoti rimossi e usano la classe Sys.Debug risparmiando per ridurre al minimo le dimensioni complessive.

Il controllo ScriptManager aggiunto a ASP.NET pagine AJAX legge l'attributo di debug dell'elemento di compilazione in web.config per determinare quali versioni degli script di libreria caricare. È tuttavia possibile controllare se gli script di debug o versione vengono caricati (script di libreria o script personalizzati) modificando la proprietà ScriptMode. ScriptMode accetta un'enumerazione ScriptMode i cui membri includono Auto, Debug, Release ed Inherit.

Per impostazione predefinita, ScriptMode viene impostato su un valore auto, il che significa che ScriptManager verificherà l'attributo di debug in web.config. Quando il debug è false, ScriptManager caricherà la versione di rilascio degli script della libreria ASP.NET AJAX. Quando il debug è true, verrà caricata la versione di debug degli script. Se si modifica la proprietà ScriptMode su Release o Debug, ScriptManager verrà forzato a caricare gli script appropriati indipendentemente dal valore dell'attributo di debug in web.config. L'elenco 8 mostra un esempio di utilizzo del controllo ScriptManager per caricare gli script di debug dalla libreria ASP.NET AJAX.

Elenco 8. Caricamento di script di debug tramite ScriptManager.

<asp:ScriptManager ID="ScriptManager1" runat="server" ScriptMode="Debug"></asp:ScriptManager>

È anche possibile caricare versioni diverse (debug o versione) di script personalizzati usando la proprietà ScriptManager insieme al componente ScriptReference, come illustrato nell'elenco 9.

Elenco 9. Caricamento di script personalizzati tramite ScriptManager.

<asp:ScriptManager ID="ScriptManager1" runat="server">
 <Scripts>
 <asp:ScriptReference Path="~/Scripts/Person.js" ScriptMode="Debug"/>
 </Scripts>
</asp:ScriptManager>

Nota

Se si caricano script personalizzati usando il componente ScriptReference, è necessario inviare una notifica a ScriptManager al termine del caricamento dello script aggiungendo il codice seguente nella parte inferiore dello script:

if (typeof(Sys) !== 'undefined') Sys.Application.notifyScriptLoaded();

Il codice mostrato nell'elenco 9 indica a ScriptManager di cercare una versione di debug dello script Person in modo che cercherà automaticamente Person.debug.js anziché Person.js. Se il file di Person.debug.js non viene trovato, verrà generato un errore.

Nei casi in cui si desidera caricare una versione di debug o di rilascio di uno script personalizzato in base al valore della proprietà ScriptMode impostata nel controllo ScriptManager, è possibile impostare la proprietà ScriptReference del controllo ScriptMode su Inherit. In questo modo verrà caricata la versione corretta dello script personalizzato in base alla proprietà ScriptMode di ScriptManager, come illustrato nell'elenco 10. Poiché la proprietà ScriptMode del controllo ScriptManager è impostata su Debug, lo script Person.debug.js verrà caricato e usato nella pagina.

Elenco 10. Ereditando ScriptMode da ScriptManager per gli script personalizzati.

<asp:ScriptManager ID="ScriptManager1" runat="server" ScriptMode="Debug">
 <Scripts>
 <asp:ScriptReference Path="~/Scripts/Person.js" ScriptMode="Inherit"/>
 </Scripts>
</asp:ScriptManager>

Usando la proprietà ScriptMode in modo appropriato, è possibile eseguire più facilmente il debug delle applicazioni e semplificare il processo complessivo. Gli script di rilascio della libreria ASP.NET AJAX sono piuttosto difficili da eseguire e leggere poiché la formattazione del codice è stata rimossa mentre gli script di debug vengono formattati in modo specifico a scopo di debug.

Conclusione

La tecnologia Microsoft ASP.NET AJAX offre una solida base per la creazione di applicazioni abilitate per AJAX che possono migliorare l'esperienza complessiva dell'utente finale. Tuttavia, come per qualsiasi tecnologia di programmazione, i bug e altri problemi dell'applicazione si verificheranno certamente. Conoscere le diverse opzioni di debug disponibili può risparmiare molto tempo e produrre un prodotto più stabile.

In questo articolo sono state introdotte diverse tecniche per il debug ASP.NET pagine AJAX, tra cui Internet Explorer con Visual Studio 2008, Helper sviluppo Web e Firebug. Questi strumenti consentono di semplificare il processo di debug complessivo perché è possibile accedere ai dati delle variabili, scorrere la riga di codice per riga e visualizzare le istruzioni di traccia. Oltre ai diversi strumenti di debug illustrati, si è anche visto come la classe Sys.Debug della libreria AJAX ASP.NET può essere usata in un'applicazione e come la classe ScriptManager può essere usata per caricare le versioni di debug o di rilascio degli script.

Biografia

Dan Wahlin (Microsoft Most Valuable Professional for ASP.NET e XML Web Services) è un insegnante di sviluppo e consulente di architettura .NET presso Interface Technical Training (www.interfacett.com). Dan ha fondato il codice XML per ASP.NET Developers Web site (www.XMLforASP.NET), è nell'Ufficio di presidenza del relatore INETA e parla in diverse conferenze. Dan co-authored Professional Windows DNA (Wrox), ASP.NET: Tips, Tutorials and Code (Sams), ASP.NET 1.1 Insider Solutions, Professional ASP.NET 2.0 AJAX (Wrox), ASP.NET 2.0 MVP Hacks and authored XML for ASP.NET Developers (Sams). Quando non scrive codice, articoli o libri, Dan si diverte a scrivere e registrare musica e giocare a golf e basket con sua moglie e bambini.

Scott Cate lavora con le tecnologie Web Microsoft dal 1997 ed è presidente di myKB.com (www.myKB.com) dove si specializza nella scrittura di applicazioni basate su ASP.NET incentrate sulle soluzioni software della Knowledge Base. Scott può essere contattato tramite posta elettronica all'indirizzo scott.cate@myKB.com o al suo blog all'indirizzo ScottCate.com

Indietro