Condividi tramite

Cenni preliminari sul debug e sull'analisi delle applicazioni AJAX

  • Articolo

Aggiornamento: novembre 2007

Le applicazioni ASP.NET con supporto AJAX contengono una combinazione di codice server e codice client. Il browser può inoltre richiedere dati aggiuntivi in modo asincrono. Questo aspetto può rendere particolarmente impegnativo il debug delle applicazioni Web con supporto AJAX. In questo argomento vengono descritti alcuni strumenti e tecniche che possono facilitare il debug del codice.

Nota:

Ad eccezione di Visual Studio e Internet Explorer, i programmi citati in questo argomento sono strumenti di terze parti non supportati da Microsoft. Per informazioni relative alla licenza e al supporto, vedere il sito Web dello strumento.

Vengono illustrati i seguenti argomenti:

  • Scenari

  • Informazioni di supporto

  • Riferimento alle classi

Scenari

È possibile utilizzare gli approcci descritti di seguito per eseguire il debug di un'applicazione ASP.NET con supporto AJAX in fasi diverse dello sviluppo:

  • Attivare il debug nel file di configurazione.

  • Utilizzare l'analisi sul server.

  • Utilizzare i metodi della classe Sys.Debug per impostare punti di interruzione e gestire l'output di analisi.

  • Attivare il debug nel browser.

  • Connettere il debugger Visual Studio 2008 all'istanza di Internet Explorer o utilizzare strumenti esterni per eseguire il debug in altri browser.

  • Utilizzare strumenti esterni per acquisire il traffico HTTP.

Torna all'inizio

Informazioni di supporto

L'architettura ASP.NET AJAX fornisce un modello per le modalità di rilascio e di debug. La modalità di rilascio consente il controllo degli errori e la gestione delle eccezioni con prestazioni ottimali, grazie alla dimensione degli script ridotta al minimo. La modalità di debug include funzionalità di debug più potenti, come il controllo di tipi e argomenti. Se si creano versioni di debug di file script client o di risorse script, le versioni di debug vengono eseguite in ASP.NET quando l'applicazione è in modalità di debug. In questo modo è possibile generare eccezioni negli script di debug, mantenendo tuttavia alle minime dimensioni il codice di rilascio.

La classe di supporto per il debug, Sys.Debug, fornisce metodi per la visualizzazione di oggetti in formato leggibile alla fine di una pagina Web. Mostra inoltre messaggi di analisi, consente di utilizzare asserzioni e di passare al debugger. Un'API a oggetti estesa, Error, fornisce utili dettagli sulle eccezioni, con il supporto per le modalità di rilascio e di debug.

Nelle sezioni seguenti vengono fornite informazioni dettagliate sulle tecniche e sugli strumenti che è possibile utilizzare per il debug e l'analisi.

Configurazione dell'applicazione per il debug

Per attivare il debug, aggiungere un elemento compilation al file Web.config radice del sito, quindi impostare il relativo attributo debug su true. Per ulteriori informazioni, vedere Elemento compilation (schema delle impostazioni ASP.NET).

Nell'esempio seguente viene illustrata una sezione da un file Web.config con l'attributo debug impostato per l'esecuzione del debug.

<configuration>
  <system.web>
    <compilation debug="true">
      <!-- etc. -->
    </compilation>
  </system.web>
<configuration>

Quando il debug è attivato, ASP.NET utilizza una versione di debug di Microsoft AJAX Library e versioni di debug dei file script client personalizzati, se disponibili.

Impostazione dell'applicazione dalla modalità di debug alla modalità di rilascio per la distribuzione

Quando si distribuisce una versione di rilascio di un'applicazione ASP.NET con supporto AJAX, è necessario impostare l'applicazione sulla modalità di rilascio. In questo modo in ASP.NET verrà utilizzata la versione di rilascio ottimizzata per assicurare le migliori prestazioni delle librerie AJAX. Se sono state create versioni di debug e di rilascio dei file script personalizzati e delle risorse script, in ASP.NET verranno utilizzate anche le versioni di rilascio. Per impostare l'applicazione sulla modalità di rilascio, effettuare le seguenti operazioni:

  • Nel file Web.config, se l'elemento compilation contiene un attributo debug assicurarsi che tale attributo debug sia impostato su false.

  • Verificare che in tutte le pagine Web contenenti un controllo ScriptManager la proprietà ScriptMode sia impostata su Release.

L'attributo debug della direttiva @ Page non influisce sulle applicazioni ASP.NET AJAX. Il controllo ScriptManager utilizza solo le impostazioni contenute nel file Web.config e nelle relative proprietà IsDebuggingEnabled e ScriptMode per determinare se eseguire il rendering degli script di debug.

Analisi sul server

