Introducción a la depuración de sitios de ASP.NET Web Pages (Razor)

por Tom FitzMacken

En este artículo se explican varias maneras de depurar páginas en un sitio web de ASP.NET Web Pages (Razor). La depuración es el proceso de búsqueda y corrección de errores en las páginas de códigos.

Aprenderá lo siguiente:

  • Cómo mostrar información que ayuda a analizar y depurar páginas.
  • Cómo usar herramientas de depuración en Visual Studio.

Estas son las características de ASP.NET presentadas en el artículo:

  • El asistente ServerInfo.
  • Asistente ObjectInfo.

Versiones de software

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

Este tutorial también funciona con ASP.NET Web Pages 2. Puede usar WebMatrix 3, pero no se admite el depurador integrado.

Un aspecto importante de la resolución de errores y problemas en el código es evitarlos desde el principio. Puede hacerlo colocando en bloques las secciones de su código susceptibles de provocar errores en bloques try/catch. Para obtener más información, consulte la sección sobre el control de errores en Introducción a ASP.NET programación web mediante la sintaxis de Razor.

El asistente de ServerInfo es una herramienta de diagnóstico que proporciona información general sobre el entorno del servidor web que hospeda la página. También muestra la información de solicitud HTTP que se envía cuando un explorador solicita la página. El asistente de ServerInfo muestra la identidad del usuario actual, el tipo de explorador que realizó la solicitud, etc. Este tipo de información puede ayudarle a solucionar problemas comunes.

  1. Cree una nueva página web denominada ServerInfo.cshtml.

  2. Al final de la página, justo antes de la etiqueta de cierre </body>, agregue @ServerInfo.GetHtml():

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

    Puede agregar el código ServerInfo en cualquier parte de la página. Pero agregarlo al final mantendrá su salida independiente del otro contenido de la página, lo que facilita la lectura.

    Nota:

    Importante Debe quitar cualquier código de diagnóstico de las páginas web antes de mover páginas web a un servidor de producción. Esto se aplica tanto al asistente ServerInfo como a las demás técnicas de diagnóstico de este artículo que implican agregar código a una página. No desea que los visitantes del sitio web vean información sobre el nombre del servidor, los nombres de usuario, las rutas de acceso en el servidor y detalles similares, ya que este tipo de información puede ser útil para las personas con intención malintencionada.

  3. Guarde la página y ejecútela en un explorador.

    Debugging-1

    El asistente de ServerInfo muestra cuatro tablas de información en la página:

    • Configuración del servidor. En esta sección se proporciona información sobre el servidor web de hospedaje, incluido el nombre del equipo, la versión de ASP.NET que está ejecutando, el nombre de dominio y la hora del servidor.

    • Variables de servidor de ASP.NET. En esta sección se proporcionan detalles sobre los muchos detalles del protocolo HTTP (denominados variables HTTP) y los valores que forman parte de cada solicitud de página web.

    • Información del entorno de ejecución HTTP. En esta sección se proporcionan detalles sobre la versión de Microsoft .NET Framework en la que se ejecuta la página web, la ruta de acceso, los detalles sobre la caché, etc. (Como ha aprendido en Introducción a programación web de ASP.NET mediante la sintaxis de Razor, ASP.NET Web Pages con la sintaxis de Razor se basan en la tecnología de servidor web ASP.NET de Microsoft, que se basa en una amplia biblioteca de desarrollo de software denominada .NET Framework).

    • Variables de entorno. En esta sección se proporciona una lista de todas las variables de entorno locales y sus valores en el servidor web.

      Una descripción completa de toda la información de servidor y solicitud está fuera del ámbito de este artículo, pero puede ver que el asistente de ServerInfo devuelve una gran cantidad de información de diagnóstico. Para obtener más información sobre los valores que devuelve ServerInfo, consulte Variables de entorno reconocidas en el sitio web de Microsoft TechNet y Variables de servidor IIS en el sitio web de MSDN.

Insertar expresiones de salida para mostrar valores de página

