Descripción de las capacidades de depuración de ASP.NET AJAX

por Scott Cate

La capacidad de depurar código es una aptitud que todos los desarrolladores deben tener en su arsenal, independientemente de la tecnología que usen. Aunque muchos desarrolladores están acostumbrados a usar Visual Studio .NET o Web Developer Express para depurar aplicaciones ASP.NET que usan código VB.NET o C#, algunos no saben que también es muy útil para depurar código del lado cliente, como JavaScript. El mismo tipo de técnicas que se usan para depurar aplicaciones .NET también se puede aplicar a aplicaciones habilitadas para AJAX y, más específicamente, aplicaciones AJAX de ASP.NET.

Depurar aplicaciones de AJAX de ASP.NET

Dan Wahlin

La capacidad de depurar código es una aptitud que todos los desarrolladores deben tener en su arsenal, independientemente de la tecnología que usen. No hace falta decir que la comprensión de las diferentes opciones de depuración disponibles puede ahorrar una enorme cantidad de tiempo en un proyecto y quizás incluso algunos dolores de cabeza. Aunque muchos desarrolladores están acostumbrados a usar Visual Studio .NET o Web Developer Express para depurar aplicaciones ASP.NET que usan código VB.NET o C#, algunos no saben que también es muy útil para depurar código del lado cliente, como JavaScript. El mismo tipo de técnicas que se usan para depurar aplicaciones .NET también se puede aplicar a aplicaciones habilitadas para AJAX y, más específicamente, aplicaciones AJAX de ASP.NET.

En este artículo verá cómo se puede usar Visual Studio 2008 y otras herramientas para depurar aplicaciones AJAX de ASP.NET para localizar rápidamente errores y otros problemas. Esta explicación incluirá información sobre cómo habilitar Internet Explorer 6 o posterior para la depuración, mediante Visual Studio 2008 y el Explorador de scripts para recorrer el código, así como usar otras herramientas gratuitas, como el asistente de desarrollo web. También aprenderá a depurar aplicaciones AJAX de ASP.NET en Firefox mediante una extensión denominada Firebug, que le permite recorrer el código JavaScript directamente en el explorador sin ninguna otra herramienta. Por último, se le presentará a las clases de la biblioteca de AJAX de ASP.NET que pueden ayudar con varias tareas de depuración, como el seguimiento y las instrucciones de aserción de código.

Antes de intentar depurar páginas que se ven en Internet Explorer, hay algunos pasos básicos que deberá realizar para habilitarla para la depuración. Echemos un vistazo a algunos requisitos básicos de configuración que deben realizarse para empezar.

Configuración de Internet Explorer para la depuración

La mayoría de las personas no están interesadas en ver los problemas de JavaScript encontrados en un sitio web visto con Internet Explorer. De hecho, el usuario medio ni siquiera sabría qué hacer si viera un mensaje de error. Como resultado, las opciones de depuración están desactivadas de forma predeterminada en el explorador. Sin embargo, es muy sencillo activar la depuración y ponerla en práctica mientras desarrolla nuevas aplicaciones AJAX.

Para habilitar la funcionalidad de depuración, vaya a Herramientas Opciones de Internet en el menú Internet Explorer y seleccione la pestaña Opciones avanzadas. En la sección Exploración, asegúrese de que los siguientes elementos están desactivados:

• Deshabilitar la depuración de scripts (Internet Explorer)
• Deshabilitar la depuración de scripts (otro)

Aunque no es necesario, si intenta depurar una aplicación, probablemente querrá que los errores de JavaScript de la página sean visibles y obvios inmediatamente. Puede forzar que se muestren todos los errores con un cuadro de mensaje activando la casilla "Mostrar una notificación sobre cada error de script". Aunque esta es una excelente opción para activar mientras desarrolla una aplicación, puede resultar molesto rápidamente si simplemente está examinando otros sitios web, ya que las posibilidades de encontrar errores de JavaScript son bastante buenas.

En la figura 1 se muestra qué debe tener el cuadro de diálogo avanzado de Internet Explorer después de que se haya configurado correctamente para la depuración.

Figura 1: Configurar Internet Explorer para la depuración. (Haga clic para ver la imagen a tamaño completo)

Una vez activada la depuración, verá que aparece un nuevo elemento de menú en el menú Ver denominado Depurador de scripts. Dispone de dos opciones: Abrir e Interrumpir en la siguiente instrucción. Cuando se selecciona Abrir, se le pedirá que depure la página en Visual Studio 2008 (tenga en cuenta que Visual Web Developer Express también se puede usar para la depuración). Si Visual Studio .NET se está ejecutando actualmente, puede optar por usar esa instancia o para crear una nueva instancia. Cuando se selecciona Interrumpir en la instrucción siguiente, se le pedirá que depure la página cuando se ejecute el código JavaScript. Si el código javaScript se ejecuta en el evento onLoad de la página, puede actualizar la página para desencadenar una sesión de depuración. Si se ejecuta código JavaScript después de hacer clic en un botón, el depurador se ejecutará inmediatamente después de hacer clic en el botón.