Se si utilizza l'analisi sul server per eseguire il debug di pagine Web con attivato il rendering a pagina parziale, è necessario utilizzare il visualizzatore di analisi (Trace.axd) per visualizzare l'output di analisi, che può essere aggiunto alla fine della pagina. L'output di analisi verrà visualizzato la prima volta che si esegue il rendering della pagina. La visualizzazione dell'analisi non viene tuttavia aggiornata a seguito di postback asincroni, in quanto verrà modificato solo il contenuto dei controlli UpdatePanel che devono essere aggiornati. Per ulteriori informazioni sull'utilizzo del visualizzatore di analisi, vedere Cenni preliminari sull'analisi di ASP.NET.

Nota:

Il rendering a pagina parziale viene attivato quando la pagina contiene un controllo ScriptManager con la relativa proprietà EnablePartialRendering impostata su true. La pagina deve inoltre contenere uno o più controlli UpdatePanel.

Classe di supporto per il debug

In ASP.NET è disponibile la classe Sys.Debug per il debug di applicazioni client. La chiamata ai metodi della classe Sys.Debug consente di visualizzare oggetti in formato leggibile alla fine della pagina, visualizzare messaggi di analisi, utilizzare asserzioni e passare al debugger.

Se si utilizzano Visual Studio e Internet Explorer, è possibile connettere il debugger°di°Visual Studio al browser e visualizzare i messaggi di analisi del debugger nella finestra Output. Se non si utilizza Visual Studio, è possibile visualizzare i messaggi di analisi del debugger in Internet Explorer mediante la creazione di un elemento°textarea nella pagina°e l'impostazione del relativo ID su TraceConsole. In Mozilla Firefox è possibile visualizzare i messaggi di analisi del debugger utilizzando strumenti disponibili come estensioni. I browser Apple Safari e Opera consentono di visualizzare i messaggi di analisi nelle rispettive console di debug.

Nella tabella riportata di seguito sono elencati i metodi della classe Sys.Debug:

Nell'esempio riportato di seguito viene illustrata la chiamata ai metodi della classe Sys.Debug.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" >
    <title>Untitled Page</title>
<script language="javascript" type="text/javascript">
function btnAssert_onclick() {
    var n;
    // Insert code intended to set n to a positive integer.
    if (false) n = 3;
    // Assert if n is not greater than 0.
    Sys.Debug.assert(n > 0, "n must be set to a positive integer.");
}

function btnFail_onclick() {
    var n;
    // Insert code intended to set n to a numeric value.
    if (false) n = 3;
    // Fail if n is not numeric.
    if (isNaN(n)) Sys.Debug.fail("The value of n must be a number.");
}

function btnTrace_onclick() {
    v = form1.text1.value;
    Sys.Debug.trace("Name set to " + "\"" + v + "\".");
    alert("Hello " + v + ".");
}

function btnDump_onclick() {
    Sys.Debug.traceDump(form1.text1, "Name textbox");
    alert("Hello " + form1.text1.value + ".");
}

function btnClear_onclick() {
    Sys.Debug.clearTrace()
    alert("Trace console cleared.");
}
</script>
</head>
<body>
<form id="form1" >
    <h2>Sys.Debug Methods Test Page</h2>
    <asp:ScriptManager ID="ScriptManager1" 
         />
    <p><b>Use these buttons to demonstrate the assert() and fail() 
    methods:</b><br />
    <input id="btnAssert" type="button" value="Assert" 
        style="width: 100px" 
        onclick="return btnAssert_onclick()" /> &nbsp
    <input id="btnFail" type="button" value="Fail" 
        style="width: 100px" onclick="return btnFail_onclick()" />
    </p><hr />
    <b>Use the textbox and buttons below to demonstrate tracing.</b>
    <br />
    <p>Enter your name here:<br />
    <input id="text1" maxlength="50" type="text" />
    <br />
    <br />
    <input id="btnTrace" type="button" value="Trace" 
        style="width: 100px" onclick="return btnTrace_onclick()" /><br />
    <input id="btnDump" type="button" value="TraceDump" 
        style="width: 100px" onclick="return btnDump_onclick()" /><br />
    <input id="btnClear" type="button" value="ClearTrace" 
        style="width: 100px" onclick="return btnClear_onclick()" /><br />
    <br /></p>
    View output in the TraceConsole textarea below.
    <br />
    <textarea id='TraceConsole' rows="10" cols="50" 
        title="TraceConsole"></textarea>
</form>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" >
    <title>Untitled Page</title>
<script language="javascript" type="text/javascript">
function btnAssert_onclick() {
    var n;
    // Insert code intended to set n to a positive integer.
    if (false) n = 3;
    // Assert if n is not greater than 0.
    Sys.Debug.assert(n > 0, "n must be set to a positive integer.");
}

function btnFail_onclick() {
    var n;
    // Insert code intended to set n to a numeric value.
    if (false) n = 3;
    // Fail if n is not numeric.
    if (isNaN(n)) Sys.Debug.fail("The value of n must be a number.");
}

