Condividi tramite

Procedura dettagliata: debug di pagine Web in Visual Web Developer

  • Articolo

Aggiornamento: novembre 2007

In Visual Web Developer sono forniti gli strumenti che consentono di individuare gli errori presenti nelle pagine Web ASP.NET. In questa procedura dettagliata, sarà utilizzato il debugger che consente di eseguire il codice della pagina un'istruzione alla volta riga per riga e di esaminare i valori delle variabili.

Nella procedura dettagliata, sarà creata una pagina Web in cui è contenuta una calcolatrice semplice per eseguire la radice quadrata di un numero. Successivamente alla creazione della pagina (in cui sarà incluso di proposito un errore), verrà utilizzato il debugger per esaminare la pagina e la relativa esecuzione.

Di seguito sono elencate le attività illustrate nella procedura dettagliata:

  • Punti di interruzione.

  • Richiamo del debugger da una pagina Web Form in un sito Web di file system.

Prerequisiti

Per completare questa procedura dettagliata è necessario:

  • Visual Web Developer e NET Framework.

È inoltre necessario disporre di una conoscenza generale dell'utilizzo in Visual Web Developer. Per un'introduzione a Visual Web Developer, vedere Procedura dettagliata: creazione di una pagina Web di base in Visual Web Developer.

Creazione del sito e della pagina Web

Nella prima parte della procedura dettagliata, verrà creata una pagina per eseguire il debug.