Nota:

Si se ejecuta en Windows Vista con control de acceso de usuario (UAC) habilitado y tiene Visual Studio 2008 establecido para ejecutarse como administrador, Visual Studio no podrá asociarse al proceso cuando se le pida que se asocie. Para solucionar este problema, inicie Visual Studio primero y use esa instancia para depurar.

Aunque en la sección siguiente se muestra cómo depurar una página de AJAX de ASP.NET directamente desde Visual Studio 2008, el uso de la opción Depurador de scripts de Internet Explorer es útil cuando una página ya está abierta y le gustaría inspeccionarla de forma más completa.

Depuración con Visual Studio 2008

Visual Studio 2008 proporciona funciones de depuración en las que los desarrolladores de todo el mundo confían a diario para depurar aplicaciones .NET. El depurador integrado permite recorrer paso a paso el código, ver los datos del objeto, observar variables específicas, supervisar la pila de llamadas y mucho más. Además de depurar código VB.NET o C#, el depurador también es útil para depurar aplicaciones AJAX de ASP.NET y le permitirá recorrer el código JavaScript línea por línea. Los detalles que siguen se centran en las técnicas que se pueden usar para depurar archivos de script del lado cliente en lugar de proporcionar un discurso sobre el proceso general de depuración de aplicaciones mediante Visual Studio 2008.

El proceso de depuración de una página en Visual Studio 2008 se puede iniciar de varias maneras diferentes. En primer lugar, puede usar la opción Depurador de scripts de Internet Explorer mencionada en la sección anterior. Esto funciona bien cuando una página ya está cargada en el explorador y le gustaría iniciar la depuración. Como alternativa, puede hacer clic con el botón derecho en una página de .aspx en el Explorador de soluciones y seleccionar Establecer como página de inicio en el menú. Si está acostumbrado a depurar páginas ASP.NET, probablemente lo haya hecho antes. Una vez que se presiona F5, se puede depurar la página. Sin embargo, aunque normalmente puede establecer un punto de interrupción en cualquier lugar que desee en VB.NET o código de C#, no siempre es el caso de JavaScript como verá a continuación.

Scripts incrustados frente a externos

El depurador de Visual Studio 2008 trata el JavaScript incrustado en una página de forma diferente a los archivos JavaScript externos. Con los archivos de script externos, puede abrir el archivo y establecer un punto de interrupción en cualquier línea que elija. Los puntos de interrupción se pueden establecer haciendo clic en el área de la bandeja gris a la izquierda de la ventana del editor de código. Cuando JavaScript se inserta directamente en una página utilizando la etiqueta <script>, establecer un punto de interrupción haciendo clic en la zona gris de la bandeja no es una opción. Los intentos de establecer un punto de interrupción en una línea de script incrustado darán como resultado una advertencia que indica "This is not a valid location for a breakpoint" (Esto no es una ubicación válida para un punto de interrupción).

Para solucionar este problema, mueva el código a un archivo .js externo y haga referencia a él mediante el atributo src de la etiqueta de <script>:

<script type="text/javascript" src="Scripts/YourScript.js"></script>

¿Qué ocurre si mover el código a un archivo externo no es una opción o requiere más trabajo de lo que vale la pena? Aunque no se puede establecer un punto de interrupción mediante el editor, puede agregar la instrucción del depurador directamente al código donde desea iniciar la depuración. También puede usar la clase Sys.Debug disponible en la biblioteca de AJAX de ASP.NET para forzar el inicio de la depuración. Más adelante en este artículo obtendrá más información sobre la clase Sys.Debug.

En la lista 1 se muestra un ejemplo de uso de la palabra clave debugger. En este ejemplo se fuerza al depurador a interrumpirse justo antes de realizar una llamada a una función de actualización.

Lista 1. Usar la palabra clave del depurador para forzar que se interrumpa el depurador de .NET de Visual Studio.

function BuildPerson()
{
 var person =
 {
 FirstName: $get("txtFirstName").value,
 LastName: $get("txtLastName").value,
 Address:
 {
 Street: $get("txtStreet").value,
 City: $get("txtCity").value,
 State: $get("txtState").value
 }
 };
 debugger;
 UpdatePerson(person);
}

Una vez que se alcance la instrucción del depurador, se le pedirá que depure la página con Visual Studio .NET y pueda empezar a recorrer el código. Al hacer esto puede encontrarse con un problema al acceder a los archivos de script de la biblioteca AJAX de ASP.NET utilizados en la página, así que echemos un vistazo al uso del Explorador de Script de Visual Studio .NET.

Uso de Visual Studio .NET de Windows para depurar

Una vez iniciada una sesión de depuración y empiece a recorrer el código con la tecla F11 predeterminada, es posible que encuentre el cuadro de diálogo de error que se muestra en la figura 2 a menos que todos los archivos de script usados en la página estén abiertos y estén disponibles para la depuración.

Figura 2: cuadro de diálogo de error que se muestra cuando no hay código fuente disponible para la depuración. (Haga clic para ver la imagen a tamaño completo)

