Depurar script con las Herramientas de desarrollo

La característica Herramientas de desarrollo de Internet Explorer 8 proporciona un depurador de Microsoft JScript integrado y ligero que permite a los desarrolladores de software establecer puntos de interrupción y recorrer paso a paso el código de JScript del lado cliente sin salir del explorador. En este documento se describen las características de alto nivel del depurador de JScript. Para familiarizarse con las demás características de las Herramientas de desarrollo de Internet Explorer 8, consulte el artículo dedicado a descubrir las Herramientas de desarrollo de Internet Explorer; para obtener una referencia completa de los comandos de las Herramientas de desarrollo, consulte la referencia de la interfaz de usuario de las Herramientas de desarrollo.

• Introducción
• Iniciar la depuración
• Establecer los puntos de interrupción
• Controlar la ejecución
• Inspeccionar variables
• Inspeccionar la pila de llamadas
• Utilizar la consola para ejecutar instrucciones de código
• Utilizar la consola para registrar alertas y mensajes de error
• Notas
• Temas relacionados

Introducción

La depuración de JScript constituye una parte fundamental del desarrollo web. Gracias al depurador de JScript intuitivo y ligero, la característica de Herramientas de desarrollo aporta una experiencia de depuración de JScript integral tan simple como hacer clic. Una vez instalado Internet Explorer 8, los desarrolladores pueden depurar JScript en cualquier sitio cargado en Internet Explorer.

Para abrir Herramientas de desarrollo desde Internet Explorer 8, presione F12; como alternativa, en la barra de comandos Herramientas, haga clic en el botón Herramientas de desarrollo.

Nota: si bien el depurador de JScript se puede utilizar para depurar cualquier motor que implemente las interfaces IActiveScriptSite (tales como Microsoft Visual Basic Scripting Edition (VBScript)), únicamente se admite la depuración de JScript.

Iniciar la depuración

Ilustración 1. Interfaz de usuario de la pestaña Script

Con las Herramientas de desarrollo en la pestaña Script, inicie el proceso de depuración haciendo clic en el botón Iniciar depuración o presionando F5. Al hacer clic en este botón, se desencadenarán estos eventos:

• El cuadro de diálogo Depuración requiere actualización de página web permite actualizar la página. Si hace clic en Aceptar, se iniciará la depuración y la página se actualizará; si hace clic en Cancelar, la depuración no se iniciará y la página no se actualizará.
• Una vez se inicia la depuración, la ventana Herramientas de desarrollo se desancla automáticamente si está anclada a la instancia de Internet Explorer 8. Cuando se detenga la depuración, puede anclarla de nuevo a la instancia de Internet Explorer 8.

Para detener la depuración, haga clic en el botón Detener depuración o presione MAYÚS+F5.

Nota: el cuadro de diálogo Depuración requiere actualización de página web únicamente se muestra si no se ha habilitado la depuración de script para Internet Explorer. Al hacer clic en Aceptar en el cuadro de diálogo, se habilitará la depuración de script para esta instancia de Internet Explorer temporalmente, hasta que cierre la ventana. Para habilitar la depuración de script para todas las instancias de Internet Explorer, haga clic en la pestaña Opciones avanzadas del menú Opciones de Internet. A continuación, en la categoría Examinar, desactive la casilla Deshabilitar la depuración de scripts (Internet Explorer) y haga clic en Aceptar. Para que los cambios surtan efecto, cierre todas las instancias de Internet Explorer y, a continuación, ábralas de nuevo.

Nota: todos los scripts de una página, tanto los archivos independientes como los bloques de script integrados, están disponibles en el cuadro de lista desplegable de Script, con independencia de que se haya iniciado o no la depuración. Puede cambiar de un archivo a otro en cualquier momento mientras se encuentre en la pestaña del modo de script. El código fuente del archivo seleccionado actualmente aparece en el recuadro de contenido principal.

Establecer los puntos de interrupción

En el recuadro de contenido principal donde se muestra el código de script, se pueden establecer puntos de interrupción; para ello, se puede:

• Hacer clic en el número de línea para insertar o eliminar un punto de interrupción.
• Hacer clic con el botón secundario en una línea de código y seleccionar Insertar punto de interrupción.
• Colocar el cursor en una línea de código y presionar F9 para insertar o eliminar un punto de interrupción.

