Share via


Inicio rápido: navegación del depurador (JavaScript)

Este tutorial rápido muestra cómo navegar en el Depurador de Visual Studio y cómo ver el estado del programa en una sesión.

Es para desarrolladores que no han depurado antes con Visual Studio y para aquellos que quieren aprender más sobre cómo navegar por una sesión de depuración de Visual Studio. No enseña cómo depurar. Las funciones del código de ejemplo se han diseñado únicamente para demostrar los procedimientos de depuración descritos en este tema. En ellas no se emplean los procedimientos recomendados para el diseño de aplicaciones o funciones. De hecho, pronto descubrirás que ni las funciones ni la propia aplicación sirven para gran cosa.

Las secciones de este tutorial rápido se diseñaron para ser lo más independientes entre sí que sea posible. Así, puedes omitir cualquier sección cuya información ya conozcas. Tampoco hace falta crear una aplicación de ejemplo. Sin embargo, recomendamos que lo hagas, y te hemos facilitado el proceso lo más posible.

Métodos abreviados de teclado del depurador. La navegación del Depurador de Visual Studio está optimizada para el mouse y el teclado. Muchos de los pasos de este tema incluyen la tecla de aceleración o de método abreviado de teclado en una nota entre paréntesis. Por ejemplo, (teclado: F5) indica que al presionar la tecla F5 se iniciará o continuará la ejecución del depurador.

Nota

Patrón de módulo

Las aplicaciones de la Tienda Windows suelen usar el patrón de módulo de JavaScript para encapsular los datos y las funciones de una página. El patrón de módulo utiliza un cierre único, autoejecutable y anónimo para que la funcionalidad de la página se mantenga aislada del espacio de nombres global. En este tema, llamamos a esa función el módulo.

En este tema

Aprenderás a:

Crear la aplicación de ejemplo.

Establecer y ejecutar hasta un punto de interrupción, depurar una función paso a paso por instrucciones, y examinar los datos de programa

Depurar una función paso a paso por instrucciones o por procedimientos y hasta salir

Establecer un punto de interrupción condicional, ejecutar hasta el cursor y ver una variable

Ver los datos de las variables en la ventana Variables locales

  • Ver los datos de las variables y la cadena de prototipo de un objeto

  • Examinar los datos de la cadena de ámbito

Navegar al código mediante la ventana Pila de llamadas

Crear la aplicación de ejemplo.

La depuración se aplica al código. Por eso, en la aplicación de ejemplo, el marco de aplicaciones de la Tienda Windows se usa solamente para crear un archivo de código fuente en el que puedas ver cómo funciona la navegación por una sesión de depuración y cómo se examina el estado de un programa. A todo el código que vas a invocar se le llama desde la función module de archivo default.js. No se agrega ningún control ni se controla ningún evento.

  1. Crea una aplicación de la Tienda Windows de JavaScript en blanco. Abre Visual Studio. En la página principal, elige el vínculo de Nuevo proyecto. En el cuadro de diálogo Nuevo proyecto, elige JavaScript en la lista Instalado y, a continuación, elige Tienda Windows. En la lista de plantillas de proyecto, elige Aplicación vacía. Visual Studio crea una solución y un proyecto nuevos. Luego, muestra el archivo default.htm en el editor de código.

    Observa los archivos de script que se cargan en la página.

    • Los archivos base.js y ui.js crean la biblioteca de Windows para JavaScript. La biblioteca de Windows para JavaScript es un conjunto de archivos de JavaScript y CSS que facilita la creación de aplicaciones de la Tienda Windows mediante JavaScript. Se utiliza, junto con HTML, CSS y Windows en tiempo de ejecución, para crear la aplicación.

    • El código comienza en el archivo default.js .

  2. Abre el archivo de origen default.js. En el Explorador de soluciones, abre el nodo js y elige default.js.

  3. Reemplaza el contenido de la página con el código de ejemplo. Elimina todo el contenido del archivo default.js. Sigue este vínculo: Código de ejemplo de navegación del depurador (JavaScript). Después, copia en el portapapeles el código mostrado en la sección JavaScript. (Elige Atrás en el explorador o en el visor de la ayuda para volver a esta página de tutorial.) En el editor de Visual Studio, pega el código en el archivo default.js que ahora está vacío. Presiona Ctrl+S para guardar el archivo.