Este cuadro de diálogo se muestra porque Visual Studio .NET no está seguro de cómo acceder al código fuente de algunos de los scripts a los que hace referencia la página. Aunque esto puede ser bastante frustrante al principio, hay una solución sencilla. Una vez que haya iniciado una sesión de depuración y alcanzado un punto de interrupción, vaya a la ventana Depurar explorador de scripts de Windows en el menú de Visual Studio 2008 o use la tecla de acceso rápido Ctrl+Alt+N.

Nota:

Si no puede ver el menú Explorador de scripts en la lista, vaya a Herramientas>Personalizar>Comandos en el menú .NET de Visual Studio. Busque la entrada Depurar en la sección Categorías y haga clic en ella para mostrar todas las entradas de menú disponibles. En la lista Comandos, desplácese hacia abajo hasta el Explorador de scripts y arrástrelo hasta el menú Depurar Windows en mencionado anteriormente. Al hacerlo, la entrada del menú Explorador de scripts estará disponible cada vez que ejecute Visual Studio .NET.

El Explorador de scripts se puede usar para ver todos los scripts usados en una página y abrirlos en el editor de código. Una vez abierto el Explorador de scripts, haga doble clic en la página .aspx que se está depurando para abrirla en la ventana del editor de código. Realice la misma acción para todos los demás scripts que se muestran en el Explorador de scripts. Una vez abiertos todos los scripts en la ventana de código, puede presionar F11 (y usar las otras teclas de acceso rápido de depuración) para recorrer el código. En la figura 3 se muestra un ejemplo del Explorador de scripts. Enumera el archivo actual que se está depurando (Demo.aspx), así como dos scripts personalizados y dos scripts insertados dinámicamente en la página por el ASP.NET ScriptManager de AJAX.

Figura 3. El Explorador de scripts proporciona un acceso sencillo a los scripts usados en una página. (Haga clic para ver la imagen a tamaño completo)

También se pueden usar otras ventanas para proporcionar información útil a medida que recorre el código de una página. Por ejemplo, puede usar la ventana Variables locales para ver los valores de diferentes variables usadas en la página, la ventana Inmediato para evaluar variables o condiciones específicas y ver la salida. También puede usar la ventana Salida para ver las instrucciones de seguimiento escritas mediante la función Sys.Debug.trace (que se tratará más adelante en este artículo) o la función Debug.writeln de Internet Explorer.

A medida que recorra el código mediante el depurador, puede pasar el mouse sobre variables en el código para ver el valor asignado. Sin embargo, el depurador de scripts ocasionalmente no mostrará nada al pasar el mouse sobre una variable de JavaScript determinada. Para ver el valor, resalte la instrucción o variable que está intentando ver en la ventana del editor de código y, a continuación, pase el mouse sobre ella. Aunque esta técnica no funciona en todas las situaciones, muchas veces podrá ver el valor sin tener que buscar en otra ventana de depuración, como la ventana Variables locales.

Se puede ver un tutorial de vídeo que muestra algunas de las características que se describen aquí en http://www.xmlforasp.net.

Depuración con el asistente de desarrollo web

Aunque Visual Studio 2008 (y Visual Web Developer Express 2008) son herramientas de depuración muy capaces, hay opciones adicionales que también se pueden usar, que son más ligeras. Una de las herramientas más recientes que se van a publicar es el asistente de desarrollo web. Nikhil Kothari de Microsoft (uno de los arquitectos clave de AJAX de ASP.NET en Microsoft) escribió esta excelente herramienta que puede realizar muchas tareas diferentes, desde la simple depuración hasta la visualización de mensajes de solicitud y respuesta HTTP.

El asistente de desarrollo web se puede usar directamente dentro de Internet Explorer, lo que facilita su uso. Se inicia seleccionando Asistente para el desarrollo de herramientas web en el menú de Internet Explorer. Esto abrirá la herramienta en la parte inferior del navegador, lo cual es agradable ya que no tiene que salir del navegador para realizar varias tareas como el registro de mensajes de solicitud y respuesta HTTP. En la figura 4 se muestra el aspecto del asistente de desarrollo web en acción.

Figura 4: Asistente de desarrollo web (haga clic para ver la imagen a tamaño completo)

El asistente de desarrollo web no es una herramienta que vaya a utilizar para recorrer el código línea por línea, como ocurre con Visual Studio 2008. Sin embargo, se puede utilizar para ver la salida de seguimiento, evaluar fácilmente las variables en una secuencia de comandos o explorar los datos se encuentra dentro de un objeto JSON. También es muy útil para ver los datos que se pasan hacia y desde una página AJAX de ASP.NET y un servidor.

Una vez que el asistente de desarrollo web está abierto en Internet Explorer, la depuración de scripts debe habilitarse seleccionando Habilitar depuración de scripts en el menú del asistente desarrollo web como se muestra anteriormente en la figura 4. Esto permite que la herramienta intercepte los errores que se producen cuando se ejecuta una página. También permite un acceso sencillo a los mensajes de seguimiento que se generan en la página. Para ver la información de rastreo o ejecutar comandos de script para probar diferentes funciones dentro de una página, seleccione Mostrar Script Consola de Script en el menú del Asistente de desarrollo web. Esto proporciona acceso a una ventana de comandos y a una ventana inmediata simple.