Se è già stato creato un sito Web in Visual Web Developer (ad esempio, utilizzando l'argomento Procedura dettagliata: creazione di una pagina Web di base in Visual Web Developer ), è possibile utilizzare quel sito Web e passare a "Aggiunta di controlli per l'esecuzione del debug", più avanti nella procedura dettagliata. In caso contrario, creare un sito e una pagina Web nuovi attenendosi alla procedura riportata di seguito.

Per creare un sito Web di file system

  1. Aprire Visual Web Developer.

  2. Scegliere Nuovosito Web dal menu File.

    Viene visualizzata la finestra di dialogo Nuovo sito Web.

  3. In Modelli Visual Studio installati fare clic su Sito Web ASP.NET.

  4. Nella casella Percorso, fare clic su File System e digitare il nome della cartella in cui salvare le pagine del sito Web.

    Digitare, ad esempio, il nome cartella C:\\WebSites.

  5. Nell'elenco Linguaggio scegliere il linguaggio di programmazione da utilizzare.

    Il linguaggio di programmazione scelto sarà quello predefinito per il sito Web. Tuttavia, è possibile utilizzare più linguaggi nella stessa applicazione Web creando pagine e componenti con linguaggi di programmazione diversi. Per informazioni riguardo la creazione di componenti utilizzando diversi linguaggi, vedere Cartelle di codice condivise nei siti Web ASP.NET.

  6. Scegliere OK.

    In Visual Web Developer vengono create la cartella e una nuova pagina denominata Default.aspx.

Creazione di una pagina per il debug

Per iniziare, verrà creata una nuova pagina. Per questa procedura dettagliata, è importante creare una nuova pagina seguendo le indicazioni specificate nella procedura riportata di seguito.

Per aggiungere una pagina al sito Web

  1. Chiudere la pagina Default.aspx.

  2. In Esplora soluzioni, fare clic con il pulsante destro del mouse sul nome del sito Web (ad esempio, C:\WebSite), quindi scegliere Aggiungi nuovo elemento.

  3. In Modelli Visual Studio installati scegliere Web Form.

  4. Nella casella Nome digitare DebugPage.aspx.

  5. Dall'elenco Linguaggio scegliere il linguaggio di programmazione con lui lavorare.

  6. Accertarsi che la casella di controllo Inserisci codice in file separato sia deselezionata.

    In questa procedura dettagliata, viene creata una pagina a file singolo con il codice e l'HTML nella stessa pagina. Il codice per le pagine ASP.NET può essere inserito nella pagina oppure in un file di classe separato. Per ulteriori informazioni su come mantenere il codice in un file separato, vedere Procedura dettagliata: creazione di una pagina Web di base con separazione del codice in Visual Web Developer .

  7. Fare clic su Aggiungi.

    In Visual Web Developer viene creata la nuova pagina e viene aperta in visualizzazione Origine.

È ora possibile aggiungere alcuni controlli alla pagina e, successivamente, aggiungere il codice. Il codice sarà semplice ma sufficiente a consentire l'aggiunta di punti di interruzione successivamente.

Per aggiungere i controlli e il codice per l'esecuzione del debug

  1. Passare alla visualizzazione Progettazione, quindi dalla cartella Standard della Casella degli strumenti, trascinare i controlli riportati di seguito nella pagina e impostarne le proprietà come indicato:

    Controllo

    Proprietà

    Label

    ID: CaptionLabel

    Text: (vuoto)

    TextBox

    ID: NumberTextBox

    Text: (vuoto)

    Button

    ID: SquareButton

    Text: Square

    Label

    ID: ResultLabel

    Text: (vuoto)
    Nota:

    Per questa procedura dettagliata, il layout della pagina non è importante.

  2. Fare doppio clic sul controllo Button per creare un gestore Click per tale controllo.

  3. Aggiungere la logica al gestore Click per eseguire la chiamata a una funzione denominata Square per eseguire la radice quadrata del numero immesso dall'utente. Il gestore può assumere la forma illustrata nell'esempio riportato di seguito.

    Nota:

    Nell'esempio di codice la verifica dell'errore è esclusa in modo intenzionale.

    		 
    Sub SquareButton_Click(ByVal sender As Object, _
    ByVal e As System.EventArgs)
    Dim number As Integer
    Dim result As Integer
    number = CInt(NumberTextBox.Text)
    result = Square(number)
    ResultLabel.Text = CStr(number) & " squared is " & CStr(result)
End Sub

    protected void SquareButton_Click(object sender, System.EventArgs e)
{
    int number, result; 
    number = System.Convert.ToInt32(NumberTextBox.Text);
    result = Square(number);
    ResultLabel.Text = NumberTextBox.Text + 
        " squared is " + result.ToString();
}

  4. Creare la funzione con cui eseguire la radice quadrata del numero. Includere un errore nel codice per sommarvi il numero invece di moltiplicarlo. Il codice può assumere la forma illustrata nell'esempio riportato di seguito.

    Function Square(number As Integer) As Integer
    Square = number + number
End Function

    int Square(int number )
{    
    int Square;
    Square = number + number;
    return Square;
}

Inoltre è possibile aggiungere un codice alla pagina in cui sarà modificato il testo dell'etichetta a seconda che la pagina sia eseguita per la prima volta.

Per modificare il controllo Label di didascalia

  1. In visualizzazione Progettazione, fare doppio clic sull'area di progettazione (non un controllo) per creare un gestore eventi Page_Load.

  2. Impostare il testo del controllo Caption Label su Enter a number: se si tratta della prima volta in cui si esegue la pagina oppure, in caso contrario, su Enter another number:. Il gestore assumerà la forma illustrata nell'esempio riportato di seguito.

    Sub Page_Load(ByVal sender As Object, ByVal e as System.EventArgs)
    If Page.IsPostBack = False Then
        CaptionLabel.Text = "Enter a number: "
    Else
        CaptionLabel.Text = "Enter another number: "
    End If
End Sub

    if(Page.IsPostBack == false)
{
    CaptionLabel.Text = "Enter a number: ";
}
else {
    CaptionLabel.Text = "Enter another number: " ;
}

Test della pagina

Per una corretta esecuzione della pagina, effettuare tale procedura nel relativo stato corrente.

Per eseguire la pagina

  1. Salvare la pagina.

  2. Premere CTRL+F5 per eseguire la pagina.

  3. Immettere il numero 3 e premere il pulsante Quadrato.

    Notare che il risultato non è corretto dal momento che nel programma è presente un errore. Il risultato corretto è 9.

  4. Chiudere il browser.

Debug della pagina

In questa parte della procedura dettagliata, sarà utilizzato il debugger per esaminare il codice della pagina riga per riga in fase di esecuzione, aggiungere punti di interruzione e, successivamente, eseguire la pagina in modalità Debug.

Per iniziare, i punti di interruzione saranno impostati sul codice. Un punto di interruzione è una riga nel codice in cui l'esecuzione termina e viene richiamato il debugger.

Per impostare i punti di interruzione

  1. Passare alla visualizzazione Origine.

  2. Fare clic con il pulsante destro del mouse sulla riga seguente, quindi scegliere Punto di interruzione e Inserisci punto di interruzione.

    Nota:

    È possibile attivare e disattivare i punti di interruzione premendo F9.

    		 
    If Page.IsPostBack = False Then

    if(Page.IsPostBack == false)

  3. Impostare un altro punto di interruzione sulla linea seguente del gestore SquareButton_Click:

    result = Square(number)

    result = Square(number);
    Nota:

    Non è possibile impostare un punto di interruzione su un'istruzione in cui è dichiarata una variabile.

È sufficiente impostare almeno un punto di interruzione per eseguire il debugger.

Per eseguire il debugger

  1. Dal menu Debug scegliere Avvia debug (oppure premere F5) per eseguire la pagina in modalità debug.

    Se, in precedenza, non è stato eseguito alcun debug, l'applicazione potrebbe non essere configurata per il supporto al debug. Per impostazione predefinita, il debug è disattivato nelle applicazioni per questioni di prestazioni (nel debugger le pagine sono eseguite più lentamente) e per motivi di protezione. In Visual Web Developer viene visualizzato un messaggio in cui sono contenute le indicazioni per attivare il debug.

    La procedura di attivazione del debug è memorizzata come impostazione nel file Web.config, in cui sono contenute varie opzioni di configurazione specifiche del sito. Se il file Web.config non esiste, sarà necessario creare il file in Visual Web Developer e apportare le modifiche appropriate per il debugger.

    Se il file Web.config esiste ma il debug non è attivo, sarà visualizzato un messaggio leggermente differente in cui è comunicata la modifica in Visual Web Developer del file Web.config.

  2. Se nel messaggio visualizzato viene comunicato che il debug non è stato attivato, scegliere OK per l'attivazione.

    In Visual Web Developer, la finestra di progettazione viene modificata in modalità debug visualizzando il codice per la pagina e alcune finestre del debugger.

    Il debugger consente di esguire la pagina riga per riga. Quando il debugger ottiene la riga in cui è contenuto il punto di interruzione, si blocca e la riga viene evidenziata.

    Dal momento che il punto di interruzione si trova nel gestore Page_Load, l'elaborazione della pagina non è ancora terminata. Viene visualizzato il browser, mentre la pagina non è ancora visualizzata.

  3. Scegliere Finestre dal menu Debug, fare clic su Espressione di controllo, quindi scegliere Watch1.

    Nota:

    In caso di utilizzo di Visual Web Developer Express Edition, nel debugger è disponibile soltanto una finestra Espressione di controllo.

    Viene visualizzata una finestra Espressione di controllo in cui è possibile specificare i valori di cui tenere traccia.

  4. Nell'editor, fare clic con il pulsante destro del mouse sulla porzione IsPostBack dell'espressione Page.IsPostBack, quindi scegliere Aggiungi espressione di controllo.

    Tale procedura consente di aggiungere l'espressione alla finestra Espressione di controllo e di visualizzare il valore corrente della proprietà (false) visualizzata nella colonna Valore. È possibile, se lo si desidera, digitare il nome di una variabile o di una proprietà nella colonna Name della finestra Espressione di controllo.

  5. Scegliere Continua dal menu Debug per continuare l'esecuzione oppure premere F5.

    Il comando Continua consente al debugger di procedere fino al successivo punto di interruzione. Nel gestore eventi Page_Load viene terminata l'elaborazione e la pagina viene visualizzata nel browser.

  6. Immettere il valore di 2 nella casella di testo e fare clic sul pulsante Quadrato.

    Viene visualizzato di nuovo il debugger con il punto di interruzione sulla riga nel gestore Page_Load. In questa situazione, nella finestra Espressione di controllo è visualizzato che il valore di Page.IsPostBack è true.

  7. Premere di nuovo F5 per continuare.

    Il debugger consente di eseguire il gestore Page_Load e di immettere il gestore SquareButton_Click, in cui si fermerà sul secondo punto di interruzione inserito.

  8. Scegliere Finestre dal menu Debug, quindi fare clic su Variabili locali.

    Viene visualizzata la finestra Variabili locali in cui sono presenti i valori di tutte le variabili e gli oggetti che appartengono all'ambito della riga corrente in fase di esecuzione. Nella finestra Variabili locali viene fornito un metodo alternativo per visualizzare questi valori, con il vantaggio che non è necessario impostare in modo esplicito un controllo degli elementi, ma con lo svantaggio che nella finestra potrebbero essere contenute più informazioni di quelle che si desidera visualizzare per volta.

    Nella finestra Variabili locali viene visualizzato che il valore di number è 2 e che il valore di result è 0.

    Nota:

    Inoltre, è possibile visualizzare il valore di tutte le variabili presenti nel programma posizionandovi sopra il puntatore del mouse.

  9. Nella colonna Value della finestra Variabili locali, fare clic con il pulsante destro del mouse sulla riga della variabile number e selezionare Modifica valore. Modificare il valore della variabile number e spostarlo a 5.

    Il valore di 2 della variabile number non rappresenta una verifica soddisfacente del programma, dal momento che sia la somma, sia la radice quadrata di 2 danno come risultato 4. Tuttavia, in fase di esecuzione del programma, è possibile modificare il valore di questa variabile.

  10. Scegliere Esegui istruzione dal menu Debug per eseguire la funzione Square oppure premere F11.

    Il comando Esegui istruzione determina da parte del debugger l'esecuzione e l'interruzione di una riga.

  11. Continuare a scorrere premendo F11 fino a raggiungere la riga successiva del codice.

    ResultLabel.Text = CStr(number) & " squared is " & CStr(result)

        ResultLabel.Text = NumberTextBox.Text + 
        " squared is " + result.ToString();

    Il debugger consente di esaminare il codice riga per riga. Quando nel debugger si esegue la funzione Square, è possibile utilizzare la finestra Variabili locali per verificare i dati passati alla funzione (number) e restituire il valore della funzione (Square).

  12. Scegliere Finestre dal menu Debug, quindi fare clic su Controllo immediato.

    La finestra Controllo immediato consente di eseguire i comandi. È possibile utilizzare la finestra per valutare le espressioni (ad esempio, per ottenere il valore di una proprietà).

  13. Nella finestra Controllo immediato, digitare l'espressione riportata di seguito e premere INVIO.

    ? NumberTextBox.Text

    Il punto interrogativo (?) è un operatore nella finestra Controllo immediato che consente di valutare l'espressione riportata di seguito. In questo esempio, si sta valutando la proprietà Text del controllo NumberTextBox nella pagina. È possibile valutare qualsiasi variabile, proprietà di oggetto o espressione in cui si combinano, utilizzando la stessa sintassi che viene utilizzata nel codice.

  14. Nella finestra Controllo immediato, digitare l'espressione riportata di seguito e premere INVIO.

    NumberTextBox.Text = "5"

    In aggiunta alle espressioni di valutazione, la finestra Controllo immediato consente di modificare le variabili o le proprietà.

  15. Premere F5 per continuare l'esecuzione del programma.

    Quando viene visualizzata la pagina, in essa è presente il risultato della modalità di passaggio di 5 alla funzione Square. Inoltre, il testo nella casella di testo è stato modificato in 5.

Il risultato visualizzato, 10, non è corretto dal momento che 10 non è la radice quadrata di 5. È ora possibile correggere l'errore.

Per correggere l'errore ed eseguire di nuovo il test

  1. Passare dal browser in Visual Web Developer.

    Nota:

    Non chiudere la finestra del browser.

  2. Nella funzione Square, modificare l'operatore "+" nell'operatore "*" .

    Dal momento che il codice non è in fase di esecuzione (l'elaborazione della pagina è stata completata), la modalità corrente è la modalità di modifica, in cui è possibile effettuare modifiche permanenti.

  3. Premere CTRL+S per salvare la pagina.

  4. Scegliere Elimina tutti i punti di interruzione dal menu Debug in modo la pagina non venga interrotta ad ogni interruzione.

    Nota:

    Inoltre è possibile rimuovere i punti di interruzione CTRL+SHIFT+F9.

  5. Passare alla finestra del browser.

  6. Immettere 5 nella casella di testo e fare clic sul pulsante.

    In questa procedura, quando si esegue la pagina e si immette un valore, viene elevato al quadrato in modo corretto. Le modifiche temporanee apportate in precedenza, ad esempio la modifica della proprietà Text del controllo NumberTextBox non sono state mantenute dal momento che sono state applicate in fase di esecuzione della pagina.

  7. Chiudere il browser per interrompere il debugger.

Passaggi successivi

Nel debugger sono incluse funzionalità aggiuntive per supportare l'utilizzo del codice. Inoltre, è possibile ottenere ulteriori informazioni relative alle tecniche di gestione di situazioni di errore e relative a metodi di monitoraggio della pagina in fase di esecuzione. Può, ad esempio, essere necessaria l'esplorazione dell'analisi. Per informazioni dettagliate, vedere Procedura dettagliata: utilizzo dell'analisi in Visual Web Developer per individuare errori nelle pagine Web.

Vedere anche

Altre risorse

Debug in Visual Studio