Share via

Información general sobre la depuración y la traza de aplicaciones habilitadas para AJAX

  • Artículo

Actualización: noviembre 2007

Las aplicaciones ASP.NET habilitadas para AJAX contienen una mezcla de código de servidor y código de cliente. El explorador también puede solicitar datos adicionales de forma asincrónica. Esto puede convertir la depuración de aplicaciones web habilitadas para AJAX en un desafío. Esta introducción explica algunas técnicas y herramientas que pueden ayudarle a depurar su código más fácilmente.

Nota:

Con la excepción de Visual Studio e Internet Explorer, los programas mencionados en este tema son herramientas de otros fabricantes y Microsoft no proporciona soporte para las mismas. Vea el sitio web de cada herramienta para obtener información sobre licencias y soporte.

Este tema contiene:

  • Escenarios

  • Información general

  • Referencia de clase

Escenarios

Puede utilizar los enfoques siguientes para depurar una aplicación ASP.NET habilitada para AJAX en las diferentes fases de desarrollo:

  • Habilitar la depuración en el archivo de configuración.

  • Utilizar trazas en el servidor.

  • Utilizar los métodos de la clase Sys.Debug para establecer puntos de interrupción y administrar el resultado del seguimiento.

  • Habilitar la depuración en su explorador.

  • Asociar el depurador de Visual Studio 2008 a su instancia de Internet Explorer o utilizar herramientas externas para depurar en otros exploradores.

  • Utilizar herramientas externas para capturar el tráfico HTTP.

Volver al principio

Información general

La arquitectura de AJAX en ASP.NET ofrece un modelo para los modos de lanzamiento y depuración. El modo de lanzamiento permite la comprobación de errores y el control de excepciones optimizados para el rendimiento, con un tamaño de script mínimo. El modo de depuración dispone de características de depuración más sólidas, como la comprobación de tipos y argumentos. Si crea versiones de depuración de archivos de script de cliente o recursos de script, ASP.NET ejecuta las versiones de depuración cuando la aplicación está en modo de depuración. Esto permite iniciar excepciones en los scripts de depuración, manteniendo un tamaño mínimo del código de lanzamiento.

Una clase de aplicación auxiliar de depuración, Sys.Debug, proporciona métodos para mostrar los objetos con un formato legible al final de una página web. También muestra los mensajes de seguimiento de la traza, permite utilizar aserciones y permite irrumpir en el depurador. La API del objeto Error extendida proporciona información útil sobre las excepciones y admite los modos de lanzamiento y depuración.

En las secciones siguientes se proporciona información detallada acerca de las técnicas y herramientas que puede utilizar para depuración y traza.

Configurar la aplicación para depuración

Para habilitar la depuración, agregue un elemento compilation al archivo raíz Web.config del sitio y, a continuación, establezca el atributo debug en true. Para obtener más información, vea Elemento compilation (Esquema de configuración de ASP.NET).

En el ejemplo siguiente se muestra una sección de un archivo Web.config que tiene establecido el atributo debug para depuración.

<configuration>
  <system.web>
    <compilation debug="true">
      <!-- etc. -->
    </compilation>
  </system.web>
<configuration>

Cuando la depuración está habilitada, ASP.NET utiliza la versión de depuración de Microsoft AJAX Library y las versiones de depuración de los archivos de script de cliente personalizados, si están disponibles.

Cambiar la aplicación del modo depuración al modo lanzamiento para su implementación

Cuando implemente una versión de lanzamiento de una aplicación ASP.NET habilitada para AJAX, establezca la aplicación en modo de lanzamiento. De esta manera, se asegura de que ASP.NET utiliza la versión de lanzamiento optimizada para el rendimiento de las bibliotecas de AJAX. Si ha creado versiones de depuración y de lanzamiento de sus archivos de script personalizados y de los recursos del script, ASP.NET también utilizará las versiones de lanzamiento. Para establecer la aplicación en modo de lanzamiento, haga lo siguiente:

  • En el archivo Web.config, si el elemento compilation contiene un atributo debug, asegúrese de que el atributo debug está establecido en false.

  • Asegúrese de que todas las páginas web que contienen un control ScriptManager tengan su propiedad ScriptMode establecida en Release.

El atributo debug de la directiva @ Page no afecta a las aplicaciones de AJAX en ASP.NET. El control ScriptManager sólo utiliza los valores del archivo Web.config y de sus propiedades IsDebuggingEnabled y ScriptMode para determinar si debe representar los scripts de depuración.

Trazas en el servidor

