Tutorial: Depurar páginas Web en Visual Web Developer

Artículo
10/07/2008

Actualización: noviembre 2007

Visual Web Developer proporciona herramientas de ayuda para localizar errores en páginas Web ASP.NET. En este tutorial trabajará con el depurador, que le permite recorrer línea por línea el código de la página y examinar los valores de las variables.

En el tutorial creará una página Web que contiene una calculadora simple que eleva un número al cuadrado. Después de crear la página (que incluirá un error deliberado) utilizará el depurador para examinar su ejecución.

Las tareas ilustradas en este tutorial incluyen:

Establecer puntos de interrupción.
Invocar al depurador desde una página de formularios Web Forms en un sitio Web del sistema de archivos.

Requisitos previos

Para poder completar este tutorial, necesitará:

Visual Web Developer y .NET Framework.

También debe poseer conocimientos generales sobre el trabajo con Visual Web Developer. Para obtener una introducción a Visual Web Developer, vea Tutorial: Crear una página Web básica en Visual Web Developer.

Crear el sitio y la página Web

En la primera parte del tutorial, creará una página que puede depurar.

Si ya ha creado un sitio Web con Visual Web Developer (por ejemplo, como se describe en el tema Tutorial: Crear una página Web básica en Visual Web Developer), puede utilizar ese sitio Web y pasar directamente al apartado sobre cómo agregar controles para la depuración, que figura más adelante en este tutorial. De lo contrario, cree un sitio Web y una página nuevos siguiendo estos pasos.

Para crear un sitio Web del sistema de archivos

Abra Visual Web Developer.
En el menú Archivo, haga clic en NuevoSitio Web.

Aparece el cuadro de diálogo Nuevo sitio Web.
En Plantillas instaladas de Visual Studio, haga clic en Sitio Web de ASP.NET.
En el cuadro Ubicación, haga clic en Sistema de archivos y escriba el nombre de la carpeta en la que desea conservar las páginas del sitio Web.

Por ejemplo, escriba el nombre de carpeta C:\WebSites.
En la lista Lenguaje, haga clic en el lenguaje de programación con el que prefiera trabajar.

El lenguaje de programación que ha elegido será el lenguaje predeterminado del sitio Web. Sin embargo, puede utilizar varios lenguajes en la misma aplicación Web creando páginas y componentes en lenguajes de programación diferentes. Para obtener información sobre cómo crear componentes con lenguajes diferentes, vea Carpetas de código compartido en sitios Web ASP.NET.
Haga clic en Aceptar.

Visual Web Developer crea la carpeta y una nueva página denominada Default.aspx.

Crear una página para depurarla

Comenzará creando una nueva página. Para este tutorial es importante que cree una nueva página tal como se especifica en el siguiente procedimiento.

Para agregar una página al sitio Web

Cierre la página Default.aspx.
En el Explorador de soluciones, haga clic con el botón secundario del mouse en el nombre del sitio Web, (por ejemplo, C:\WebSite) y, a continuación, elija Agregar nuevo elemento.
En Plantillas instaladas de Visual Studio, elija Web Forms.
En el cuadro Nombre, escriba DebugPage.aspx.
En la lista Lenguaje, elija el lenguaje de programación que prefiera utilizar.
Asegúrese de que está desactivada la casilla Colocar el código en un archivo independiente.

En este tutorial va a crear una página de un solo archivo con código y HTML en la misma página. El código para las páginas ASP.NET se puede ubicar en la página o en un archivo de clase independiente. Para obtener más información acerca de cómo mantener el código en un archivo independiente, vea Tutorial: Crear una página Web básica con separación de código en Visual Web Developer.
Haga clic en Agregar.

Visual Web Developer crea la nueva página y la abre en la vista Código fuente.

Ahora puede agregar controles a la página y, a continuación, agregar el código. El código será simple, pero deberá permitirle agregar después puntos de interrupción.