Visualización de mensajes de seguimiento y datos de objetos JSON

La ventana inmediata se puede usar para ejecutar comandos de script o incluso cargar o guardar scripts que se usan para probar diferentes funciones en una página. La ventana de comandos muestra los mensajes de seguimiento o depuración escritos por la página que se está viendo. La lista 2 muestra cómo escribir un mensaje de seguimiento mediante la función Debug.writeln de Internet Explorer.

Lista 2. Escribir un mensaje de seguimiento del lado cliente mediante la clase Depurar.

function BuildPerson()
{
 var person =
 {
 FirstName: $get("txtFirstName").value,
 LastName: $get("txtLastName").value,
 Address:
 {
 Street: $get("txtStreet").value,
 City: $get("txtCity").value,
 State: $get("txtState").value
 }
 };
 Debug.writeln("Person name: " + person.LastName);
 UpdatePerson(person);
}

Si la propiedad LastName contiene un valor de Doe, el asistente de desarrollo web mostrará el mensaje "Nombre de persona: Doe" en la ventana de comandos de la consola de script (suponiendo que se ha habilitado la depuración). El asistente de desarrollo web también agrega un objeto debugService de nivel superior a páginas que se pueden usar para escribir información de seguimiento o ver el contenido de los objetos JSON. La lista 3 muestra un ejemplo de uso de la función de seguimiento de la clase debugService.

Lista 3. Usar la clase debugService del asistente de desarrollo web para escribir un mensaje de seguimiento.

function BuildPerson()
{
 var person =
 {
 FirstName: $get("txtFirstName").value,
 LastName: $get("txtLastName").value,
 Address:
 {
 Street: $get("txtStreet").value,
 City: $get("txtCity").value,
 State: $get("txtState").value
 }
 };
 if (window.debugService)
 {
 window.debugService.trace("Person name: " + person.LastName);
 }
 UpdatePerson(person);
}

Una buena característica de la clase debugService es que funcionará incluso si la depuración no está habilitada en Internet Explorer, lo que facilita el acceso siempre a los datos de seguimiento cuando se ejecuta el asistente de desarrollo web. Cuando la herramienta no se usa para depurar una página, se omitirán las instrucciones de seguimiento, ya que la llamada a window.debugService devolverá false.

La clase debugService también permite ver los datos del objeto JSON mediante la ventana inspector del asistente de desarrollo web. La lista 4 crea un objeto JSON simple que contiene datos de persona. Una vez creado el objeto, se realiza una llamada a la función inspect de la clase debugService para permitir que el objeto JSON se inspeccione visualmente.

Lista 4. Uso de la función debugService.inspect para ver los datos del objeto JSON.

function BuildPerson()
{
 var person =
 {
 FirstName: $get("txtFirstName").value,
 LastName: $get("txtLastName").value,
 Address:
 {
 Street: $get("txtStreet").value,
 City: $get("txtCity").value,
 State: $get("txtState").value
 }
 };
 if (window.debugService)
 {
 window.debugService.inspect("Person Object",person);
 }
 UpdatePerson(person);
}

Al llamar a la función GetPerson() de la página o a través de la ventana inmediata, aparecerá la ventana del cuadro de diálogo Inspector de objetos como se muestra en la figura 5. Las propiedades del objeto se pueden cambiar dinámicamente resaltando, cambiando el valor que se muestra en el cuadro de texto Valor y haciendo clic en el vínculo Actualizar. El uso del Inspector de objetos facilita la visualización de los datos de objetos JSON y el experimento con la aplicación de valores diferentes a las propiedades.

Errores de depuración

Además de permitir que se muestren los datos de seguimiento y los objetos JSON, el asistente de desarrollo web también puede ayudar a depurar errores en una página. Si se produce un error, se le pedirá que continúe con la siguiente línea de código o depurar el script (consulte la figura 6). La ventana de diálogo Error de script muestra la pila de llamadas completa, así como los números de línea para que pueda identificar fácilmente dónde se encuentran los problemas dentro de un script.

Figura 5: Uso de la ventana Inspector de objetos para ver un objeto JSON. (Haga clic para ver la imagen a tamaño completo)

Al seleccionar la opción de depuración, puede ejecutar instrucciones de script directamente en la ventana inmediata del asistente de desarrollo web para ver el valor de las variables, escribir objetos JSON, y mucho más. Si se vuelve a realizar la misma acción que desencadenó el error y Visual Studio 2008 está disponible en el equipo, se le pedirá que inicie una sesión de depuración para que pueda recorrer el código línea por línea, tal y como se ha comentado en la sección anterior.

Figura 6: Diálogo de error de script del Asistente de desarrollo web (Haga clic para ver la imagen a tamaño completo)

Inspección de mensajes de solicitud y respuesta