Si está utilizando trazas en el servidor para depurar las páginas web que tienen habilitada la representación parcial de la página, debe utilizar el visor de seguimiento de trazas (Trace.axd) para mostrar el resultado de la traza. Puede anexar el resultado de la traza al final de la página y se mostrará la primera vez que se represente la página. Sin embargo, la presentación de la traza no se actualiza como resultado de las devoluciones de datos asincrónicas, porque sólo cambia el contenido de los controles UpdatePanel que deban actualizarse. Para obtener más información sobre cómo usar el visor de seguimiento de trazas, vea Información general sobre el seguimiento en ASP.NET.

Nota:

La representación parcial de la página está habilitada cuando la página contiene un control ScriptManager cuya propiedad EnablePartialRendering está establecida en true. La página también debe contener uno o varios controles UpdatePanel.

Clase de aplicación auxiliar de depuración

ASP.NET dispone de la clase Sys.Debug para depurar aplicaciones cliente. Mediante llamadas a los métodos de la clase Sys.Debug, puede mostrar los objetos en formato legible al final de la página, mostrar mensajes de seguimiento de la traza, utilizar aserciones e irrumpir en el depurador.

Si utiliza Visual Studio e Internet Explorer, puede asociar el depurador de Visual Studio al explorador y ver los mensajes de seguimiento del depurador en la ventana Resultados. Si no utiliza Visual Studio, puede ver los mensajes de seguimiento del depurador en Internet Explorer creando un elemento textarea en la página y estableciendo su id. en TraceConsole. En Mozilla Firefox, puede ver los mensajes de traza del depurador mediante herramientas disponibles como extensiones. Los exploradores Apple Safari y Opera muestran los mensajes de traza en sus respectivas consolas de depuración.

En la siguiente tabla se enumeran los métodos de la clase Sys.Debug.

En el ejemplo siguiente se muestra cómo llamar a los métodos de la clase Sys.Debug:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" >
    <title>Untitled Page</title>
<script language="javascript" type="text/javascript">
function btnAssert_onclick() {
    var n;
    // Insert code intended to set n to a positive integer.
    if (false) n = 3;
    // Assert if n is not greater than 0.
    Sys.Debug.assert(n > 0, "n must be set to a positive integer.");
}

function btnFail_onclick() {
    var n;
    // Insert code intended to set n to a numeric value.
    if (false) n = 3;
    // Fail if n is not numeric.
    if (isNaN(n)) Sys.Debug.fail("The value of n must be a number.");
}

function btnTrace_onclick() {
    v = form1.text1.value;
    Sys.Debug.trace("Name set to " + "\"" + v + "\".");
    alert("Hello " + v + ".");
}

function btnDump_onclick() {
    Sys.Debug.traceDump(form1.text1, "Name textbox");
    alert("Hello " + form1.text1.value + ".");
}

function btnClear_onclick() {
    Sys.Debug.clearTrace()
    alert("Trace console cleared.");
}
</script>
</head>
<body>
<form id="form1" >
    <h2>Sys.Debug Methods Test Page</h2>
    <asp:ScriptManager ID="ScriptManager1" 
         />
    <p><b>Use these buttons to demonstrate the assert() and fail() 
    methods:</b><br />
    <input id="btnAssert" type="button" value="Assert" 
        style="width: 100px" 
        onclick="return btnAssert_onclick()" /> &nbsp
    <input id="btnFail" type="button" value="Fail" 
        style="width: 100px" onclick="return btnFail_onclick()" />
    </p><hr />
    <b>Use the textbox and buttons below to demonstrate tracing.</b>
    <br />
    <p>Enter your name here:<br />
    <input id="text1" maxlength="50" type="text" />
    <br />
    <br />
    <input id="btnTrace" type="button" value="Trace" 
        style="width: 100px" onclick="return btnTrace_onclick()" /><br />
    <input id="btnDump" type="button" value="TraceDump" 
        style="width: 100px" onclick="return btnDump_onclick()" /><br />
    <input id="btnClear" type="button" value="ClearTrace" 
        style="width: 100px" onclick="return btnClear_onclick()" /><br />
    <br /></p>
    View output in the TraceConsole textarea below.
    <br />
    <textarea id='TraceConsole' rows="10" cols="50" 
        title="TraceConsole"></textarea>
</form>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" >
    <title>Untitled Page</title>
<script language="javascript" type="text/javascript">
function btnAssert_onclick() {
    var n;
    // Insert code intended to set n to a positive integer.
    if (false) n = 3;
    // Assert if n is not greater than 0.
    Sys.Debug.assert(n > 0, "n must be set to a positive integer.");
}