Ahora, puedes seguir los ejemplos de este tema.

Establecer y ejecutar hasta un punto de interrupción, depurar una función paso a paso por instrucciones, y examinar los datos de programa

La manera más común de iniciar una sesión de depuración es elegir Iniciar depuración en el menú Depurar (teclado: F5). La aplicación se inicia y continúa ejecutándose hasta que alcanza un punto de interrupción, se suspende manualmente la ejecución, se produce una excepción o la aplicación finaliza.

Cuando la ejecución se suspende en el depurador, el valor de una variable activa se puede ver en una sugerencia de datos que aparece al detener el mouse sobre la variable.

Después de suspender la ejecución de la aplicación (lo que también se llama interrumpir el depurador), tú controlas cómo se ejecuta el resto del código de programa. Puedes continuar línea por línea, pasar de una llamada de función a la propia función, o ejecutar en un solo paso una función a la que se ha llamado. Se llama a estos procedimientos al recorrer paso a paso la aplicación. También puedes reanudar la ejecución estándar de la aplicación hasta el siguiente punto de interrupción que has establecido, o hasta la línea donde hayas colocado el cursor. Puedes detener la sesión de depuración en cualquier momento. El depurador se ha diseñado para realizar las operaciones de limpieza necesarias y salir de la ejecución.

Hh924759.collapse_all(es-es,VS.110).gifEjemplo 1

En este ejemplo, se establece un punto de interrupción en el cuerpo de la función module en default.js mientras llama a la primera de las instrucciones del usuario. A continuación, se depura la función paso a paso por instrucciones, se ven los valores de las variables en las sugerencias de datos del depurador y, por último, se detiene la depuración.

  1. Establece un punto de interrupción. Establece un punto de interrupción en la instrucción callTrack = "module function"; que se produce justo después de la llamada a app.start(). Elige la línea en el margen interno sombreado del editor de código fuente (teclado: sitúa el cursor en la línea y presiona la tecla F9).

    Establecer un punto de interrupción en example1

    El icono de punto de interrupción aparece en el margen interno.

  2. Ejecuta hasta el punto de interrupción. Inicia la sesión de depuración. Para ello, elige Iniciar depuración en el menú Depurar (teclado: F5).

    La aplicación comienza a ejecutarse y suspende la ejecución inmediatamente antes de la instrucción donde has establecido el punto de interrupción. El icono de la línea actual que aparece en el margen identifica su ubicación. La instrucción actual se resalta.

    Ejecutar hasta el punto de interrupción

    Ahora, tú tienes el control de la ejecución de la aplicación. Puedes examinar el estado del programa a medida que recorres paso a paso sus instrucciones.

  3. Depura la función paso a paso por instrucciones. En el menú Depurar, elige Paso a paso por instrucciones (teclado: F11).

    Ir a una línea de código

    Observa que el depurador se desplaza a la línea siguiente, que es una llamada a la función example1. Elige otra vez Paso a paso por instrucciones. El depurador se desplaza a la primera línea de código de la función example1. La línea resaltada no se ha ejecutado, pero sí se ha cargado la función en la pila de llamadas. Además, se ha asignado la memoria para las variables locales.

  4. Cuando se depura paso a paso por instrucciones una línea de código, el depurador realiza una de las acciones siguientes:

    • Si la instrucción siguiente no es una llamada a una función de la solución, el depurador ejecuta la instrucción, pasa a la instrucción siguiente y, después, suspende la ejecución.

    • Si la instrucción es una llamada a una función de tu solución, el depurador va hasta la primera línea de la función a la que se llamó y, luego, suspende la ejecución.

    Sigue depurando example1 paso a paso por instrucciones, hasta el punto de salida. El depurador resalta la llave de cierre de la función.

  5. Consulta los valores de las variables en las sugerencias de datos. Sigue depurando example1 paso a paso por instrucciones, hasta el punto de salida. El depurador resalta la llave de cierre de la función. Si detienes el mouse sobre el nombre de una variable, se muestran su nombre y valor en una sugerencia de datos.

    Ver valores variables en la información sobre datos

  6. Agrega un observador para la variable callTrack. La variable callTrack se utiliza en este tutorial rápido para mostrar las funciones a las que se llama en los ejemplos. Para que sea más fácil ver el valor de la variable, agrégala a una ventana Inspección. Selecciona el nombre de la variable en el editor. Después, elige Agregar inspección en el menú contextual.

    Examinar una variable

    Puedes inspeccionar múltiples variables en una ventana Inspección. Los valores de las variables inspeccionadas, igual que los valores de las ventanas de sugerencias de datos, se actualizan cada vez que se suspende la ejecución. Las variables inspeccionadas se guardan de una sesión de depuración a otra.

  7. Detén la depuración. En el menú Depurar, elige Detener depuración (teclado: Mayús+F5). Esto finaliza la sesión de depuración.