Otra manera de ver lo que sucede en el código es insertar expresiones de salida en la página. Como sabe, puede generar directamente el valor de una variable agregando algo como @myVariable o @(subTotal * 12) a la página. Para la depuración, puede colocar estas expresiones de salida en puntos estratégicos del código. Esto le permite ver el valor de las variables clave o el resultado de los cálculos cuando se ejecuta la página. Cuando haya terminado de depurar, puede quitar las expresiones o comentarlas. Este procedimiento muestra una manera típica de usar expresiones incrustadas para ayudar a depurar una página.

  1. Cree una página WebMatrix denominada OutputExpression.cshtml.

  2. Reemplace el contenido de la página por lo siguiente:

    <!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>
    

    En el ejemplo se usa una instrucción switch para comprobar el valor de la variable weekday y luego mostrar un mensaje de salida diferente en función del día de la semana que sea. En el ejemplo, el bloque if dentro del primer bloque de código cambia arbitrariamente el día de la semana agregando un día al valor actual de la semana. Se trata de un error introducido con fines ilustrativos.

  3. Guarde la página y ejecútela en un explorador.

    La página muestra el mensaje del día incorrecto de la semana. Sea cual sea el día de la semana que realmente sea, verá el mensaje para un día más tarde. Aunque en este caso sabe por qué el mensaje está desactivado (porque el código establece deliberadamente el valor de día incorrecto), en realidad a menudo es difícil saber dónde van mal las cosas en el código. Para depurar, debe averiguar lo que sucede con el valor de objetos y variables clave, como weekday.

  4. Agregue expresiones de salida insertando @weekday como se muestra en los dos lugares indicados por comentarios en el código. Estas expresiones de salida mostrarán los valores de la variable en ese momento en la ejecución del código.

    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. Guarde y ejecute la página en un explorador.

    La página muestra el día real de la semana en primer lugar, el día actualizado de la semana que resulta de agregar un día y luego el mensaje resultante de la instrucción switch. La salida de las dos expresiones de variable (@weekday) no tiene espacios entre los días porque no ha agregado ninguna etiqueta HTML <p> a la salida; las expresiones son solo para pruebas.

    Debugging-2

    Ahora puede ver dónde está el error. Cuando se muestra por primera vez la variable weekday en el código, se muestra el día correcto. Cuando se muestra la segunda vez, después del bloque if en el código, el día está desactivado en uno. Así que sabe que algo ha ocurrido entre la primera y la segunda aparición de la variable de día de la semana. Si se trata de un error real, este tipo de enfoque le ayudará a reducir la ubicación del código que está causando el problema.

  6. Corrija el código de la página quitando las dos expresiones de salida que agregó y quitando el código que cambia el día de la semana. El bloque de código completo restante tiene el siguiente aspecto:

    @{
        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. Ejecute la página en un explorador. Esta vez verá el mensaje correcto que se muestra para el día real de la semana.

Usar el asistente ObjectInfo para mostrar valores de objeto

El asistente de ObjectInfo muestra el tipo y el valor de cada objeto que se le pasa. Puede usarlo para ver el valor de variables y objetos en el código (como hizo con expresiones de salida en el ejemplo anterior), además de ver información sobre el tipo de datos sobre el objeto.

  1. Abra el archivo denominado OutputExpression.cshtml que creó anteriormente.

  2. Reemplace todo el código de la página por el siguiente bloque de código:

    <!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. Guarde y ejecute la página en un explorador.

    Debugging-4

    En este ejemplo, el asistente de ObjectInfo muestra dos elementos:

    • El tipo de la clase . Para la primera variable, el tipo es DayOfWeek. Para la segunda variable, el tipo es String.

    • Valor de tipo . En este caso, como ya se muestra el valor de la variable saludo en la página, el valor se vuelve a mostrar cuando se pasa la variable a ObjectInfo.

      Para objetos más complejos, el asistente de ObjectInfo puede mostrar más información básicamente, puede mostrar los tipos y valores de todas las propiedades de un objeto.

Uso de herramientas de depuración en Visual Studio

Para obtener una experiencia de depuración más completa, use Visual Studio. Con Visual Studio, puede establecer un punto de interrupción en el código en la línea que desea inspeccionar.

set breakpoint

Al probar el sitio web, el código en ejecución se detiene en el punto de interrupción.

reach breakpoint

Puede examinar los valores actuales de las variables y recorrer el código línea por línea.

see values

Para obtener información sobre el uso del depurador integrado en Visual Studio para depurar ASP.NET páginas de Razor, consulte Programación ASP.NET Web Pages (Razor) mediante Visual Studio.

Recursos adicionales