Inicio rápido: depurar aplicaciones (JavaScript)

Visual Studio proporciona una experiencia de depuración completa para aplicaciones de la Tienda Windows compiladas para Windows que usan JavaScript que incluye características que los desarrolladores de Internet Explorer y Visual Studio ya conocen. En este tema se proporciona información general sobre las características de depuración específicas de estas aplicaciones junto con tutoriales que muestran cómo utilizarlas.

Al depurar, puedes usar un modelo de depuración interactiva que te permite ver el código HTML presentado, CSS y JavaScript e interactuar con él para corregir problemas. También puedes usar un modelo más convencional de depuración de Visual Studio, que te permite realizar tareas importantes, como establecer puntos de interrupción o recorrer el código paso a paso. O puedes combinar ambos modelos.

En la tabla siguiente se muestran las características de depuración disponibles para las aplicaciones de la Tienda Windows que usan JavaScript y se proporcionan vínculos a información adicional.

Explorador de DOM	El Explorador DOM proporciona una vista que representa cómo el shell interpreta una página, en lugar del código fuente original. Te permite tener acceso a información dinámica sobre los estilos, la distribución y los atributos de los elementos que están seleccionados. Puedes cambiar los estilos, la distribución y los atributos y ver los resultados de inmediato. Para obtener más información, consulta: Depuración interactiva mediante el Explorador DOM Inspeccionar reglas de CSS Ver y editar la distribución Ver las escuchas de eventos
Ventana de la Consola JavaScript	En la ventana Consola JavaScript, puedes interactuar con la aplicación presentada para enviar mensajes a la consola, ver los valores de las variables locales y globales, y ejecutar código de JavaScript. La consola también notifica los errores y las excepciones de JavaScript, además de las excepciones de Document Object Model (DOM) y de Windows en tiempo de ejecución. Para obtener más información, consulta: Depuración interactiva mediante la ventana Consola JavaScript Modo de una línea y modo de varias líneas en la ventana Consola JavaScript Comandos de la Consola JavaScript
Actualizar	Actualizar permite editar código fuente y recargar las páginas sin tener que detener y reiniciar el depurador. Para obtener más información, consulta Actualizar una aplicación.
Seleccionar elemento	En el Explorador DOM puedes seleccionar elementos DOM haciendo clic en áreas de la aplicación en ejecución en el simulador o el equipo host. Para obtener más información, consulta Selección de elementos.
Sesiones de depuración	Para obtener información sobre cómo iniciar sesiones de depuración y la implementación de aplicaciones, consulta: Cómo iniciar una sesión de depuración (JavaScript) Ejecutar aplicaciones de la Tienda Windows desde Visual Studio
Puntos de interrupción, recorrer paso a paso el código	El Depurador de Visual Studio permite establecer puntos de interrupción y recorrer paso a paso el código mediante comandos como F5 (Iniciar depuración o Continuar) y F11 (Paso a paso por instrucciones). Al recorrer el código paso a paso, puedes interactuar con la aplicación según cuál sea el estado de la ventana Consola JavaScript. Para obtener más información, consulta: Inicio rápido: navegación del depurador (JavaScript) Depuración interactiva y modo de interrupción
Generador de perfiles	Para obtener más información sobre el modo de buscar problemas de rendimiento en la aplicación, consulta Analizar el rendimiento de las aplicaciones de la Tienda Windows
Analizador de memoria de JavaScript	Para obtener más información sobre el modo de buscar pérdidas de memoria en la aplicación, consulta Analizar el uso de memoria en aplicaciones de la Tienda Windows (JavaScript)

En este tema también se proporciona información sobre las siguientes tareas de depuración de JavaScript: Habilitar excepciones de primera oportunidad y Depurar aplicaciones que usan componentes de Windows en tiempo de ejecución.

Depuración interactiva mediante el Explorador DOM

El Explorador DOM muestra una vista de la página presentada. Puedes utilizarlo para cambiar valores y ver inmediatamente los resultados. Esto te permite probar cambios mediante un proceso iterativo sin tener que detener y reiniciar el depurador. El código fuente del proyecto no cambia cuando se interactúa con la página mediante este método. Así pues, si encuentras las correcciones de código deseadas, deberás detener el depurador y efectuar los cambios en el código fuente.