Depurar una función paso a paso por instrucciones o por procedimientos y hasta salir

Al contrario que la depuración paso a paso por instrucciones de una función a la que llamó una función primaria, la depuración paso a paso por procedimientos ejecuta la función secundaria y, después, suspende la ejecución de la función de llamada cuando se reanuda la primaria. Puedes depurar paso a paso por procedimientos una función si sabes bien cómo opera y estás seguro de que el problema que investigas no está relacionado con su ejecución.

Cuando se usa la depuración paso a paso por procedimientos en una línea de código que no contiene una llamada a una función, esa línea se ejecuta exactamente igual que con la depuración paso a paso por instrucciones.

Al salir de una función secundaria, la ejecución de la función continúa. Cuando esta vuelve a su función de llamada, se suspende la ejecución. Puede ser conveniente depurar una función larga paso a paso hasta salir si sabes con certeza que el resto de la función no es significativo.

La función se ejecuta cuando se depura paso a paso tanto por procedimientos como hasta salir.

Ir a un método, saltarlo o salir de este

Hh924759.collapse_all(es-es,VS.110).gifEjemplo 2

En este ejemplo, se depuran funciones paso a paso por instrucciones y por procedimientos, y hasta salir.

  1. Llama a la función example2 de la función module. Edita la función module; reemplaza la línea que aparece después de var callTrack = "module function" con example2();.

    Llamar a la función example2

  2. Ejecuta hasta el punto de interrupción. Inicia la sesión de depuración. Para ello, elige Iniciar depuración en el menú Depurar (teclado: F5). El depurador suspende la ejecución en el punto de interrupción.

  3. Depura la línea de código paso a paso por procedimientos. En el menú Depurar, elige Paso a paso por procedimientos (teclado: F10). El depurador ejecuta la instrucción var callTrack = "module function" de la misma manera que si se depurase paso a paso por instrucciones.

  4. Depura paso a paso por instrucciones example2 y example2_a. Presiona la tecla F11 para depurar paso a paso por instrucciones la función example2. Sigue depurando example2 paso a paso por instrucciones hasta la línea var x = example2_a();. Una vez más, depura paso a paso por instrucciones esta línea hasta alcanzar el punto de entrada de example2_a. Continúa depurando paso a paso todas las instrucciones de example2_a hasta que vuelvas a example2.

    Saltar una función

  5. Depura una función paso a paso por procedimientos. Observa que la línea siguiente de example2, var y = example2_a();, es básicamente igual que la anterior. Puedes depurarla paso a paso por procedimientos sin ningún problema. Presiona la tecla F10 para ir desde la reanudación de example2 hasta esta segunda llamada a example2_a. Observa que la cadena callTrack indica que la función example2_a se ha ejecutado dos veces.

  6. Depura una función paso a paso hasta salir. Presiona la tecla F11 para depurar paso a paso por instrucciones la función example2_b. Observa que example2_b no es muy distinta de example2_a. Para salir de la función, elige Paso a paso para salir en el menú Depurar (teclado: Mayús+F11). Observa que la variable callTrack indica que example2_b se ha ejecutado y que el depurador ha regresado al punto donde se reanuda example2.

  7. Detén la depuración. En el menú Depurar, elige Detener depuración (teclado: Mayús+F5). Esto finaliza la sesión de depuración.