function btnFail_onclick() {
    var n;
    // Insert code intended to set n to a numeric value.
    if (false) n = 3;
    // Fail if n is not numeric.
    if (isNaN(n)) Sys.Debug.fail("The value of n must be a number.");
}

function btnTrace_onclick() {
    v = form1.text1.value;
    Sys.Debug.trace("Name set to " + "\"" + v + "\".");
    alert("Hello " + v + ".");
}

function btnDump_onclick() {
    Sys.Debug.traceDump(form1.text1, "Name textbox");
    alert("Hello " + form1.text1.value + ".");
}

function btnClear_onclick() {
    Sys.Debug.clearTrace()
    alert("Trace console cleared.");
}
</script>
</head>
<body>
<form id="form1" >
    <h2>Sys.Debug Methods Test Page</h2>
    <asp:ScriptManager ID="ScriptManager1" 
         />
    <p><b>Use these buttons to demonstrate the assert() and fail() 
    methods:</b><br />
    <input id="btnAssert" type="button" value="Assert" 
        style="width: 100px" 
        onclick="return btnAssert_onclick()" /> &nbsp
    <input id="btnFail" type="button" value="Fail" 
        style="width: 100px" onclick="return btnFail_onclick()" />
    </p><hr />
    <b>Use the textbox and buttons below to demonstrate tracing.</b>
    <br />
    <p>Enter your name here:<br />
    <input id="text1" maxlength="50" type="text" />
    <br />
    <br />
    <input id="btnTrace" type="button" value="Trace" 
        style="width: 100px" onclick="return btnTrace_onclick()" /><br />
    <input id="btnDump" type="button" value="TraceDump" 
        style="width: 100px" onclick="return btnDump_onclick()" /><br />
    <input id="btnClear" type="button" value="ClearTrace" 
        style="width: 100px" onclick="return btnClear_onclick()" /><br />
    <br /></p>
    View output in the TraceConsole textarea below.
    <br />
    <textarea id='TraceConsole' rows="10" cols="50" 
        title="TraceConsole"></textarea>
</form>
</body>
</html>

Configurar Internet Explorer para depuración

De forma predeterminada, Internet Explorer pasa por alto los problemas que encuentra en JavaScript. Puede habilitar la depuración utilizando el procedimiento siguiente.

Para habilitar la depuración en Internet Explorer

  1. En el menú Herramientas, haga clic en Opciones de Internet.

  2. En la ficha Opciones avanzadas, desactive la casilla Deshabilitar la depuración de scripts (Internet Explorer) y la casilla Deshabilitar la depuración de scripts (otros).

  3. Active la casilla Mostrar una notificación sobre cada error de script.

  4. Para desactivar los mensajes de error descriptivos, desactive la casilla Mostrar mensajes de error HTTP descriptivos.

    Si los mensajes de error descriptivos están habilitados y una respuesta de error HTTP 500 del servidor tiene una longitud inferior a 513 bytes, Internet Explorer enmascara el contenido. En lugar de la información de error, Internet Explorer muestra un mensaje destinado a los usuarios finales, no a los programadores.

Asociar el depurador de Visual Studio a Internet Explorer

Para depurar el script de cliente, debe asociar un depurador a Internet Explorer. En Visual Studio, si inicia su aplicación para depuración (presionando F5 o utilizando el comando Iniciar depuración del menú Depurar ), el depurador se asocia automáticamente.

También puede asociar el depurador de Visual Studio a Internet Explorer cuando la aplicación ya se está ejecutando. Para ello, en el menú Depurar, haga clic en Asociar al proceso.... En el cuadro de diálogo Asociar al proceso, seleccione la instancia de Internet Explorer (iexplore.exe) a la que desea asociar el depurador.

Nota:

Si Internet Explorer está configurado para depuración, la columna Tipo de la instancia pertinente de Internet Explorer muestra Script, x86. Si sólo ve x86 en la columna Tipo, asegúrese de que ese Internet Explorer está configurado para depuración.

Si Internet Explorer encuentra un error de script y está configurado para la depuración de scripts, pero no está asociado a ningún depurador, el explorador le solicita que seleccione un depurador. Puede continuar sin depurar o asociar un depurador y ejecutar el código paso a paso.

Problemas de depuración conocidos de Internet Explorer y soluciones alternativas