function btnTrace_onclick() {
    v = form1.text1.value;
    Sys.Debug.trace("Name set to " + "\"" + v + "\".");
    alert("Hello " + v + ".");
}

function btnDump_onclick() {
    Sys.Debug.traceDump(form1.text1, "Name textbox");
    alert("Hello " + form1.text1.value + ".");
}

function btnClear_onclick() {
    Sys.Debug.clearTrace()
    alert("Trace console cleared.");
}
</script>
</head>
<body>
<form id="form1" >
    <h2>Sys.Debug Methods Test Page</h2>
    <asp:ScriptManager ID="ScriptManager1" 
         />
    <p><b>Use these buttons to demonstrate the assert() and fail() 
    methods:</b><br />
    <input id="btnAssert" type="button" value="Assert" 
        style="width: 100px" 
        onclick="return btnAssert_onclick()" /> &nbsp
    <input id="btnFail" type="button" value="Fail" 
        style="width: 100px" onclick="return btnFail_onclick()" />
    </p><hr />
    <b>Use the textbox and buttons below to demonstrate tracing.</b>
    <br />
    <p>Enter your name here:<br />
    <input id="text1" maxlength="50" type="text" />
    <br />
    <br />
    <input id="btnTrace" type="button" value="Trace" 
        style="width: 100px" onclick="return btnTrace_onclick()" /><br />
    <input id="btnDump" type="button" value="TraceDump" 
        style="width: 100px" onclick="return btnDump_onclick()" /><br />
    <input id="btnClear" type="button" value="ClearTrace" 
        style="width: 100px" onclick="return btnClear_onclick()" /><br />
    <br /></p>
    View output in the TraceConsole textarea below.
    <br />
    <textarea id='TraceConsole' rows="10" cols="50" 
        title="TraceConsole"></textarea>
</form>
</body>
</html>

Configurazione di Internet Explorer per il debug

Per impostazione predefinita, in Internet Explorer vengono ignorati i problemi rilevati in JavaScript. È possibile attivare l'esecuzione del debug utilizzando la procedura descritta di seguito.

Per attivare il debug in Internet Explorer

  1. Scegliere Opzioni Internet dal menu Strumenti.

  2. Nella scheda Avanzate deselezionare la casella di controllo Disattiva debugging degli script (Internet Explorer) e la casella di controllo Disattiva debugging degli script (altro).

  3. Selezionare la casella di controllo Visualizza notifica di tutti gli errori di script.

  4. Per disattivare i messaggi di errore brevi, deselezionare la casella di controllo Mostra messaggi di errore HTTP brevi.

    Se i messaggi di errore brevi sono attivati e la lunghezza di una risposta di errore HTTP 500 dal server è inferiore a 513 byte, il contenuto viene mascherato da Internet Explorer. Al posto delle informazioni sull'errore, in Internet Explorer viene visualizzato un messaggio destinato agli utenti finali, non agli sviluppatori.

Connessione del debugger di Visual Studio a Internet Explorer

Per eseguire il debug di script client è necessario connettere un debugger a Internet Explorer. In Visual Studio, se si avvia l'applicazione per il debug premendo F5 o scegliendo il comando Avvia debug dal menu Debug, il debugger viene connesso automaticamente.

È inoltre possibile connettere il debugger Visual Studio a Internet Explorer quando l'applicazione è già in esecuzione. A questo scopo, scegliere Connetti a processo dal menu Debug. Nella finestra di dialogo Connetti a processo selezionare l'istanza di Internet Explorer (iexplore.exe) a cui si desidera connettere il debugger.

Nota:

Se Internet Explorer è configurato per l'esecuzione del debug, nella colonna Tipo per la relativa istanza di Internet Explorer viene visualizzato Script, x86. Se nella colonna Tipo viene visualizzato solo x86, verificare che Internet Explorer sia configurato per il debug.

Se in Internet Explorer si verifica un errore di script e il browser è configurato per il debug degli script ma non è attualmente connesso a un debugger, verrà chiesto di selezionare un debugger. È possibile continuare senza eseguire il debug oppure connettere un debugger ed eseguire il codice un'istruzione alla volta.

Problemi di debug noti di Internet Explorer e soluzioni alternative