Durante la depuración de páginas AJAX de ASP.NET a menudo resulta útil ver los mensajes de solicitud y respuesta enviados entre una página y el servidor. Ver el contenido dentro de los mensajes permite ver si se pasan los datos adecuados, así como el tamaño de los mensajes. El Asistente de desarrollo web proporciona una excelente función de registro de mensajes HTTP que facilita la visualización de los datos como texto sin formato o en un formato más legible.

Para ver los mensajes de solicitud y respuesta de AJAX de ASP.NET, el registrador HTTP debe estar habilitado seleccionando Habilitar registro HTTP en el menú del Asistente de desarrollo web. Una vez habilitado, todos los mensajes enviados desde la página actual se pueden ver en el visor de registros HTTP al que se puede acceder seleccionando HTTP Mostrar registros HTTP.

Aunque ver el texto sin formato enviado en cada mensaje de solicitud o respuesta es ciertamente útil (y una opción en el Asistente de desarrollo web), a menudo es más fácil ver los datos de mensajes en un formato más gráfico. Una vez que se ha habilitado el registro HTTP y se han registrado mensajes, los datos del mensaje se pueden ver haciendo doble clic en el mensaje en el visor de registros HTTP. Esto le permite ver todos los encabezados asociados a un mensaje, así como el contenido real del mensaje. En la figura 7 se muestra un ejemplo de un mensaje de solicitud y un mensaje de respuesta vistos en la ventana Visor de registros HTTP.

Figura 7: Uso del Visor de registros HTTP para ver los datos de mensajes de solicitud y respuesta. (Haga clic para ver la imagen a tamaño completo)

El Visor de registros HTTP analiza automáticamente los objetos JSON y los muestra mediante una vista de árbol, lo que facilita la visualización rápida y sencilla de los datos de propiedades del objeto. Cuando se usa un UpdatePanel en una página AJAX de ASP.NET, el visor divide cada parte del mensaje en partes individuales, como se muestra en la figura 8. Esta es una excelente característica que facilita mucho la visualización y comprensión de lo que se encuentra en el mensaje en comparación con la visualización de los datos de mensajes sin procesar.

Figura 8: Un mensaje de respuesta de UpdatePanel visto utilizando el visor de registros HTTP. (Haga clic para ver la imagen a tamaño completo)

Hay otras herramientas que se pueden usar para ver los mensajes de solicitud y respuesta además del asistente de desarrollo web. Otra buena opción es Fiddler que está disponible de forma gratuita en http://www.fiddlertool.com. Aunque Fiddler no se analizará aquí, también es una buena opción cuando necesita inspeccionar exhaustivamente los encabezados y los datos del mensaje.

Depuración con Firefox y Firebug

Aunque Internet Explorer sigue siendo el explorador más usado, otros exploradores como Firefox se han vuelto bastante populares y se están usando cada vez más. Como resultado, querrá ver y depurar las páginas de AJAX de ASP.NET en Firefox, así como Internet Explorer para asegurarse de que las aplicaciones funcionan correctamente. Aunque Firefox no se puede vincular directamente a Visual Studio 2008 para la depuración, tiene una extensión denominada Firebug que se puede usar para depurar páginas. Firebug se puede descargar de forma gratuita en http://www.getfirebug.com.

Firebug proporciona un entorno de depuración completo que puede utilizarse para recorrer el código línea por línea, acceder a todos los scripts utilizados dentro de una página, ver las estructuras DOM, mostrar los estilos CSS e incluso realizar un seguimiento de los eventos que se producen en una página. Una vez instalado, se puede acceder a Firebug seleccionando Herramientas Firebug Abrir Firebug en el menú de Firefox. Al igual que el asistente de desarrollo web, Firebug se usa directamente en el explorador, aunque también se puede usar como una aplicación independiente.

Una vez que Firebug se está ejecutando, los puntos de interrupción se pueden establecer en cualquier línea de un archivo de JavaScript si el script está incrustado en una página o no. Para establecer un punto de interrupción, cargue primero la página adecuada que desea depurar en Firefox. Una vez cargada la página, seleccione el script que se va a depurar en la lista desplegable Scripts de Firebug. Se mostrarán todos los scripts usados por la página. Para establecer un punto de interrupción, haga clic en el área de la bandeja gris de Firebug en la línea donde debe ir el punto de interrupción, como haría en Visual Studio 2008.

Una vez que se ha establecido un punto de interrupción en Firebug, puede realizar la acción necesaria para ejecutar el script que debe depurarse, como hacer clic en un botón o actualizar el explorador para desencadenar el evento onLoad. La ejecución se detendrá automáticamente en la línea que contiene el punto de interrupción. En la figura 9 se muestra un ejemplo de un punto de interrupción que se ha desencadenado en Firebug.

Figura 9: Control de puntos de interrupción en Firebug. (Haga clic para ver la imagen a tamaño completo)

Una vez alcanzado un punto de interrupción, puede entrar, sobrepasar o salir del código utilizando los botones de flecha. A medida que recorre el código, las variables de script se muestran en la parte derecha del depurador, lo que le permite ver los valores y explorar en profundidad los objetos. Firebug también incluye una lista desplegable Pila de llamadas para ver los pasos de ejecución del script que llevaron a la línea actual que se está depurando.