Los puntos de interrupción se pueden establecer tanto si el depurador está iniciado como si no. Una vez establecido un punto de interrupción, aparece el icono de punto de interrupción junto al número de línea del código; además, se resalta el código de esa línea.

Un punto de interrupción pausa inmediatamente la ejecución del script antes de la línea de punto de interrupción; el depurador resalta la próxima línea que se va a ejecutar. Durante la depuración, cualquier error en tiempo de ejecución hará que el depurador se interrumpa en la ubicación del error. Para evitar la interrupción en caso de error, desactive el botón de alternancia Error de interrupción o presione CTRL+MAYÚS+E. Mientras el depurador mantiene pausada la ejecución, el explorador no responde a ninguna intervención del usuario.

Ilustración 2. Configurar y administrar puntos de interrupción

Existe una lista de todos los puntos de interrupción disponible en la ficha Puntos de interrupción del depurador. En ella, encontrará la ubicación de todos los puntos de interrupción, junto con el nombre de archivo y el número de línea donde se ha establecido cada uno de ellos. Para ir a la ubicación de un punto de interrupción en el código fuente, haga doble clic en el punto de interrupción en la lista. Para desactivar el punto de interrupción sin quitarlo, desactive la casilla situada junto a él. Para quitar el punto de interrupción, haga clic en él con el botón secundario y seleccione Eliminar en el menú contextual. Internet Explorer conserva la información del punto de interrupción hasta que se cierran las Herramientas de desarrollo, aunque se navegue fuera del sitio actual.

Nota: existen varios casos en que punto de interrupción puede dejar de ser válido. Los puntos de interrupción no válidos se deshabilitan y sobre su icono se muestra un icono de advertencia. Un punto de interrupción deja de ser válido cuando se navega fuera del sitio en el que está establecido. Puede no ser válido si se establece en una ubicación incorrecta en modo de no depuración, o si se inicia la depuración en un lugar donde el depurador no encuentra ningún código coincidente. También puede perder su validez si se actualiza la página en la que se ha establecido y el código fuente cambia.

Cuando se establece un punto de interrupción, la ejecución se pausa cada vez que se encuentra ese punto. Si se desea que la ejecución se pause en el punto de interrupción únicamente cuando se cumpla determinada condición, debe establecerse una condición para ese punto de interrupción. Para establecer una condición de punto de interrupción, siga estos pasos:

1. Haga clic con el botón secundario en el punto de interrupción en el recuadro de contenido principal o en el recuadro de puntos de interrupción. Aparecerá un menú contextual.
2. Seleccione la opción Condición... Aparecerá un cuadro de diálogo.
3. Escriba la condición en el cuadro de diálogo Punto de interrupción condicional y haga clic en Aceptar.

En lo sucesivo, el depurador únicamente pausará la ejecución en este punto de interrupción cuando se cumpla la condición.

Controlar la ejecución

Los puntos de interrupción se utilizan para pausar la ejecución del script y permitir que el desarrollador examine el estado del código en ese punto. Cuando se detiene en un punto de interrupción, la ejecución se puede controlar mediante cualquiera de los botones de comando siguientes:

• Continuar

  Continúa ejecutando el script sin pausarlo, hasta que se encuentra otro punto de interrupción o un error de script. Método abreviado de teclado: F5.

• Interrumpir todo

  Pausa la ejecución inmediatamente antes de que se ejecute la siguiente instrucción de script. Haga clic en el botón o presione CTRL+MAYÚS+B para activar este comando; a continuación, realice las acciones que desea depurar.

• Error de interrupción

  Pausa la ejecución en el punto donde se ha producido el error. Este comando está activo de forma predeterminada. Si no desea que se pause la ejecución en estos puntos de error, haga clic en este botón para desactivar este comando; sin embargo, en ambos casos se presentará un mensaje de error en la consola por cada error encontrado. Método abreviado de teclado para activar o desactivar el comando alternativamente: CTRL+MAYÚS+E.

• Paso a paso por instrucciones

  Ejecuta la siguiente línea de script y pausa, aunque la próxima línea se encuentre dentro de un nuevo método. Método abreviado de teclado: F11.