Sugerencia

Si no deseas detener el depurador, puedes hacer los cambios en el código fuente y, después, actualizar la aplicación mediante el botón Actualizar aplicación de Windows de la barra de herramientas Depurar. Para obtener más información, consulta Actualizar una aplicación.

Puedes utilizar el Explorador DOM para:

• Inspeccionar el código HTML presentado, CSS y JavaScript y navegar por el subárbol de elementos DOM.

• Cambiar dinámicamente los atributos de los elementos presentados.

• Inspeccionar la aplicación de estilos CSS a la página y realizar cambios dinámicamente.

Al depurar aplicaciones, con frecuencia tienes que seleccionar elementos en el Explorador DOM. Cuando se selecciona un elemento, los valores que aparecen en las pestañas de la derecha se actualizan automáticamente, para reflejar el elemento seleccionado en el Explorador DOM. Estas son las pestañas: Estilos, Realizar seguimiento de estilos, Diseño, Atributos y Eventos. Para obtener más información sobre la selección de elementos, consulta Selección de elementos.

Sugerencia

Si la ventana del Explorador DOM está cerrada, haz clic en Depurar > Windows > Explorador DOM para reabrirla. La ventana únicamente aparece durante las sesiones de depuración de script.

En el procedimiento siguiente, analizaremos el proceso de depurar de forma interactiva una aplicación utilizando el Explorador DOM. Crearemos una aplicación que usa un control FlipView y la depuraremos. El código de la aplicación contiene varios errores.

Para usar la depuración interactiva en el Explorador DOM

1. Crea una nueva solución en Visual Studio haciendo clic en Archivo > Nuevo proyecto.

2. Selecciona la plantilla de JavaScript que se llama Aplicación vacía y escribe el nombre del proyecto, por ejemplo, FlipViewApp.

3. En el elemento BODY de default.html, agrega este código:

       <div id="flipTemplate" data-win-control="WinJS.Binding.Template" 
                style="display:none">
           <div class="fixedItem" >
               <img src="#" data-win-bind="src: flipImg" />
           </div>
       </div>
       <div id="fView" style="width:100px;height:100px;background-color:#0094ff" 
           data-win-control="WinJS.UI.FlipView"
               data-win-options="{ itemDataSource: Data.items.dataSource, itemTemplate: flipTemplate }">
       </div>
   

4. Reemplaza el código de default.js con este otro:

   (function () {
       "use strict";
   
       var app = WinJS.Application;
       var activation = Windows.ApplicationModel.Activation;
   
       var myData = [];
       for (var x = 0; x < 4; x++) {
           myData[x] = { flipImg: "/images/logo.png" }
       };
   
       var pages = new WinJS.Binding.List(myData, { proxy: true });
   
       app.onactivated = function (args) {
           if (args.detail.kind === activation.ActivationKind.launch) {
               if (args.detail.previousExecutionState !==
               activation.ApplicationExecutionState.terminated) {
                   // TODO: . . .
               } else {
                   // TODO: . . .
               }
               args.setPromise(WinJS.UI.processAll());
   
               updateImages();
           }
       };
   
       function updateImages() {
   
           pages.push(0, { flipImg: "https://go.microsoft.com/fwlink/?LinkID=223195" });
           pages.push(1, { flipImg: "https://go.microsoft.com/fwlink/?LinkID=223196" });
           pages.push(2, { flipImg: "https://go.microsoft.com/fwlink/?LinkID=223197" });
       };
   
       app.oncheckpoint = function (args) {
       };
   
       app.start();
   
       var publicMembers = {
           items: pages
       };
   
       WinJS.Namespace.define("Data", publicMembers);
   
   })();
   

   Nota

   El código de JavaScript anterior está encapsulado en una función anónima. Esta encapsulación sigue el modelo de programación típico que se usa en las plantillas de proyecto. Cuando se encapsula código de esta manera, se puede usar la función WinJS.Namespace.define para tener acceso a los elementos de código desde cualquier otro punto de la aplicación.