Establecer un punto de interrupción condicional, ejecutar hasta el cursor y ver una variable

Un punto de interrupción condicional especifica una condición que hace que el depurador suspenda la ejecución. La condición se especifica mediante cualquier expresión de código que se puede evaluar como verdadera o falsa. Por ejemplo, en una función a la que se llama a menudo, podrías utilizar un punto de interrupción condicional para que el estado del programa se examinase solamente cuando una variable alcanzase un valor determinado.

Ejecutar hasta el cursor es igual que establecer un punto de interrupción único. Cuando se suspende la ejecución, puedes seleccionar una línea del código fuente y reanudar la ejecución hasta la línea seleccionada. Por ejemplo, mientras recorres paso a paso un bucle de una función, podrías determinar que el código del bucle funciona correctamente. En lugar de recorrer todas las iteraciones del bucle, puedes ejecutar hasta el cursor que está después de la ejecución del bucle.

A veces, es difícil ver el valor de una variable en la fila de una sugerencia de datos o en otra ventana de datos. El depurador puede mostrar cadenas, HTML y XML en un visualizador de texto que presenta una vista con formato del valor en una ventana desplazable.

Hh924759.collapse_all(es-es,VS.110).gifEjemplo 3

En este ejemplo, se establece un punto de interrupción condicional para interrumpir la ejecución en una iteración concreta de un bucle y, después, ejecutar hasta el cursor situado después del bucle. También se ve el valor de una variable en un visualizador de texto.

  1. Llama a la función example3 de la función module. Edita la función module y reemplaza la línea que aparece después de var callTrack = "module function"; con la línea example3();.

    Llamada de example3

  2. Ejecuta hasta el punto de interrupción. Inicia la sesión de depuración. Para ello, elige Iniciar depuración en el menú Depurar (teclado: F5). El depurador suspende la ejecución en el punto de interrupción de la función module.

  3. Depura la función example3 paso a paso por instrucciones. Elige Paso a paso por instrucciones en el menú Depurar (teclado: F11) hasta alcanzar el punto de entrada de la función example3. Sigue depurando la función paso a paso por instrucciones hasta que hayas recorrido en iteración uno o dos bucles del bloque for. Date cuenta de que tardarías mucho en recorrer paso a paso las 1000 iteraciones.

  4. Establece un puntos de interrupción condicional. En el margen interno izquierdo de la ventana de código, haz clic con el botón secundario en la línea s += i.toString() + "\n"; y elige Condición en el menú contextual.

    Activa la casilla Condición y escribe i == 500; en el cuadro de texto. Elige la opción Es True y elige Aceptar. El punto de interrupción permite comprobar el valor de la 500ª iteración del bucle for. El aspa blanca te permite distinguir el icono de un punto de interrupción condicional.

    Icono de punto de interrupción condicional

  5. Ejecuta hasta el punto de interrupción. En el menú Depurar, elige Continuar (teclado: F5). Pausa en i para confirmar que el valor actual de i es 500. Observa también que la variable s se representa como una sola línea y es mucho más larga que la ventana de sugerencia de datos.

  6. Muestra una variable de cadena. Haz clic en el icono de lupa en la sugerencia de datos de s.

    Aparece la ventana del visualizador de texto. El valor de la cadena se muestra como una cadena de varias líneas.

    Depurar visualizador de texto

  7. Ejecuta hasta el cursor. Selecciona la línea callTrack += "->example3";. Después, elige Ejecutar hasta el cursor en el menú contextual (teclado: Ctrl+F10). El depurador completa las iteraciones del bucle y, después, suspende la ejecución en la línea.

  8. Detén la depuración. En el menú Depurar, elige Detener depuración (teclado: Mayús+F5). Esto finaliza la sesión de depuración.