• Paso a paso por procedimientos

  Continúa hasta la próxima línea de script del método actual y, a continuación, pausa. Resulta útil para no pasar por las llamadas a métodos. Método abreviado de teclado: F10.

• Paso a paso para salir

  Sigue ejecutando el script hasta la próxima línea del método que ha llamado al método actual. Resulta útil para salir de bucles y llamadas a métodos. Método abreviado de teclado: MAYÚS+F11.

Inspeccionar variables

Todas las variables se pueden inspeccionar en el recuadro Variables locales y en el recuadro Inspección. Para inspeccionar las variables:

• Inicie el depurador haciendo clic en Iniciar depuración.
• Establezca uno o varios puntos de interrupción a lo largo de la ruta de ejecución.
• A continuación, ejecute los scripts.

Durante la ejecución, el depurador pausará en el primer punto de interrupción que encuentre. Una vez pausada la ejecución, se pueden inspeccionar y editar las variables en los recuadros Variables locales e Inspección.

El recuadro Variables locales del depurador muestra el Nombre el Valor y el Tipo de todas las variables disponibles en el ámbito de ejecución actual. Si una variable está fuera del ámbito, no está disponible y ni se muestra en el recuadro Variables locales. Las variables y los objetos que están 'fuera de ámbito' se pueden examinar en cualquier momento en el recuadro Inspección.

Las variables se pueden inspeccionar desde ámbitos diferentes agregándolas al recuadro Inspección. Hay varias maneras de agregar variables al recuadro Inspección:

1. En el recuadro de contenido principal, seleccione texto de un script, haga clic con el botón secundario para activar el menú contextual y seleccione Agregar inspección. Se agregará ese texto a la lista de inspección.
2. En el recuadro Variables locales, haga clic con el botón secundario en una variable o en un objeto y seleccione Agregar inspección para agregarlo a la lista de inspección.
3. En el recuadro Inspección, seleccione Haga clic para agregar y, a continuación, escriba el nombre de la variable que desee inspeccionar. El texto Haga clic para agregar se encuentra en la parte inferior de la lista de inspección, pues es el último elemento de la lista del recuadro Inspección.

Ilustración 3. Inspeccionar variables en el recuadro Variables locales.

Con cada ejecución de una línea de código, el depurador actualiza los valores de las variables en los recuadros Variables locales e Inspección. Los valores actualizados se muestran en texto rojo. Para modificar el valor de una variable en el recuadro Variables locales o Inspección, haga doble clic en el valor, escriba otro nuevo y presione ENTRAR. Como alternativa, puede hacer clic con el botón secundario en el objeto y seleccionar Editar valor para comenzar la edición. Cuando haya finalizado, presione ENTRAR para confirmar o ESC para cancelar la edición.

Inspeccionar la pila de llamadas

El recuadro Pila de llamadas proporciona una lista de contextos de ejecución cada vez que el depurador pausa la ejecución en un punto de interrupción. Para saltar a cualquier elemento de la pila, haga doble clic en él. El depurador mostrará ese método en el recuadro de contenido principal. A partir de ahí se pueden inspeccionar las variables de ese contexto de ejecución en los recuadros Variables locales e Inspección.

Utilizar la consola para ejecutar instrucciones de código

El recuadro Consola del depurador proporciona una consola para ejecutar instrucciones de script sobre la marcha. Escriba cualquier instrucción o nombre de variable válida y presione ENTRAR (o haga clic en Ejecutar script) para ejecutar esa instrucción en el contexto de la página actual, exactamente en el punto donde está pausada la ejecución.

Para establecer los valores de las variables, se utiliza la sintaxis de asignación estándar:

s = 'my query string';

Al hacer clic en el botón Modo de varias líneas, se expande la ventana de entrada para permitir la especificación de varias líneas. También cambia el comportamiento de la tecla ENTRAR, de tal forma que crea una nueva línea, en lugar de ejecutar el script. Aquí, puede escribir varias líneas de código y, a continuación, ejecutarlas haciendo clic en Ejecutar script. La ventana de entrada, cuyo tamaño se puede cambiar, proporciona controles adicionales en el menú contextual.

El recuadro Consola se puede utilizar en cualquier momento, aunque no se haya iniciado el depurador. Cuando la ejecución se detiene en un punto de interrupción, los comandos especificados en este recuadro se ejecutan en el ámbito de ejecución del punto de interrupción; si la ejecución no se pausa, se ejecutan en el ámbito global.