5. Selecciona Simulador en la lista desplegable situada junto al botón Iniciar depuración en la barra de herramientas Depurar:

   

6. Haz clic en Depurar > Iniciar depuración, o bien presiona F5, para ejecutar la aplicación en modo de depuración.

   La aplicación se ejecuta en el simulador, pero lo que verás principalmente será una pantalla en blanco, porque el código tiene pocos errores. La imagen predeterminada de la parte superior izquierda indica que hay algo cargado. Si haces clic en esa área de la pantalla, verás una flecha FlipView. Indica que se ha creado una instancia del control, pero que el tamaño de este no es el correcto.

   Sugerencia

   Puedes presionar Alt+Tab, o F12, para alternar entre Visual Studio y la aplicación en ejecución. Si ejecutas la aplicación en el simulador en vez de en el equipo local, puedes hacer clic en los botones de Visual Studio y del simulador situados en la barra de tareas de Windows para alternar entre las ventanas.

7. En Visual Studio, haz clic en la pestaña Explorador DOM.

8. En la ventana del Explorador DOM, selecciona el elemento DIV de la sección cuyo identificador es "fView":

   

   Sugerencia

   También puedes seleccionar el elemento DIV en la esquina inferior izquierda de la ventana Consola JavaScript; para ello, escribe select(fView) en el indicador de entrada >> y presiona Intro.

   Observa que el ancho y el alto se establecen incorrectamente en valores en píxeles en el Explorador DOM.

   Los valores que aparecen en las pestañas del lado derecho de la ventana del Explorador DOM se actualizan automáticamente para reflejar el elemento actual en el Explorador DOM.

9. En la pestaña Atributos, haz doble clic en el atributo style. Edita el ancho y el alto, para que ambos estén establecidos en el 100 %. Después de presionar Intro, los nuevos valores se reflejan inmediatamente en el simulador, aunque no hayas detenido la sesión de depuración.

   

   Importante

   Igual que puedes actualizar los valores de los atributos, puedes actualizar también los que aparecen en las pestañas Estilos, Realizar seguimiento de estilos y Diseño. Para obtener más información, consulta Inspeccionar reglas de CSS y Ver y editar la distribución.

   Ahora, el tamaño del control FlipView es correcto. También funciona correctamente. Sin embargo, en lugar de verse las imágenes esperadas, lo que se ven son las imágenes predeterminadas, imágenes que faltan y las imágenes esperadas entremezcladas con estas últimas.

   Hay un error en el código de JavaScript que produce este problema. En la sección siguiente, exploraremos una forma de corregir este error mediante la ventana de la consola de JavaScript. Para seguir con la depuración, consulta Depuración interactiva mediante la ventana Consola JavaScript.

Puedes usar la característica Actualizar para modificar código HTML, CSS y JavaScript, y recargar rápidamente páginas sin tener que detener y reiniciar el depurador. Para obtener más información sobre la característica Actualizar, consulta Actualizar una aplicación.

Para actualizar la aplicación durante la depuración

1. Mientras la aplicación se está ejecutando, cambia a Visual Studio.

2. Abre default.html y modifica tu código fuente cambiando el alto y ancho del elemento DIV "fView" al 100 %.

3. Haz clic en el botón Actualizar aplicación de Windows situado en la barra de herramientas Depurar (o presiona F4). El botón tiene el siguiente aspecto: .

   Se recargan las páginas de la aplicación y el simulador vuelve al primer plano.

   Como antes, las imágenes siguen sin mostrarse correctamente. Puedes continuar depurando esta aplicación en la sección siguiente.

Depuración interactiva mediante la ventana Consola JavaScript

Puedes ejecutar y actualizar código de JavaScript en la ventana Consola JavaScript. Al igual que el Explorador DOM, la ventana Consola JavaScript permite probar los cambios sin tener que detener y reiniciar el depurador. De esta forma, puedes ver inmediatamente los resultados en la página presentada. Cuando detectes uno o varios cambios deseados, debes detener el depurador e incorporar esas correcciones en el código fuente.

Puedes utilizar la ventana Consola JavaScript para:

• Ejecutar scripts en modo de una sola línea o varias líneas.

• Ver mensajes informativos y de error.

• Realizar otras tareas, como borrar la pantalla. Consulta Comandos de la Consola JavaScript para ver la lista completa de comandos.

Sugerencia

Si la ventana de la consola de JavaScript está cerrada, haz clic en Depurar > Windows ] > Consola JavaScript para abrirla de nuevo. La ventana únicamente aparece durante las sesiones de depuración de script.

En este procedimiento, vamos a continuar depurando la aplicación FlipView que comenzamos a depurar en la sección Depuración interactiva mediante el Explorador DOM. Ya hemos visto que el control FlipView funciona correctamente pero que no muestra las imágenes esperadas.

Para depurar código JavaScript en la aplicación FlipView

1. Mientras la aplicación FlipView se está ejecutando en el simulador, escribe Data.items en el indicador de entrada de la ventana Consola JavaScript y presiona Intro.

   Aparece un visualizador para el objeto items en la ventana de consola. Esto indica que se ha creado una instancia del objeto items y está disponible en el contexto del script. En la ventana de consola, puedes hacer clic para recorrer los nodos de un objeto para ver sus valores de propiedad (o usar las teclas de dirección). Si hacemos clic para bajar en el objeto items._data, como se ve en esta ilustración, veremos que las referencias al origen de las imágenes son incorrectas, como era de esperar. Las imágenes predeterminadas siguen presentes en el objeto, y hay imágenes que faltan entremezcladas con las imágenes esperadas.

   

2. Cuando se te pida confirmación, escribe Data.items.push y presiona Intro. La ventana de consola muestra la implementación de la función push desde un archivo de proyecto de Biblioteca de Windows para JavaScript (WinJS). Investigando un poco mediante IntelliSense, descubrimos que deberíamos utilizar setAt para reemplazar las imágenes predeterminadas.

3. Para corregir este problema de forma interactiva sin detener la sesión de depuración, abre default.js y selecciona este código de la función updateImages:

   pages.push(0, { flipImg: "https://go.microsoft.com/fwlink/?LinkID=223195" });
   pages.push(1, { flipImg: "https://go.microsoft.com/fwlink/?LinkID=223196" });
   pages.push(2, { flipImg: "https://go.microsoft.com/fwlink/?LinkID=223197" });
   

   Copia y pega este código en el indicador de entrada de la Consola JavaScript.

   Sugerencia

   Al pegar varias líneas de código en el indicador de entrada de la Consola JavaScript, este cambia automáticamente al modo de varias líneas. Puedes presionar Ctrl+Alt+M para activar y desactivar alternativamente el modo de varias líneas. Para ejecutar un script en modo de varias líneas, presiona Ctrl+Entrar o haz clic en el símbolo de flecha de la esquina inferior derecha de la ventana.

4. Corrige las llamadas a la función push en el indicador, reemplazando pages.push con Data.items.setAt. Luego, haz clic en el símbolo de flecha para ejecutar el script. El código corregido debe ser similar a este:

   Data.items.setAt.setAt(0, { flipImg: "https://go.microsoft.com/fwlink/?LinkID=223195" });
   Data.items.setAt.setAt(1, { flipImg: "https://go.microsoft.com/fwlink/?LinkID=223196" });
   Data.items.setAt.setAt(2, { flipImg: "https://go.microsoft.com/fwlink/?LinkID=223197" });
   

5. Presiona Ctrl+Alt+M para cambiar el indicador de entrada de la consola al modo de una sola línea. Después, presiona Ctrl+A para seleccionar la entrada anterior y poder quitarla.

6. Escribe Data.items.length = 3 en el indicador y presiona Intro. Al hacerlo, se quitan los elementos extraños de los datos.

7. Comprueba otra vez el simulador. Verás que ya aparecen las imágenes correctas en las páginas correctas de FlipView.

8. En DOM Explorer, puedes ver el elemento DIV actualizado y navegar por el subárbol para buscar los elementos IMG esperados.