Cuando depure aplicaciones de ASP.NET AJAX que utilizan Internet Explorer, tenga en cuenta los problemas siguientes y las soluciones alternativas:

  • Una vez asociado el depurador de Visual Studio a Internet Explorer, puede ver una lista de los scripts que se están depurando en la ventana Explorador de scripts. (Para mostrar esta ventana, en el menú Depurar, haga clic en Ventanas y, a continuación, haga clic en Explorador de scripts.) La biblioteca de clientes de ASP.NET AJAX aparecerá como un recurso comenzando por ScriptResource.axd?..., que el servidor genera dinámicamente del ensamblado de ASP.NET AJAX. Un problema conocido de Visual Studio podría impedir abrir el archivo. Si Visual Studio muestra un mensaje de error a este respecto, o si pasa por alto los clics en el nombre del archivo, cierre todos los archivos de script que están abiertos. A continuación, abra la página y seleccione los archivos de script que desea depurar.

  • No puede establecer puntos de interrupción en código JavaScript dentro de los elementos script de una página ASP.NET hasta el depurador haya ejecutado paso a paso el código JavaScript de esa página. Para solucionar este problema, establezca el punto de interrupción en la función de la que proviene la llamada y ejecute paso a paso el código de la página web ASP.NET. Después de que el depurador se haya detenido en una línea de código JavaScript de la página, puede establecer los puntos de interrupción como de costumbre. Otra manera de que el depurador reconozca los scripts de una página ASP.NET es crear un método en el archivo de paginación de ASP.NET que llame al método Sys.Debug.fail. Cuando se llama a este método, el depurador se detiene en la llamada a Sys.Debug.fail y permite establecer los puntos de interrupción en otra parte. Una tercera alternativa es colocar todo el código personalizado en archivos JavaScript externos.

  • Visual Studio permite establecer puntos de interrupción en la primera línea de una función JavaScript normal, pero no en la primera línea de métodos anónimos, que ASP.NET utiliza en las bibliotecas de AJAX. Si un método anónimo contiene sólo una línea de código, o si debe establecer un punto de interrupción en la primera línea de un método anónimo, inserte una línea ficticia de código. A continuación, puede establecer el punto de interrupción en la segunda línea del método.

Problemas conocidos de IIS 7.0

Cuando se ejecutan páginas ASP.NET habilitadas para AJAX mediante IIS 7.0 en Windows Vista, y el modo de canalización administrada está establecido en Integrada, los scripts procesados por la clase ScriptResourceHandler no se almacenan en la memoria caché. Sin embargo, los scripts se almacenan en la memoria caché cuando el modo de canalización administrada está establecido en Clásica.

Para obtener más información sobre el modo de canalización administrada de IIS 7.0, vea Upgrading ASP.NET Applications to IIS 7.0: Differences between IIS 7.0 Integrated Mode and Classic Mode.

Capturar el tráfico HTTP

Al desarrollar aplicaciones web, suele resultar útil supervisar el tráfico HTTP entre el servidor y el cliente. Una herramienta que puede realizar esta tarea es Fiddler, que se puede obtener en Fiddler PowerToy page, en el sitio web de MSDN. Fiddler se ejecuta como un proxy que registra todo el tráfico HTTP. Admite Internet Explorer y otros exploradores. Con Fiddler puede examinar cada solicitud y respuesta, incluidos encabezados, cookies y contenido del mensaje.

Depuración en Mozilla Firefox

Mozilla Firefox no se integra con el depurador de Visual Studio. Por consiguiente, no puede utilizar el depurador de Visual Studio para ejecutar paso a paso el código de cliente que se está ejecutando en Firefox. Sin embargo, Firefox admite alguna funcionalidad de depuración, como una consola de JavaScript. También puede instalar las extensiones siguientes disponibles en Mozilla para mejorar sus funciones de depuración:

  • FireBug permite a ejecutar paso a paso el script de cliente y examinar los elementos DOM de HTML. También proporciona una consola de scripts, una línea de comandos y otras herramientas.

  • JavaScript Debugger (también conocido como "Venkman") ofrece un entorno de depuración de JavaScript que incluye un explorador de código fuente y otras características.

  • Web Developer extension permite inspeccionar los estilos DOM y CSS.

Fiddler también funciona con Firefox. Sin embargo, debe configurar Firefox para enrutar las solicitudes HTTP a través del proxy que se está ejecutando en el puerto 8888 del equipo local. Para obtener más información, vea la página "Configuring Clients" en el sitio web de Fiddler.

Volver al principio

Referencia de clase

  • Sys.Debug (Clase)
    Proporciona métodos que definen puntos de interrupción y administran el resultado del seguimiento de traza.

Volver al principio

Vea también

Tareas

Información general sobre la localización de recursos para bibliotecas de componentes

Conceptos

Información general sobre AJAX en ASP.NET

Agregar funcionalidad AJAX y de cliente