Quando si esegue il debug di applicazioni ASP.NET AJAX che utilizzano Internet Explorer, è opportuno considerare i problemi e le soluzioni alternative seguenti:

  • Dopo la connessione del debugger Visual Studio a Internet Explorer, è possibile visualizzare un elenco degli script in fase di debug nella finestra Esplora script. Per visualizzare la finestra, scegliere Debug dal menu Finestre, quindi fare clic su Esplora script. La libreria client di ASP.NET AJAX verrà visualizzata come risorsa a partire da ScriptResource.axd?..., che il server genera dinamicamente dall'assembly ASP.NET AJAX. Un problema noto in Visual Studio potrebbe impedire l'apertura del file. Se in Visual Studio viene visualizzato un messaggio di errore su tale operazione o se i clic sul nome del file vengono ignorati, chiudere tutti i file script aperti. È quindi possibile aprire la pagina e selezionare i file script di cui si desidera eseguire il debug.

  • Non è possibile impostare punti di interruzione in codice JavaScript all'interno degli elementi script in una pagina ASP.NET finché il debugger non avrà eseguito l'istruzione nel codice JavaScript contenuto nella pagina. Per risolvere questo problema, impostare il punto di interruzione sulla funzione dalla quale proviene la chiamata ed eseguire l'istruzione nel codice contenuto nella pagina Web ASP.NET. Dopo l'interruzione dell'esecuzione del debugger in corrispondenza di una riga di codice JavaScript nella pagina, sarà possibile impostare punti di interruzione come al solito. Per consentire al debugger di riconoscere script in una pagina ASP.NET, è inoltre possibile creare un metodo nel file della pagina ASP.NET che chiama il metodo Sys.Debug.fail. Quando si chiama questo metodo, il debugger si interromperà in risposta alla chiamata su Sys.Debug.fail, consentendo di impostare punti di interruzione altrove. Una terza alternativa consiste nell'inserire tutto il codice personalizzato nei file JavaScript esterni.

  • Visual Studio consente di impostare punti di interruzione sulla prima riga di una funzione JavaScript normale, ma non sulla prima riga di metodi anonimi utilizzati da ASP.NET nelle librerie AJAX. Se un metodo anonimo contiene solo una riga di codice, o se è necessario impostare un punto di interruzione sulla prima riga di un metodo anonimo, inserire una riga di codice fittizia. È quindi possibile impostare il punto di interruzione sulla seconda riga del metodo.

Problemi noti di IIS 7.0

Quando si eseguono pagine ASP.NET con supporto AJAX utilizzando IIS 7.0 su Windows Vista e la modalità pipeline gestita è impostata su Integrated, gli script elaborati dalla classe ScriptResourceHandler non vengono memorizzati nella cache. Gli script vengono tuttavia memorizzati nella cache quando la modalità pipeline gestita è impostata su Classic.

Per ulteriori informazioni sulla modalità pipeline gestita di IIS 7.0, vedere Upgrading ASP.NET Applications to IIS 7.0: Differences between IIS 7.0 Integrated Mode and Classic Mode (informazioni in lingua inglese).

Acquisizione del traffico HTTP

Quando si sviluppano applicazioni Web, è spesso utile monitorare il traffico HTTP tra il server e il client. Per eseguire questa attività, è possibile utilizzare Fiddler, uno strumento disponibile nella pagina Fiddler PowerTo sul sito Web MSDN (informazioni in lingua inglese). Fiddler viene eseguito come un proxy che registra tutto il traffico HTTP. Supporta Internet Explorer e altri browser. Con Fiddler è possibile esaminare ogni richiesta e risposta, inclusi intestazioni, cookie e contenuto dei messaggi.

Esecuzione del debug in Mozilla Firefox

Mozilla Firefox non è integrato con il debugger Visual Studio. Di conseguenza, non è possibile utilizzare il debugger Visual Studio per eseguire il codice client un'istruzione alla volta in Firefox. Questo strumento supporta tuttavia alcune funzionalità di debug, ad esempio una console JavaScript. È inoltre possibile installare le seguenti estensioni fornite da Mozilla che possono migliorare le funzionalità di debug:

  • FireBug consente di eseguire script client un'istruzione alla volta e di esaminare elementi DOM HTML. Fornisce anche una console di script, una riga di comando e altri strumenti.

  • Il debugger JavaScript (informazioni in lingua inglese), noto anche come "Venkman", fornisce un ambiente di debug JavaScript che include un browser del codice sorgente e altre funzionalità.

  • L'estensione per Web Developer (informazioni in lingua inglese) consente di controllare i fogli di stile CSS e DOM.

Fiddler è inoltre in grado di interagire con Firefox. Tuttavia, è necessario configurare Firefox per l'indirizzamento delle richieste HTTP tramite il proxy in esecuzione sulla porta 8888 del computer locale. Per ulteriori informazioni, vedere la pagina relativa alla configurazione dei client sul sito Web Fiddler.

Torna all'inizio

Riferimento alle classi

  • Classe Sys.Debug
    Vengono forniti metodi che consentono di definire i punti di interruzione e gestire l'output di analisi.

Torna all'inizio

Vedere anche

Attività

Cenni preliminari sulla localizzazione delle risorse per le librerie di componenti

Concetti

Cenni preliminari su ASP.NET AJAX

Aggiunta di funzionalità AJAX e client