Depurar scripts de cliente

Completado

Casi todos los exploradores modernos tienen una extensión de depuración que permite capturar el tráfico de la red, analizar el contenido de la página y depurar los scripts de los clientes. Los siguientes conjuntos de herramientas son útiles para realizar operaciones de depuración:

  • Microsoft Edge (a través de las herramientas de desarrollo con F12). Para obtener más información, consulte Uso de la guía de las herramientas de desarrollo de F12.

  • Google Chrome (a través de las herramientas de desarrollo de F12)

  • Mozilla Firefox (mediante Firebug)

  • Apple Safari (mediante Web Inspector)

Ver recursos de script

Cuando se carga la página de formulario de la aplicación basada en modelo, todas las bibliotecas de scripts del cliente se cargan junto a la página web como recursos de script individuales. Dado el volumen de recursos de script que se necesitan para ejecutar una aplicación basada en modelo, puede ser difícil ubicar un archivo determinado con el que desee depurar. Al usar herramientas de depuración como Microsoft Edge, normalmente se recomienda anotar el nombre del archivo y usar las funciones de búsqueda de la herramienta para ubicar los archivos de script.

Escribir mensajes en la consola

El uso del método window.alert al depurar problemas de JavaScript o la instrucción del depurador para interrumpir la ejecución todavía se utilizan comúnmente para solucionar problemas de código en la aplicación. Sin embargo, ahora que todos los exploradores modernos proporcionan un fácil acceso a las herramientas de depuración, no es un procedimiento recomendado, especialmente cuando otros usuarios pueden estar utilizando la aplicación que está depurando actualmente. Estas llamadas de depuración a menudo también se dejan inadvertidamente en el código, lo que causa problemas a los usuarios de la aplicación en producción.

Plantéese escribir sus mensajes en la consola. La siguiente es una pequeña función que puede agregar a sus bibliotecas para enviar cualquier mensaje que desee ver a la consola cuando se abra.

function writeToConsole(message)
{
 if (typeof console != 'undefined') {
  console.log(message);
 }
}

A diferencia del método de alerta, si olvida eliminar cualquier código que use esta función, las personas que usan la aplicación no verán sus mensajes. También es útil para solucionar problemas del comportamiento de la aplicación en producción sin interrumpir a los usuarios de la aplicación.

Utilizar Fiddler Auto-Responder para reemplazar el contenido de recursos web

Editar constantemente recursos web cuando están en desarrollo puede resultar difícil y consumir mucho tiempo. Debe volver a publicar los archivos dentro de una solución en cada edición y asegurarse de borrar la memoria caché del explorador de la versión anterior de los recursos. Además, si varios desarrolladores comparten el entorno, puede ser perjudicial para otros.

Para mejorar la eficiencia, considere el uso de una herramienta como Auto-Responder en Telerik Fiddler para reemplazar el contenido de un recurso web con contenido de un archivo local, en lugar de cargarlo y volver a publicarlo cada vez. Se pueden considerar otras herramientas de terceros que también admiten la edición en vivo. Para obtener más información sobre cómo instalar y configurar Fiddler Auto-Responder, consulte Desarrollo de recursos web de script con Fiddler AutoResponder.