Firebug también incluye una ventana de consola que se puede usar para probar diferentes instrucciones de script, evaluar variables y ver la salida del seguimiento. Para acceder a ella, haga clic en la pestaña Consola de la parte superior de la ventana Firebug. La página que se depura también se puede "inspeccionar" para ver su estructura DOM y su contenido haciendo clic en la pestaña Inspeccionar. Al pasar el mouse sobre los diferentes elementos DOM que se muestran en la ventana del inspector, se resaltará la parte adecuada de la página, lo que facilita la visualización de dónde se usa el elemento en la página. Los valores de atributo asociados a un elemento determinado se pueden cambiar "en directo" para experimentar con la aplicación de diferentes anchos, estilos, etc. a un elemento. Esta es una buena característica que le ahorra tener que cambiar constantemente entre el editor de código fuente y el explorador Firefox para ver cómo afectan los cambios simples a una página.

En la figura 10 se muestra un ejemplo del uso del inspector DOM para buscar un cuadro de texto denominado txtCountry en la página. El inspector de depuración de incendios también se puede usar para ver estilos CSS usados en una página, así como eventos que se producen, como el seguimiento de movimientos del mouse, clics de botón, y mucho más.

Figura 10: Uso del inspector DOM de Firebug. (Haga clic para ver la imagen a tamaño completo)

Firebug proporciona una manera ligera de depurar rápidamente una página directamente en Firefox, así como una excelente herramienta para inspeccionar diferentes elementos dentro de la página.

Compatibilidad con la depuración en AJAX de ASP.NET

La biblioteca AJAX de ASP.NET incluye muchas clases diferentes que se pueden usar para simplificar el proceso de agregar funcionalidades de AJAX a una página web. Puede usar estas clases para buscar elementos dentro de una página y manipularlos, agregar nuevos controles, llamar a servicios web e incluso controlar eventos. La biblioteca AJAX de ASP.NET también contiene clases que se pueden usar para mejorar el proceso de depuración de páginas. En esta sección se le presentará la clase Sys.Debug y verá cómo se puede usar en las aplicaciones.

Uso de la clase Sys.Debug

La clase Sys.Debug (una clase de JavaScript ubicada en el espacio de nombres Sys) se puede usar para realizar varias funciones diferentes, como escribir salida de seguimiento, realizar aserciones de código y forzar el error de código para que se pueda depurar. Se utiliza ampliamente en los archivos de depuración de la biblioteca AJAX de ASP.NET (instalada en C:\Archivos de programa\Microsoft ASP.NET\ASP.NET 2.0 AJAX Extensions\v1.0.61025\MicrosoftAjaxLibrary\System.Web.Extensions\1.0.61025.0 de forma predeterminada) para realizar pruebas condicionales (denominadas aserciones) que garanticen que los parámetros se pasan correctamente a las funciones, que los objetos contienen los datos esperados y para escribir instrucciones de seguimiento.

La clase Sys.Debug expone varias funciones diferentes que se pueden usar para controlar el seguimiento, las aserciones de código o los errores, como se muestra en la tabla 1.

Tabla 1. Funciones de clase Sys.Debug.

Nombre de la función	Descripción
assert(condition, message, displayCaller)	Confirma que el parámetro de condición es true. Si la condición que se está probando es false, se usará un cuadro de mensaje para mostrar el valor del parámetro de mensaje. Si el parámetro displayCaller es true, el método también muestra información sobre el autor de la llamada.
clearTrace()	Borra las instrucciones de salida de las operaciones de seguimiento.
fail(message)	Hace que el programa detenga la ejecución y se interrumpa en el depurador. El parámetro message se puede usar para proporcionar un motivo del error.
trace(message)	Escribe el parámetro de mensaje en la salida del seguimiento.
traceDump(object, name)	Genera los datos de un objeto en un formato legible. El parámetro name se puede usar para proporcionar una etiqueta para el volcado de seguimiento. Los subobjetos dentro del objeto que se va a volcar se escribirán de forma predeterminada.

El seguimiento del lado cliente se puede usar de la misma manera que la funcionalidad de seguimiento disponible en ASP.NET. Permite que se vean fácilmente mensajes diferentes sin interrumpir el flujo de la aplicación. La lista 5 muestra un ejemplo del uso de la función Sys.Debug.trace para escribir en el registro de seguimiento. Esta función simplemente toma el mensaje que se debe escribir como parámetro.

Lista 5. Uso de la función Sys.Debug.trace.

function BuildPerson()
{
 var address = new XmlForAsp.Address($get("txtStreet").value, $get("txtCity").value, $get("txtState").value, $get("txtZip").value);
 var person = new XmlForAsp.Person(null, $get("txtFirstName").value, $get("txtLastName").value, address);
 Sys.Debug.trace("Person's name: " + person.get_firstName() + " " + person.get_lastName());
 UpdatePerson(person);
}