Para agregar controles y código para la depuración

Cambie a la vista Diseño y, desde la carpeta Estándar del Cuadro de herramientas, arrastre los siguientes controles a la página y establezca las propiedades correspondientes tal como se indica:

Control

Propiedades

Label

Id.: CaptionLabel

Text: (vacío)

TextBox

Id.: NumberTextBox

Text: (vacío)

Button

Id.: SquareButton

Text: Cuadrado

Label

Id.: ResultLabel

Text: (vacío)

Nota:

Para este tutorial, el diseño de la página no es importante.
Haga doble clic en el control Button para crear un controlador Click asociado.

Control	Propiedades
Label	Id.: CaptionLabel Text: (vacío)
TextBox	Id.: NumberTextBox Text: (vacío)
Button	Id.: SquareButton Text: Cuadrado
Label	Id.: ResultLabel Text: (vacío)

Nota:
Para este tutorial, el diseño de la página no es importante.

Agregue lógica al controlador Click para llamar a una función denominada Square a fin de elevar al cuadrado el número escrito por el usuario. El controlador podría tener una apariencia similar a la del ejemplo que se muestra a continuación.

Nota:
En el ejemplo de código se omite deliberadamente la comprobación de errores.

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();
}

Cree la función que eleva el número al cuadrado. Incluya un error en el código de modo que el número se sume a sí mismo, en lugar de multiplicarse. El código podría tener una apariencia similar a la del ejemplo que se muestra a continuación.
```
Function Square(number As Integer) As Integer
    Square = number + number
End Function
```
```
int Square(int number )
{    
    int Square;
    Square = number + number;
    return Square;
}
```

También puede agregar a la página código que cambie el texto de la etiqueta si es la primera vez que se ejecuta la página.

Para cambiar el control Label del título

En la vista Diseño, haga doble clic en la superficie de diseño (no en un control) para crear un controlador de eventos Page_Load.

Establezca el texto del control Caption Label como Escriba un número: si es la primera vez que se ejecuta la página, o como Escriba otro número: si no es la primera vez. El controlador tendrá una apariencia similar a la del ejemplo de código que se muestra a continuación.

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: " ;
}

Probar la página

Para asegurarse de que la página funciona, ejecútela en su estado actual.

Para ejecutar la página

Guarde la página.
Presione CTRL+F5 para ejecutar la página.
Escriba el número 3 y presione el botón Cuadrado.

Observe que el resultado es incorrecto porque hay un error en el programa. El resultado correcto es 9.
Cierre el explorador.

Depurar la página

En esta parte del tutorial utilizará el depurador para examinar el código de la página línea por línea mientras se ejecuta, agregará puntos de interrupción al código y después ejecutará la página en modo de depuración.

Empezará estableciendo los puntos de interrupción en el código. Un punto de interrupción es una línea en el código en la que se detiene la ejecución y se invoca al depurador.

Para establecer puntos de interrupción

Cambie a la vista Código fuente.
Haga clic con el botón secundario del mouse en la línea siguiente, elija Punto de interrupción y, a continuación, elija Insertar punto de interrupción.

Nota:

Puede alternar los puntos de interrupción presionando F9.
```
If Page.IsPostBack = False Then
```
```
if(Page.IsPostBack == false)
```
Establezca otro punto de interrupción en la siguiente línea del controlador SquareButton_Click:
```
result = Square(number)
```
```
result = Square(number);
```
Nota:

No se puede establecer un punto de interrupción en una instrucción que declare una variable.

Nota:
Puede alternar los puntos de interrupción presionando F9.

Nota:
No se puede establecer un punto de interrupción en una instrucción que declare una variable.

Cuando haya establecido al menos un punto de interrupción, podrá ejecutar el depurador.

Para ejecutar el depurador

En el menú Depurar, elija Iniciar depuración (o presione F5) para ejecutar la página en modo de depuración.