Hh924759.collapse_all(es-es,VS.110).gifUtilizar Ejecutar hasta el cursor para volver al código y eliminar un punto de interrupción

Ejecutar hasta el cursor puede resultar muy útil cuando has entrado a depurar paso a paso código de biblioteca de Microsoft o de un tercero. Aunque depurar paso a paso el código de biblioteca puede proporcionarte información útil, a menudo se puede tardar mucho. Además, lo habitual es que te interese mucho más tu propio código. En este ejercicio se muestra cómo hacerlo.

  1. Establece un punto de interrupción en la llamada a app.start. En la función module, establece un punto de interrupción en la línea app.start().

  2. Ejecuta hasta el punto de interrupción y depura paso a paso por instrucciones la función de biblioteca.

    Cuando se depura app.start() paso a paso por instrucciones, el editor muestra el código de base.js. Depura paso a paso por instrucciones algunas líneas más.

  3. Depura una función paso a paso por procedimientos y hasta salir. Mientras depuras el código de base.js paso a paso por procedimientos (F10) y hasta salir (MAYÚS+F11), es posible que llegues a la conclusión de que examinar la complejidad y la longitud de la función inicial no es lo que quieres hacer.

  4. Establece el cursor en el código y ejecuta hasta él. Vuelve al archivo default.js en el editor de código. Selecciona la primera línea de código después de app.start() (no se puede ejecutar hasta un comentario ni hasta una línea en blanco). Elige Ejecutar hasta el cursor en el menú contextual. El depurador continúa la ejecución de la función app.start y la suspende en el punto de interrupción.

Ver los datos de las variables en la ventana Variables locales

La ventana Variables locales es una vista de árbol de los parámetros y las variables de la cadena de ámbito de la función que se está ejecutando.

Hh924759.collapse_all(es-es,VS.110).gifVer los datos de las variables y la cadena de prototipo de un objeto

  1. Agrega un objeto de matriz a la función module. Edita la función module; reemplaza la línea que aparece después de var callTrack = "module function" con var myArray = new Array(1, 2, 3);.

    Definición de myArray

  2. Ejecuta hasta el punto de interrupción. Inicia la sesión de depuración. Para ello, elige Iniciar depuración en el menú Depurar (teclado: F5). El depurador suspende la ejecución en el punto de interrupción. Depura la línea paso a paso por instrucciones.

  3. Abre la ventana Variables locales. En el menú Depurar, apunta a Ventanas y elige Variables locales. (Teclado: Alt+4).

  4. Examina las variables locales de la función module. La ventana Variables locales muestra las variables de la función que se está ejecutando (la función module) como los nodos de nivel superior del árbol. Cuando se entra en una función, JavaScript crea todas las variables y les da el valor undefined. El valor de las funciones que se definen en la función es su texto.

    Ventana Locales

  5. Recorre paso a paso las definiciones callTrack y myArray. Busca las variables callTrack y myArray en la ventana Variables locales. Depura las dos definiciones paso a paso por procedimientos (F10). Observa que los campos Valor y Tipo han cambiado. En la ventana Variables locales se resaltan los valores de las variables que han cambiado desde la última interrupción.

  6. Examina el objeto myArray. Expande la variable myArray. Cada elemento de la matriz aparece en el nodo [prototype] que contiene la jerarquía de herencia del objeto Array. Expande este nodo.

    Cadena de prototipo en la ventana Locales

    • El nodo Methods muestra todos los métodos del objeto Array.

    • El nodo [prototype] contiene el prototipo del objeto Object del que se deriva Array. Los nodos [prototype] pueden ser recursivos. Cada objeto primario de una jerarquía de objetos se describe en el nodo [prototype] de su elemento secundario.

  7. Detén la depuración. En el menú Depurar, elige Detener depuración (teclado: Mayús+F5). Esto finaliza la sesión de depuración.