Utilizar la consola para registrar alertas y mensajes de error

Todos los errores de script de una instancia determinada de Internet Explorer se registran en el recuadro Consola cuando se abren las Herramientas de desarrollo. Para navegar a la ubicación del error, haga clic en la información de origen proporcionada en el error.

Los mensajes también se pueden registrar en la Consola mediante las API console.log. En lugar de utilizar window.alert() y generar una cantidad innumerable de cuadros de diálogo, llame a console.log para que las cadenas de salida se envíen al recuadro Consola. Para diferenciar unos mensajes de otros, utilice API console.log distintas; por ejemplo:

• console.log
• console.info
• console.warn
• console.error
• console.assert

Se puede llamar a estos comandos de consola con una lista de argumentos que se concatenarán para generar la cadena de salida. Además, se puede dar formato a los argumentos mediante modelos de sustitución del tipo de printf. Por ejemplo, se puede llamar a console.log de una de las maneras siguientes:

• console.log("La variable x = " + x + " y la variable y = " + y)
• console.log("La variable x = ", x, " y la variable y = ", y)
• console.log("La variable x = %d y la variable y = %d", x, y)

Sin embargo, el comando console.assert requiere una expresión en el primer argumento para evaluarse en true o false. Si la expresión se evalúa en true, el mensaje de aserción de salida no se envía a la consola; de lo contrario, sí. Por ejemplo:

var x = 1;
var y = 1;
//This expression evaluates to TRUE, so the message will not show up in the console
console.assert(x==y, "ASSERT: x == " + x + "; y == " + y);
//This expression will evaluates to FALSE so the message will show up in the console
y = 2;
console.assert(x==y, "ASSERT: x == " + x + "; y == " + y);

Estos mensajes de consola se pueden filtrar desde el recuadro Consola para mostrarlos u ocultarlos. Para seleccionar los mensajes que se desea mostrar u ocultar en el recuadro Consola, el filtro debe establecerse como sigue: haga clic con el botón secundario en el recuadro Consola y mueva el cursor sobre Filtrar. Aparecerá una lista de filtros disponibles; el filtro con la marca de verificación es el que está activo.

Además, el objeto de consola se puede extender para agregar nuevas funcionalidades conforme a las necesidades de desarrollo. Por ejemplo, puede que se desee utilizar un método personalizado para que los mensajes de depuración de salida se envíen a la consola. Para agregar un comando console.debug, se pueden agregar los fragmentos de código siguientes al código de JScript:

console.debug = function(name, value){
	console.warn("DEBUG: " + name + "==" + value);
}

En el ejemplo anterior se toman dos argumentos y, simplemente, se envían al recuadro Consola con un formato mínimo. Puesto que el desarrollador puede definir console.debug, puede personalizar los argumentos de función y el comportamiento como desee para adaptarlos a sus necesidades. De esta manera, el objeto de consola se puede utilizar para agregar cualquier cantidad de nuevos comandos que se necesite.

Nota: dado que se utilizan comandos de consola existentes en el nuevo comando, Filtrar se sigue aplicando. Por ejemplo, el comando console.debug del ejemplo anterior utiliza console.warn para enviar los mensajes de salida al recuadro Consola. Si desactiva Advertencias de consola en la lista Filtrar, entonces ninguna salida de console.warn se mostrará en el recuadro Consola.

Notas

• Para borrar todos los mensajes de console.log, utilice console.clear() en el código o desde la línea de comandos de la consola. console.clear() no borra los mensajes de los errores de script ni los códigos especificados en la línea de comandos de la consola.
• Para borrar por completo el recuadro Consola, haga clic con el botón secundario en el recuadro Consola y seleccione la opción Borrar consola. Se borrarán todos los mensajes del recuadro Consola.

Temas relacionados

• Descubrir las Herramientas de desarrollo de Internet Explorer
• Depurar HTML y CSS con las Herramientas de desarrollo
• Crear perfiles de script con las Herramientas de desarrollo
• Referencia de la interfaz de usuario de las Herramientas de desarrollo (puede estar en inglés)
• Referencia de métodos abreviados de teclado de las Herramientas de desarrollo (puede estar en inglés)