Si nunca ha ejecutado el depurador, es probable que la aplicación no esté configurada para admitir la depuración. De forma predeterminada, la depuración está desactivada en las aplicaciones por cuestiones de rendimiento (las páginas se ejecutan más lentamente en el depurador) y de seguridad. Visual Web Developer muestra un mensaje que indica lo que se debe hacer para habilitar la depuración.

El modificador para habilitar la depuración se almacena como valor de configuración en el archivo Web.config, que mantiene distintas opciones de configuración específicas del sitio. Si el archivo Web.config no existe, Visual Web Developer lo creará y realizará la correspondiente configuración del depurador.

Si ya existe el archivo Web.config pero no está habilitada la depuración, verá un mensaje algo distinto, en el que se indica que Visual Web Developer modificará el archivo Web.config.
Si ve el mensaje que le indica que no se ha habilitado la depuración, haga clic en Aceptar para habilitar la depuración.

En Visual Web Developer, el diseñador cambia al modo de depuración, en el que se muestran el código de la página y algunas ventanas del depurador.

El depurador ejecuta la página línea por línea. Cuando el depurador llega a la línea en la que se encuentra el punto de interrupción, se detiene y resalta la línea.

Dado que el punto de interrupción está en el controlador Page_Load, la página no ha finalizado todavía el procesamiento. El explorador está abierto, pero aún no se muestra la página.
En el menú Depurar, haga clic en Ventanas, haga clic en Inspección y, a continuación, haga clic en Inspección 1.

Nota:

Si está utilizando Visual Web Developer Express Edition, el depurador presenta sólo una ventana Inspección.

Con esta operación se abre una ventana Inspección, en la que puede especificar los valores de los que desea realizar un seguimiento.
En el editor, haga clic con el botón secundario del mouse en la parte IsPostBack de la expresión Page.IsPostBack y, a continuación, haga clic enAgregar inspección.

Con esta operación se agrega la expresión a la ventana Inspección y se muestra el valor actual de la propiedad (false) en la columna Valor. Si lo prefiere, puede escribir el nombre de una variable o de una propiedad en la columna Nombre de la ventana Inspección.
En el menú Depurar, elija Continuar para seguir con la ejecución o presione F5.

El comando Continuar indica al depurador que continúe hasta que llegue al siguiente punto de interrupción. El controlador de eventos Page_Load finaliza el procesamiento y la página se muestra en el explorador.
Especifique el valor 2 en el cuadro de texto y haga clic en el botón Cuadrado.

Se muestra de nuevo el depurador, con el punto de interrupción en la línea en el controlador Page_Load. En esta ocasión, la ventana Inspección muestra que el valor de Page.IsPostBack es true.
Presione de nuevo F5 para continuar.

El depurador procesa el controlador Page_Load y entra en el controlador SquareButton_Click, donde se detiene en el segundo punto de interrupción establecido.
En el menú Depurar, haga clic en Ventanas y, a continuación, haga clic en Variables locales.

Con esta operación se abre la ventana Variables locales, en la que se muestran los valores de todas las variables y objetos de la línea que se está ejecutando que están en el ámbito. La ventana Variables locales proporciona un método alternativo para ver estos valores, con la ventaja de que no es necesario establecer explícitamente una inspección de los elementos, aunque con el inconveniente de que la ventana podría contener más información de la que desea ver simultáneamente.

En la ventana Variables locales, verá que el valor de number es 2 y que el valor de result es 0.

Nota:

También puede ver el valor de cualquier variable del programa si mantiene el puntero del mouse sobre la variable.
En la columna Valor de la ventana Variables locales, haga clic con el botón secundario del mouse en la línea de la variable number y seleccione Editar valor. Edite el valor de la variable number y cámbielo a 5.