9. Detén la depuración haciendo clic en Depurar > Detener depuración o presionando Mayús+F5. Luego, corrige el código fuente.

   Para obtener la página de default.html completa que contiene el código de ejemplo corregido, consulta Depurar código de ejemplo de aplicaciones (JavaScript).

Depuración interactiva y modo de interrupción

Puedes utilizar puntos de interrupción y depurar el código paso a paso por instrucciones mientras utilizas herramientas de depuración de JavaScript, como la ventana Consola JavaScript. Cuando un programa que se ejecuta en el depurador encuentra un punto de interrupción, el depurador suspende temporalmente la ejecución de ese programa. Cuando se suspende la ejecución, el programa cambia del modo de ejecución al modo de interrupción. Puedes reanudar la ejecución en cualquier momento.

Aunque un programa esté en modo de interrupción, puedes utilizar la ventana Consola JavaScript para ejecutar scripts y comandos que sean válidos en el estado actual de la aplicación. En este procedimiento, vamos a utilizar la aplicación FlipView que creamos en un procedimiento anterior para mostrar el uso del modo de interrupción.

Para establecer un punto de interrupción y depurar la aplicación

1. En el archivo default.html de la aplicación FlipView que has creado antes, haz clic con el botón secundario en la función updateImages() y selecciona Punto de interrupción > Insertar punto de interrupción.

2. Selecciona Equipo local en la lista desplegable situada junto al botón Iniciar depuración en la barra de herramientas Estándar.

3. Haz clic en Depurar > Iniciar depuración o presiona F5.

   La aplicación entra en el modo de interrupción cuando la ejecución alcanza la función updateImages(). La línea actual de ejecución del programa se resalta en amarillo.

   

   Puedes cambiar los valores de las variables para modificar inmediatamente el estado del programa sin tener que terminar la sesión de depuración actual.

4. Escribe updateImages en el indicador y presiona Intro. La implementación de la función aparece en la ventana de consola.

5. Copia una línea de la función en el indicador y cambia el valor de índice a 3:

   pages.setAt(3, { flipImg: "https://go.microsoft.com/fwlink/?LinkID=223197" });
   

6. Presiona Intro para ejecutar la línea de código.

   Si quieres recorrer el código línea por línea, presiona F11. Si prefieres continuar con la ejecución del programa, presiona F5.

7. Presiona F5 para que continúe la ejecución del programa. Aparece la aplicación FlipView. Ahora, las cuatro páginas muestran una de las imágenes no predeterminadas.

   Para volver a Visual Studio, presiona F12 o Alt+Tab.

Modo de una línea y modo de varias líneas en la ventana Consola JavaScript

El indicador de entrada de la ventana Consola JavaScript admite el modo de una línea y el modo de varias líneas. El procedimiento de depuración interactivo de este tema proporciona un ejemplo del uso de ambos modos. Puedes presionar Ctrl+Alt+M para alternar entre los modos.

El modo de una línea proporciona un historial de entradas. Puedes navegar por el historial de entradas mediante las teclas Flecha arriba y Flecha abajo. El modo de una línea borra el indicador de entrada cuando se ejecutan scripts. Para ejecutar un script en modo de una línea, presiona Intro.

El modo de varias líneas no borrar el indicador de entrada cuando se ejecutan scripts. Al cambiar al modo de una línea desde el modo de varias líneas, puedes borrar la línea de entrada presionando Ctrl+A y escribiendo cualquier carácter. Para ejecutar un script en modo de varias líneas, presiona Ctrl+Entrar o haz clic en el símbolo de flecha de la esquina inferior derecha de la ventana.

Selección de elementos

Puedes seleccionar elementos DOM de tres maneras diferentes al depurar una aplicación:

• Haciendo clic en los elementos directamente en la ventana del Explorador DOM (o utilizando las teclas de dirección).

• Utilizando el botón Seleccionar elemento.

• Utilizando el comando select, que es uno de los Comandos de la Consola JavaScript.

