Condividi tramite

Introduzione al debug di siti di pagine Web ASP.NET (Razor)

di Tom FitzMacken

Questo articolo illustra vari modi per eseguire il debug delle pagine in un sito Web di ASP.NET Web Pages (Razor). Il debugging è il processo di individuazione e correzione degli errori nelle pagine di codice.

Cosa si apprenderà:

  • Come visualizzare informazioni che consentono di analizzare ed eseguire il debug delle pagine.
  • Come usare gli strumenti di debug in Visual Studio.

Queste sono le funzionalità ASP.NET introdotte nell'articolo:

  • Helper ServerInfo .
  • ObjectInfo aiutante.

Versioni del software

  • ASP.NET Pagine Web (Razor) 3
  • Visual Studio 2013

Questa esercitazione funziona anche con ASP.NET Pagine Web 2. È possibile usare WebMatrix 3, ma il debugger integrato non è supportato.

Un aspetto importante della risoluzione degli errori e dei problemi nel codice consiste nell'evitarli in primo luogo. A tale scopo, è possibile inserire sezioni del codice che potrebbero causare errori nei blocchi try/catch. Per altre informazioni, vedere la sezione relativa alla gestione degli errori in Introduction to ASP.NET Web Programming Using the Razor Syntax (Introduzione alla programmazione Web con la sintassi Razor).

L'helper ServerInfo è uno strumento di diagnostica che offre una panoramica delle informazioni sull'ambiente server Web che ospita la pagina. Mostra anche le informazioni sulla richiesta HTTP inviate quando un browser richiede la pagina. L'helper ServerInfo visualizza l'identità utente corrente, il tipo di browser che ha effettuato la richiesta e così via. Questo tipo di informazioni consente di risolvere i problemi comuni.

  1. Creare una nuova pagina Web denominata ServerInfo.cshtml.

  2. Alla fine della pagina, subito prima del tag di chiusura </body> , aggiungere @ServerInfo.GetHtml():

    <!DOCTYPE html>
<html>
    <head>
        <title></title>
    </head>
    <body>
   @ServerInfo.GetHtml()
    </body>