Si ejecuta el código que se muestra en la lista 5, no verá ningún resultado de seguimiento en la página. La única manera de verlo es usar una ventana de consola disponible en Visual Studio .NET, asistente de desarrollo web o Firebug. Si desea ver la salida de seguimiento en la página, deberá agregar una etiqueta TextArea y asignarle un identificador TraceConsole como se muestra a continuación:

<textArea id="TraceConsole" rows="10" cols="50"></textArea>

Las instrucciones Sys.Debug.trace de la página se escribirán en TraceConsole TextArea.

En los casos en los que desea ver los datos contenidos en un objeto JSON, puede usar la función traceDump de la clase Sys.Debug. Esta función toma dos parámetros, incluido el objeto que se debe volcar en la consola de seguimiento y un nombre que se puede usar para identificar el objeto en la salida de seguimiento. La lista 6 muestra un ejemplo de uso de la función traceDump.

Lista 6. Uso de la función Sys.Debug.traceDump.

function UpdatePerson(person)
{
 //Dump contents of the person object to the trace output
 Sys.Debug.traceDump(person,"Person Data");

 alert("Person updated! " + person.get_firstName() + " " + person.get_lastName());
}

En la figura 11 se muestra la salida de llamar a la función Sys.Debug.traceDump. Observe que además de escribir los datos del objeto Person, también escribe los datos del subobjeto Address.

Además del seguimiento, la clase Sys.Debug también se puede usar para realizar aserciones de código. Las aserciones se usan para probar que se cumplen condiciones específicas mientras se ejecuta una aplicación. La versión de depuración de los scripts de biblioteca de AJAX de ASP.NET contiene varias instrucciones assert para probar una variedad de condiciones.

La lista 7 muestra un ejemplo del uso de la función Sys.Debug.assert para probar una condición. El código comprueba si el objeto Address es null antes de actualizar un objeto Person.

Figura 11: Salida de la función Sys.Debug.traceDump. (Haga clic para ver la imagen a tamaño completo.)

Lista 7. Uso de la función debug.assert.

function UpdatePerson(person)
{
 //Check if address is null
 Sys.Debug.assert(person.get_address() == null,"Address is null!",true);

 alert("Person updated! " + person.get_firstName() + " " + person.get_lastName());
}

Se pasan tres parámetros, incluida la condición que se va a evaluar, el mensaje que se va a mostrar si la aserción devuelve false y si se debe mostrar información sobre el autor de la llamada. En los casos en los que se produce un error en una aserción, se mostrará el mensaje, así como la información del autor de la llamada si el tercer parámetro era true. En la figura 12 se muestra un ejemplo del cuadro de diálogo de error que aparece si se produce un error en la aserción que se muestra en la lista 7.

La función final que se va a cubrir es Sys.Debug.fail. Cuando quiera forzar que el código produzca un error en una línea determinada de un script, puede agregar una llamada Sys.Debug.fail en lugar de la instrucción del depurador que se usa normalmente en las aplicaciones de JavaScript. La función Sys.Debug.fail acepta un único parámetro de cadena que representa el motivo del error, como se muestra a continuación:

Sys.Debug.fail("My forced failure of script.");

Figura 12: Mensaje de error Sys.Debug.assert. (Haga clic para ver la imagen a tamaño completo.)

Cuando se encuentra una instrucción Sys.Debug.fail mientras se ejecuta un script, se mostrará el valor del parámetro message en la consola de una aplicación de depuración como Visual Studio 2008 y se le pedirá que depure la aplicación. Un caso en el que esto puede ser bastante útil es cuando no se puede establecer un punto de interrupción con Visual Studio 2008 en un script insertado, pero le gustaría que el código se detenga en una línea determinada para poder inspeccionar el valor de las variables.

Descripción de la propiedad ScriptMode del control ScriptManager

La biblioteca AJAX de ASP.NET incluye versiones de script de depuración y de lanzamiento que se instalan en C:\Archivos de programa\Microsoft ASP.NET\ASP.NET 2.0 AJAX Extensions\v1.0.61025\MicrosoftAjaxLibrary\System.Web.Extensions\1.0.61025.0 de forma predeterminada. Los scripts de depuración tienen un formato agradable, fácil de leer y tienen varias llamadas Sys.Debug.assert dispersas a lo largo de ellos mientras que los scripts de versión tienen espacios en blanco eliminados y usan la clase Sys.Debug con moderación para minimizar su tamaño general.

El control ScriptManager que se añade a las páginas AJAX de ASP.NET lee el atributo de depuración del elemento de compilación en web.config para determinar qué versiones de los scripts de la biblioteca debe cargar. Sin embargo, puede controlar si los scripts de depuración o versión se cargan (scripts de biblioteca o scripts personalizados propios) cambiando la propiedad ScriptMode. ScriptMode acepta una enumeración ScriptMode cuyos miembros incluyen Auto, Debug, Release e Inherit.