Cuando utilices la ventana del Explorador DOM para seleccionar elementos y sitúes el puntero del mouse sobre un elemento, el elemento correspondiente se resaltará en el simulador o el dispositivo. Debes hacer clic en el elemento en DOM Explorer para seleccionarlo, o puedes utilizar las teclas de dirección para resaltar y seleccionar elementos. También puedes seleccionar elementos del Explorador DOM mediante el botón Seleccionar elemento. En la ilustración siguiente se muestra el botón Seleccionar elemento.

Al hacer clic en Seleccionar elemento (o presionar Ctrl+B), el modo de selección cambia para que puedas seleccionar un elemento del Explorador DOM haciendo clic en él desde la aplicación o el simulador. El modo vuelve a cambiar al modo de selección normal después de un solo clic. Al hacer clic en Seleccionar elemento, la aplicación se pone en primer plano. El cursor cambia para reflejar el nuevo modo de selección. En este modo, cuando sitúas el puntero del mouse sobre elementos del simulador o el dispositivo, aparece un contorno coloreado sobre el elemento. Al hacer clic en el elemento con contorno, el Explorador DOM vuelve al primer plano con ese elemento seleccionado. Para obtener un ejemplo que muestra cómo seleccionar elementos mediante el botón Seleccionar elemento, consulta Inspeccionar reglas de CSS.

Depurar aplicaciones que usan componentes de Windows en tiempo de ejecución

Cuando depuras aplicaciones de la Tienda Windows que usan JavaScript que hacen referencia a archivos WinMD de C# o Visual Basic, o que incluyen componentes de Windows en tiempo de ejecución de C++ (un archivo WinMD y un archivo DLL), puedes especificar el depurador que deseas usar. No se puede depurar JavaScript y código administrado o nativo al mismo tiempo.

Puedes especificar el depurador que deseas ejecutar en la página de propiedades de depuración del proyecto. Para obtener más información, consulta Cómo iniciar una sesión de depuración (JavaScript).

Implementar aplicaciones

En algunos escenarios de depuración para aplicaciones de la Tienda Windows compiladas para Windows que usan JavaScript, puede ser necesario implementar la aplicación sin iniciarla desde Visual Studio. Por ejemplo, las aplicaciones diseñadas para recibir contenido compartido pueden iniciarse desde la interfaz de usuario compartida. En ese caso, deberás realizar la depuración desde la aplicación que comparte el contenido. Para la aplicación que recibe el contenido compartido, puedes establecer en No la propiedad Iniciar aplicación de la página de propiedades de Depuración del proyecto. Para obtener más información sobre escenarios de implementación de aplicaciones, consulta Cómo iniciar una sesión de depuración (JavaScript).

Habilitar excepciones de primera oportunidad

Si utilizas las excepciones de primera oportunidad, puedes especificar que una aplicación entre en modo de interrupción al encontrar una excepción en tiempo de ejecución. Si esta característica está habilitada, la aplicación entra en el modo de interrupción aunque se controlen las excepciones. Esto te permite detectar algunos errores que normalmente no son evidentes durante la depuración. Algunas bibliotecas utilizan mucho las excepciones y, cuando se trabaja con estas bibliotecas, lo mejor es deshabilitar las excepciones de primera oportunidad.

Para habilitar las excepciones de primera oportunidad

1. En Visual Studio, haz clic en Depurar > Excepciones.

2. En el cuadro de diálogo Excepciones, expande el nodo JavaScript Runtime Exceptions.

3. Activa la casilla Producida para todas las excepciones en que el depurador deba interrumpirse siempre y haz clic en Aceptar.

Compatibilidad con explorador y plataforma

Las herramientas de Visual Studio para JavaScript, el Explorador DOM y la ventana de consola JavaScript se admiten en las plataformas siguientes:

• Aplicaciones de la Tienda Windows compiladas para Windows 8 con JavaScript

• Internet Explorer 10 que se ejecute en Windows 8

Entra aquí para descargar Windows 8 y Visual Studio.

Vea también

Tareas

Ver las escuchas de eventos

Actualizar una aplicación

Referencia

Troubleshooting Windows Runtime errors

How to handle errors with promises

Conceptos

Depurar aplicaciones de la Tienda Windows

Inspeccionar reglas de CSS

Ver y editar la distribución

Otros recursos

Compatibilidad de productos y accesibilidad