</html>

    È possibile aggiungere il ServerInfo codice in qualsiasi punto della pagina. Tuttavia, aggiungendolo alla fine, il suo output resterà separato dagli altri contenuti della pagina, rendendo così la lettura più agevole.

    Annotazioni

    Importante È consigliabile rimuovere qualsiasi codice di diagnostica dalle pagine Web prima di spostare le pagine Web in un server di produzione. Questo vale per l'helper ServerInfo e per le altre tecniche di diagnostica in questo articolo che comportano l'aggiunta di codice a una pagina. Non si vuole che i visitatori del sito Web visualizzino informazioni sul nome del server, sui nomi utente, sui percorsi sul server e dettagli simili, perché questo tipo di informazioni potrebbe essere utile per gli utenti con finalità dannose.

  3. Salvare la pagina ed eseguirla in un browser.

    Debug-1

    L'helper ServerInfo visualizza quattro tabelle di informazioni nella pagina:

    • Configurazione del server. In questa sezione vengono fornite informazioni sul server Web di hosting, tra cui il nome del computer, la versione di ASP.NET in esecuzione, il nome di dominio e l'ora del server.

    • Variabili del server di ASP.NET. Questa sezione fornisce informazioni dettagliate sui numerosi dettagli del protocollo HTTP (denominati variabili HTTP) e i valori che fanno parte di ogni richiesta di pagina Web.

    • Informazioni sul runtime HTTP. In questa sezione vengono fornite informazioni dettagliate sulla versione di Microsoft .NET Framework in cui è in esecuzione la pagina Web, il percorso, i dettagli sulla cache e così via. (Come si è appreso in Introduzione alla programmazione Web ASP.NET usando la sintassi Razor, ASP.NET pagine Web che usano la sintassi Razor sono basate sulla tecnologia server Web ASP.NET Microsoft, che si basa su una vasta libreria di sviluppo software denominata .NET Framework.

    • Variabili di ambiente. Questa sezione fornisce un elenco di tutte le variabili di ambiente locali e dei relativi valori nel server Web.

      Una descrizione completa di tutte le informazioni sul server e sulle richieste esula dall'ambito di questo articolo, ma è possibile notare che l'helper ServerInfo restituisce molte informazioni di diagnostica. Per altre informazioni sui valori restituiti ServerInfo , vedere Variabili di ambiente riconosciute nel sito Web Microsoft TechNet e variabili del server IIS nel sito Web MSDN.

Incorporamento di espressioni di output per visualizzare i valori di pagina

Un altro modo per vedere cosa accade nel codice consiste nell'incorporare espressioni di output nella pagina. Come si sa, è possibile restituire direttamente il valore di una variabile aggiungendo qualcosa di simile @myVariable o @(subTotal * 12) alla pagina. Per il debug, è possibile inserire queste espressioni di output in punti strategici nel codice. In questo modo è possibile visualizzare il valore delle variabili chiave o il risultato dei calcoli durante l'esecuzione della pagina. Al termine del debug, è possibile rimuovere le espressioni o impostarle come commento. Questa procedura illustra un modo tipico per usare espressioni incorporate per eseguire il debug di una pagina.

  1. Creare una nuova pagina WebMatrix denominata OutputExpression.cshtml.

  2. Sostituire il contenuto della pagina con quanto segue:

    <!DOCTYPE html>
<html>
    <head>
        <title></title>
    </head>
    <body>   

    @{
        var weekday = DateTime.Now.DayOfWeek;
        // As a test, add 1 day to the current weekday.
        if(weekday.ToString() != "Saturday") {
            // If weekday is not Saturday, simply add one day.
            weekday = weekday + 1; 
        }
        else {
            // If weekday is Saturday, reset the day to 0, or Sunday.
            weekday = 0; 
        }
        // Convert weekday to a string value for the switch statement.
        var weekdayText = weekday.ToString(); 

        var greeting = "";
        
        switch(weekdayText) 
        { 
            case "Monday":
                greeting = "Ok, it's a marvelous Monday."; 
                break; 
            case "Tuesday":
                greeting = "It's a tremendous Tuesday.";
                break; 
            case "Wednesday":
                greeting = "Wild Wednesday is here!";
                break; 
            case "Thursday":
                greeting = "All right, it's thrifty Thursday.";
                break;
            case "Friday":
                greeting = "It's finally Friday!";
                break;
            case "Saturday":
                greeting = "Another slow Saturday is here.";
                break;
            case "Sunday":
                greeting = "The best day of all: serene Sunday.";
                break;
            default:
                break; 
        }
    }
    
    <h2>@greeting</h2>

    </body>
</html>

    Nell'esempio viene utilizzata un'istruzione switch per controllare il valore della weekday variabile e quindi visualizzare un messaggio di output diverso a seconda del giorno della settimana. Nell'esempio, il if blocco all'interno del primo blocco di codice modifica arbitrariamente il giorno della settimana aggiungendo un giorno al valore del giorno feriale corrente. Si tratta di un errore introdotto a scopo illustrativo.

  3. Salvare la pagina ed eseguirla in un browser.

    Nella pagina viene visualizzato il messaggio relativo al giorno sbagliato della settimana. Qualunque giorno della settimana sia effettivamente, il messaggio verrà visualizzato per il giorno successivo. Anche se in questo caso si sa perché il messaggio è disattivato (perché il codice imposta deliberatamente il valore del giorno errato), in realtà è spesso difficile sapere dove si verificano errori nel codice. Per eseguire il debug, è necessario scoprire cosa accade al valore di oggetti chiave e variabili, weekdayad esempio .

  4. Aggiungere espressioni di output inserendo @weekday come illustrato nelle due posizioni indicate dai commenti nel codice. Queste espressioni di output visualizzeranno i valori della variabile in quel punto dell'esecuzione del codice.

    var weekday = DateTime.Now.DayOfWeek;
// DEBUG: Display the initial value of weekday. 
@weekday

// As a test, add 1 day to the current weekday.
if(weekday.ToString() != "Saturday") {
    // If weekday is not Saturday, simply add one day.
    weekday = weekday + 1; 
}
else {
    // If weekday is Saturday, reset the day to 0, or Sunday.
    weekday = 0; 
}

// DEBUG: Display the updated test value of weekday.
@weekday

// Convert weekday to a string value for the switch statement.
var weekdayText = weekday.ToString();

  5. Salvare ed eseguire la pagina in un browser.

    La pagina visualizza prima il giorno reale della settimana, quindi il giorno aggiornato della settimana risultante dall'aggiunta di un giorno e quindi il messaggio risultante dall'istruzione switch . L'output delle due espressioni di variabile (@weekday) non ha spazi tra i giorni perché non sono stati aggiunti tag HTML <p> all'output. Le espressioni sono solo per il test.

    Debug-2

    Ora è possibile vedere dove si trova l'errore. Quando si visualizza per la prima volta la weekday variabile nel codice, viene visualizzato il giorno corretto. Quando lo visualizzi la seconda volta, dopo il blocco if nel codice, il giorno è sfasato di uno. Quindi sai che qualcosa è successo tra la prima e la seconda apparizione della variabile del giorno della settimana. Se si trattasse di un bug reale, questo tipo di approccio consente di restringere la posizione del codice che causa il problema.

  6. Correggere il codice nella pagina rimuovendo le due espressioni di output aggiunte e rimuovendo il codice che modifica il giorno della settimana. Il blocco di codice rimanente completo è simile all'esempio seguente:

    @{
    var weekday = DateTime.Now.DayOfWeek;
    var weekdayText = weekday.ToString(); 

    var greeting = "";
        
    switch(weekdayText) 
    { 
        case "Monday":
            greeting = "Ok, it's a marvelous Monday."; 
            break; 
        case "Tuesday":
            greeting = "It's a tremendous Tuesday.";
            break; 
        case "Wednesday":
            greeting = "Wild Wednesday is here!";
            break; 
        case "Thursday":
            greeting = "All right, it's thrifty Thursday.";
            break;
        case "Friday":
            greeting = "It's finally Friday!";
            break;
        case "Saturday":
            greeting = "Another slow Saturday is here.";
            break;
        case "Sunday":
            greeting = "The best day of all: serene Sunday.";
            break;
        default:
            break; 
    }
}

  7. Apri la pagina in un browser. Questa volta viene visualizzato il messaggio corretto per il giorno effettivo della settimana.

Utilizzo dell'helper ObjectInfo per visualizzare i valori degli oggetti

L'helper ObjectInfo visualizza il tipo e il valore di ogni oggetto passato. È possibile usarlo per visualizzare il valore delle variabili e degli oggetti nel codice (come è stato fatto con le espressioni di output nell'esempio precedente), oltre a visualizzare informazioni sul tipo di dati sull'oggetto.

  1. Aprire il file denominato OutputExpression.cshtml creato in precedenza.

  2. Sostituire tutto il codice nella pagina con il blocco di codice seguente:

    <!DOCTYPE html>