ScriptMode tiene como valor predeterminado un valor de Auto, lo que significa que ScriptManager comprobará el atributo de depuración en web.config. Cuando la depuración sea false, el ScriptManager cargará la versión de lanzamiento de los scripts de la biblioteca AJAX de ASP.NET. Cuando la depuración es true, se cargará la versión de depuración de los scripts. Al cambiar la propiedad ScriptMode a Release o Debug, se forzará a ScriptManager a cargar los scripts adecuados independientemente del valor que tenga el atributo debug en web.config. La lista 8 muestra un ejemplo del uso del control ScriptManager para cargar scripts de depuración desde la biblioteca AJAX de ASP.NET.

Lista 8. Carga de scripts de depuración mediante ScriptManager.

<asp:ScriptManager ID="ScriptManager1" runat="server" ScriptMode="Debug"></asp:ScriptManager>

También puede cargar diferentes versiones (depuración o versión) de sus propios scripts personalizados mediante la propiedad Scripts de ScriptManager junto con el componente ScriptReference, como se muestra en la lista 9.

Lista 9. Carga de scripts personalizados mediante ScriptManager.

<asp:ScriptManager ID="ScriptManager1" runat="server">
 <Scripts>
 <asp:ScriptReference Path="~/Scripts/Person.js" ScriptMode="Debug"/>
 </Scripts>
</asp:ScriptManager>

Nota:

Si va a cargar scripts personalizados mediante el componente ScriptReference, debe notificar al ScriptManager cuando el script haya terminado de cargarse agregando el código siguiente en la parte inferior del script:

if (typeof(Sys) !== 'undefined') Sys.Application.notifyScriptLoaded();

El código que se muestra en la lista 9 indica al ScriptManager que busque una versión de depuración del script Person para que busque automáticamente Person.debug.js en lugar de Person.js. Si no se encuentra el archivo Person.debug.js, se producirá un error.

En los casos en los que quiera que se cargue una versión de depuración o versión de un script personalizado en función del valor de la propiedad ScriptMode establecida en el control ScriptManager, puede establecer la propiedad ScriptReference del control ScriptMode en Inherit. Esto hará que se cargue la versión adecuada del script personalizado en función de la propiedad ScriptMode del ScriptManager, como se muestra en la lista 10. Dado que la propiedad ScriptMode del control ScriptManager está establecida en Depurar, el script de Person.debug.js se cargará y se usará en la página.

Lista 10. Heredar el ScriptMode del ScriptManager para scripts personalizados.

<asp:ScriptManager ID="ScriptManager1" runat="server" ScriptMode="Debug">
 <Scripts>
 <asp:ScriptReference Path="~/Scripts/Person.js" ScriptMode="Inherit"/>
 </Scripts>
</asp:ScriptManager>

Mediante el uso de la propiedad ScriptMode adecuadamente, puede depurar aplicaciones más fácilmente y simplificar el proceso general. Los scripts de versión de la biblioteca AJAX de ASP.NET son bastante difíciles de recorrer y leer, ya que el formato de código se ha quitado mientras que los scripts de depuración tienen un formato específico para fines de depuración.

Conclusión

La tecnología AJAX de Microsoft ASP.NET proporciona una base sólida para crear aplicaciones habilitadas para AJAX que pueden mejorar la experiencia general del usuario final. Sin embargo, como ocurre con cualquier tecnología de programación, es seguro que surgirán errores y otros problemas de aplicación. Conocer las diferentes opciones de depuración disponibles puede ahorrar mucho tiempo y dar lugar a un producto más estable.

En este artículo se han introducido varias técnicas diferentes para depurar páginas AJAX de ASP.NET, como Internet Explorer con Visual Studio 2008, Asistente para desarrollo web y Firebug. Estas herramientas pueden simplificar el proceso de depuración general, ya que puede acceder a los datos de variables, recorrer la línea de código por línea y ver instrucciones de seguimiento. Además de las distintas herramientas de depuración descritas, también ha visto cómo se puede usar la clase Sys.Debug de la biblioteca AJAX de ASP.NET en una aplicación y cómo se puede usar la clase ScriptManager para cargar versiones de depuración o versión de scripts.

Biografía

Dan Wahlin (Profesional más valioso de Microsoft para ASP.NET y servicios web XML) es instructor de desarrollo .NET y consultor de arquitectura en Interface Technical Training (www.interfacett.com). Dan fundó el sitio web XML para desarrolladores ASP.NET (www.XMLforASP.NET), forma parte de la oficina de ponentes de INETA y participa como ponente en varias conferencias. Dan es coautor de Professional Windows DNA (Wrox), ASP.NET: Tips, Tutorials and Code (Sams), ASP.NET 1.1 Insider Solutions, Professional ASP.NET 2.0 AJAX (Wrox), ASP.NET 2.0 MVP Hacks y es autor de XML for ASP.NET Developers (Sams). Cuando no está escribiendo código, artículos o libros, Dan disfruta componiendo y grabando música y jugando al golf y al baloncesto con su mujer y sus hijos.

Scott Cate ha trabajado con las tecnologías web de Microsoft desde 1997 y es el presidente de myKB.com (www.myKB.com) donde se especializa en escribir aplicaciones ASP.NET basadas en soluciones de software de Knowledge Base. Puede ponerse en contacto con Scott por correo electrónico en scott.cate@myKB.com o en su blog, ScottCate.com

Anterior