Examinar los datos de la cadena de ámbito

La cadena de ámbito de una función incluye todas las variables que están activas y están accesibles mediante la función. Las variables globales forman parte de la cadena de ámbito, así como todos los objetos (funciones incluidas) que se definen en la función que define la función que se está ejecutando. Por ejemplo, la variable callTrack definida en la función module de default.js es accesible mediante cualquier función definida en la función module. Cada ámbito se muestra por separado en la ventana Variables locales.

  • Las variables de la función que se está ejecutando se muestran en la parte superior de la ventana.

  • Las variables de cada ámbito de función de la cadena de ámbito se muestran bajo el nodo [Scope] de la función. Las funciones de ámbito aparecen por su orden en la cadena, desde la función que define la función actual, hasta la función más externa de la cadena.

  • El nodo [Globals] muestra los objetos globales definidos fuera de todas las funciones.

Las cadenas de ámbito pueden resultar confusas y lo mejor es ilustrarlas con un ejemplo. En el ejemplo siguiente, puedes ver cómo la función module crea su propio ámbito, y cómo crear tú otro nivel de ámbito mediante un cierre.

Hh924759.collapse_all(es-es,VS.110).gifEjemplo 4

  1. Llama a la función example4 de la función module. Edita la función module; reemplaza la línea que aparece después de var callTrack = "module function" con example4():

    Llamada de example4

  2. Ejecuta hasta el punto de interrupción. Inicia la sesión de depuración. Para ello, elige Iniciar depuración en el menú Depurar (teclado: F5). El depurador suspende la ejecución en el punto de interrupción.

  3. Abre la ventana Variables locales. Si es necesario, en el menú Depurar, apunta a Ventanas y elige Variables locales. (Teclado: Alt+4). Observa que la ventana muestra todas las variables y funciones de la función module. Además, contiene un nodo [Globals].

  4. Examina las variables globales. Expande el nodo [Globals]. Los objetos y las variables de Global las ha establecido la biblioteca de Windows para JavaScript. Puedes agregar tus propias variables al ámbito global.

  5. Depura example4 paso a paso por instrucciones y examina sus variables locales y de ámbito. Depura la función example4 paso a paso por instrucciones (teclado: F11). Dado que example4 se define en la función module, la función module se convierte en el ámbito primario. example4 puede llamar a cualquiera de las funciones de la función de module y tener acceso a las variables. Expande el nodo [Scope] en la ventana Variables locales. Observa que contiene las mismas variables que la función module.

    Ámbitos del método example4

  6. Depura example4_a paso a paso por instrucciones y examina sus variables locales y de ámbito. Continúa depurando paso a paso por instrucciones example4 y la llamada a example4_a. Observa que las variables locales son ahora de example4_a, y que el nodo [Scope] sigue conteniendo las variables de la función module. Aunque las variables de example4 están activas, example4_a no puede tener acceso a ellas y ya no forman parte de la cadena de ámbito.

  7. Depura multipyByA paso a paso por instrucciones y examina sus variables locales y de ámbito. Recorre paso a paso el resto de example4_a y entra en la línea var x = multilpyByA(b);.

    La variable multipyByA de la función se ha establecido en la función multiplyClosure, que es un cierre. multipyClosure define y devuelve una función interna, mulitplyXby, y captura (cierra) su parámetro y su variable. En un cierre, la función interna devuelta tiene acceso a los datos de la función externa, así que crea su propio nivel de ámbito.

    Cuando depuras var x = multilpyByA(b); paso a paso por instrucciones, te desplazas a la línea return a * b; de la función interna mulitplyXby.

  8. En la ventana Variables locales, solamente aparece el parámetro b como variable local en multiplyXby. Sin embargo, se ha agregado un nuevo nivel de [Scope]. Si expandes este nodo, verás que contiene los parámetros, las funciones y las variables de multiplyClosure, incluida la variable a a la que se llama en la primera línea de multiplyXby. Una comprobación rápida del segundo nodo [Scope] revela las variables de la función módulo, a las que multiplyXby tiene acceso en la línea siguiente.

    Ámbitos de un cierre en la ventana Locales

  9. Detén la depuración. En el menú Depurar, elige Detener depuración (teclado: Mayús+F5). Esto finaliza la sesión de depuración.