El valor 2 para la variable number no permite una comprobación adecuada del programa, porque tanto la suma como el cuadrado de 2 dan 4 como resultado. Por consiguiente, mientras el programa se está ejecutando, puede cambiar el valor de esta variable.
En el menú Depurar, elija Paso a paso para examinar la función Square o presione F11.

El comando Paso a paso hace que el depurador ejecute una línea y después se detenga de nuevo.
Continúe el examen paso a paso; para ello, presione F11 hasta llegar a la siguiente línea de código.
```
ResultLabel.Text = CStr(number) & " squared is " & CStr(result)
```
```
    ResultLabel.Text = NumberTextBox.Text + 
        " squared is " + result.ToString();
```
El depurador recorre el código línea por línea. Cuando el depurador ejecuta la función Square, se puede utilizar la ventana Variables locales para comprobar los datos pasados a la función (number) y el valor devuelto por la función (Square).
En el menú Depurar, haga clic en Ventanas y, a continuación, en Inmediato.

La ventana Inmediato permite ejecutar comandos. Puede utilizar la ventana para evaluar expresiones (por ejemplo, con el fin de obtener el valor de una propiedad).
En la ventana Inmediato, escriba la expresión siguiente y presione Entrar.
```
? NumberTextBox.Text
```
El signo de interrogación (?) es un operador de la ventana Inmediato que evalúa la expresión que lo sigue. En este ejemplo, va a evaluar la propiedad Text del control NumberTextBox en la página. Puede evaluar cualquier variable, propiedad de objeto o expresión que las combine, utilizando la misma sintaxis que utilizaría en el código.
En la ventana Inmediato, escriba lo siguiente y presione Entrar:
```
NumberTextBox.Text = "5"
```
Además de evaluar expresiones, la ventana Inmediato le permite cambiar variables o propiedades
Presione F5 para que continúe la ejecución del programa.

Cuando aparece la página, muestra el resultado de pasar 5 a la función Square. Además, el texto que contiene el cuadro de texto se ha cambiado a 5.

Nota:
Si está utilizando Visual Web Developer Express Edition, el depurador presenta sólo una ventana Inspección.

Nota:
También puede ver el valor de cualquier variable del programa si mantiene el puntero del mouse sobre la variable.

El resultado que se ve (10) no es correcto, ya que 10 no es el cuadrado de 5. Ahora puede corregir el error.

Para corregir el error y repetir la prueba

Pase del explorador a Visual Web Developer.

Nota:

No cierre la ventana del explorador.
En la función Square, cambie el operador "+" por el operador "*".

Dado que el código no se está ejecutando (la página ha finalizado el procesamiento), se encuentra en modo de edición y puede realizar cambios permanentes.
Presione CTRL+S para guardar la página.
En el menú Depurar, elija Eliminar todos los puntos de interrupción para que la página no se detenga cada vez que la ejecuta.

Nota:

También puede borrar los puntos de interrupción si presiona CTRL+MAYÚS+F9.
Cambie a la ventana del explorador.
Escriba 5 en el cuadro de texto y haga clic en el botón.

En esta ocasión, cuando ejecuta la página y especifica un valor, éste se eleva al cuadrado correctamente. Los cambios temporales que realizó anteriormente, como el de la propiedad Text del control NumberTextBox, no se han conservado, ya que sólo se aplicaban la última vez que se ejecutó la página.
Cierre el explorador para detener el depurador.

Nota:
No cierre la ventana del explorador.

Nota:
También puede borrar los puntos de interrupción si presiona CTRL+MAYÚS+F9.

Pasos siguientes

El depurador incluye características adicionales para ayudarle a trabajar con el código. Además, quizá le interese conocer técnicas de control de errores y métodos para supervisar el procesamiento de las páginas en tiempo de ejecución. Por ejemplo, podría interesarle explorar las opciones de seguimiento. Para obtener información detallada, vea Tutorial: Utilizar el seguimiento en Visual Web Developer para detectar errores en páginas Web.

Vea también

Otros recursos

Depurar en Visual Studio