<html>
    <head>
        <title></title>
    </head>
    <body>
    @{
      var weekday = DateTime.Now.DayOfWeek;
      @ObjectInfo.Print(weekday)
      var weekdayText = weekday.ToString(); 
  
      var greeting = "";
  
      switch(weekdayText) 
      { 
          case "Monday":
              greeting = "Ok, it's a marvelous Monday."; 
              break; 
          case "Tuesday":
              greeting = "It's a tremendous Tuesday.";
              break; 
          case "Wednesday":
              greeting = "Wild Wednesday is here!";
              break; 
          case "Thursday":
              greeting = "All right, it's thrifty Thursday.";
              break;
          case "Friday":
              greeting = "It's finally Friday!";
              break;
           case "Saturday":
              greeting = "Another slow Saturday is here.";
              break;
           case "Sunday":
              greeting = "The best day of all: serene Sunday.";
              break;
          default:
              break; 
      }
    }
    @ObjectInfo.Print(greeting)
    <h2>@greeting</h2>

    </body>
</html>

  3. Salvare ed eseguire la pagina in un browser.

    Debug- 4

    In questo esempio l'helper ObjectInfo visualizza due elementi:

    • Tipo. Per la prima variabile, il tipo è DayOfWeek. Per la seconda variabile, il tipo è String.

    • Il valore. In questo caso, poiché nella pagina è già visualizzato il valore della variabile greeting, il valore viene visualizzato di nuovo quando si passa la variabile a ObjectInfo.

      Per oggetti più complessi, l'helper ObjectInfo può visualizzare altre informazioni, in pratica può visualizzare i tipi e i valori di tutte le proprietà di un oggetto.

Uso degli strumenti di debug in Visual Studio

Per un'esperienza di debug più completa, usare Visual Studio. Con Visual Studio è possibile impostare un punto di interruzione nel codice nella riga da controllare.

impostare il punto di interruzione

Quando si testa il sito Web, il codice in esecuzione si interrompe in corrispondenza del punto di interruzione.

raggiungere il punto di interruzione

È possibile esaminare i valori correnti delle variabili e procedere nel codice riga per riga.

vedere i valori

Per informazioni sull'uso del debugger integrato in Visual Studio per eseguire il debug di ASP.NET pagine Razor, vedere Programmazione di pagine Web ASP.NET (Razor) con Visual Studio.

Risorse aggiuntive

  • Last updated on