La pila de llamadas es una estructura de datos que contiene información sobre las funciones que se están ejecutando en el subproceso actual de la aplicación. Cuando se alcanza un punto de interrupción, la ventana Pila de llamadas muestra una lista de todas las funciones que están activas en la pila. La función que se está ejecutando está en la parte superior de la lista de la ventana Pila de llamadas. La función que inicia el subproceso está en la parte inferior de la lista. Las funciones intermedias muestran la ruta de acceso de la llamada desde la función iniciadora hasta la función actual.

Además de para mostrar la ruta de acceso de la llamada hasta la función que se está ejecutando, la ventana Pila de llamadas se puede usar para navegar al código en el editor de código. Esta funcionalidad puede resultar valiosa si trabajas con varios archivos y quieres desplazarte rápidamente a una función concreta.

Hh924759.collapse_all(es-es,VS.110).gifEjemplo 5

En este ejemplo, se depura paso a paso por instrucciones la ruta de acceso de una llamada que contiene cinco funciones definidas por el usuario.

  1. Llama a la función example5 de la función module. Edita la función module y reemplaza la línea que aparece después de var callTrack = "module function"; con la línea example5();.

    Llamada de example5

  2. Ejecuta hasta el punto de interrupción. Inicia la sesión de depuración. Para ello, elige Iniciar depuración en el menú Depurar (teclado: F5). El depurador suspende la ejecución en el punto de interrupción de la función module.

  3. Abre la ventana Pila de llamadas. En el menú Depurar, elige Ventanas y, a continuación, Pila de llamadas (teclado: Alt+7). Observa que la ventana Pila de llamadas muestra dos funciones:

    • Global code es el punto de entrada de la función module en la parte inferior de la pila de llamadas.

    • Anonymous function muestra la línea de la función module donde se suspende la ejecución. Es la parte superior de la pila de llamadas.

  4. Depura las funciones paso a paso por instrucciones, hasta alcanzar la función example5_d. Elige Paso a paso por instrucciones en el menú Depurar (teclado: F11) para ejecutar las llamadas de la ruta de acceso de la llamada, hasta alcanzar el punto de entrada de la función example5_d. Observa que, cada vez que una función llama a otra, se guarda el número de línea de la función de llamada. Por su parte, la función a la que se llama se sitúa en la parte superior de la pila. El número de línea de la función de llamada es el punto donde esta función suspendió la ejecución. Una flecha amarilla apunta a la función que se está ejecutando.

    Ventana Pila de llamadas

  5. Usa la ventana Pila de llamadas para navegar hasta el código de example5_a y establece un punto de interrupción. En la ventana Pila de llamadas, selecciona el elemento de lista example5_a. Después, elige Ir a código fuente en el menú contextual. El editor de código establece el cursor en la línea de regreso de la función. Establece un punto de interrupción en esta línea. Observa que la línea de ejecución actual no cambia. Únicamente se ha desplazado el cursor del editor.

  6. Depura las funciones paso a paso por instrucciones y ejecuta hasta el punto de interrupción. Sigue depurando example5_d paso a paso por instrucciones. Observa que, al volver de la función, se la retira de la pila de llamadas. Presiona F5 para que continúe la ejecución del programa. Se detiene en el punto de interrupción creado en el paso anterior.

  7. Detén la depuración. En el menú Depurar, elige Detener depuración (teclado: Mayús+F5). Esto finaliza la sesión de depuración.

Vea también

Conceptos

Cómo iniciar una sesión de depuración (JavaScript)

Inicio rápido: navegación del depurador (JavaScript)

Inicio rápido: depurar aplicaciones (JavaScript)

Desencadenar eventos de suspensión, reanudación y en segundo plano en aplicaciones de la Tienda Windows

Depurar aplicaciones de la Tienda Windows