Compartir a través de

Depurar la aplicación compilada con Visual Studio Tools para Apache Cordova

  • Artículo

Este artículo se refiere a Visual Studio Tools para Apache Cordova, que es un software de vista preliminar. Las características descritas están en vista previa y pueden sufrir cambios. Puede descargar la vista previa desde el Centro de descarga de Microsoft.

Visual Studio ofrece una experiencia de herramientas común y sin fisuras para desarrollar aplicaciones Cordova de diversos tipos y para diversas plataformas de dispositivo. Sin embargo, en esta versión anterior, no todas las plataformas de dispositivo admiten todas las capacidades de diagnóstico y depuración de Visual Studio, como se muestra en la siguiente tabla.

Dispositivo o sistema operativo

¿Depurador de Visual Studio compatible?

¿Mensajes de consola compatibles?

Solución

Android 4.4

Sí

Sí

-

Versiones de Android de 2.3.3 a 4.3

No (consulte la información sobre jsHybugger más adelante en este artículo)

Sí

-

iOS 6, 7, 8

Sí

Sí

-

Windows 8, 8.1 (Tienda)

Sí

Sí

-

Windows Phone 8, 8.1

No

No (use el complemento Console)

Use el complemento Web Inspector Remote (weinre) o Console. Vea Depurar Windows 8 y Windows Phone 8 más adelante en este artículo.

Windows Server 2012 R2

Sí

Sí

Para ejecutar la aplicación en Windows Server 2012 R2, debe habilitar la opción Experiencia de escritorio.

Nota

Si usa Windows 7, puede desarrollar aplicaciones para iOS y Android, pero no para Windows o Windows Phone.

En este artículo:

  • Depurar Android e iOS en Apache Ripple

  • Depurar Android en el emulador o en un dispositivo

  • Depurar iOS en el emulador o en un dispositivo

  • Depurar Windows 8 y Windows Phone 8

Depurar Android e iOS en Apache Ripple

Puede asociar el depurador de Visual Studio a una aplicación que se ejecuta en el emulador Apache Ripple.

Para depurar en Ripple

  • Con la aplicación abierta en Visual Studio, presione F5.

    Puede llegar a los puntos de interrupción establecidos en el código, usar el Explorador DOM o ver los mensajes enviados a la Consola JavaScript.

    En la siguiente ilustración se muestra un punto de interrupción en el editor de código.

    Establecer un punto de interrupción al depurar con Ripple

    Aquí, el depurador de Visual Studio llega al punto de interrupción mientras depura en el emulador Ripple.

    Detección de un punto de interrupción por parte del depurador de Visual Studio

Importante

El depurador de Visual Studio no se detendrá en los puntos de interrupción que se alcancen antes de que la primera página se cargue en Ripple.Sin embargo, el depurador se detendrá en estos puntos de interrupción después de actualizar el explorador.

Los siguientes comandos de la Consola JavaScript son compatibles actualmente con Ripple:

  • console.assert
    console.clear
    console.count
    console.debug
    console.dir
    console.dirxml
    console.error
    console.info
    console.log
    console.time
    console.timeEnd
    console.warn

Nota

Actualmente no se admite ningún otro comando de consola ni comandos varios de la Consola JavaScript.console.dirxml tiene el mismo comportamiento que console.dir en exploradores basados en Webkit.

El Explorador DOM permite depurar HTML y CSS. Ripple admite las características disponibles en las pestañas Estilos, Calculado y Diseño del Explorador DOM.

Nota

Para obtener información detallada sobre la compatibilidad con la depuración, consulte los problemas conocidos.

Depurar Android en el emulador o en un dispositivo

Puede asociar el depurador de Visual Studio al emulador Android o a un dispositivo Android para depurar su aplicación en Android 4.4.

Si está usando una versión de Android entre 2.3.3 y 4.3, puede instalar el complemento jsHybugger para habilitar los diagnósticos de Android (Explorador DOM, consola y depuración). Este complemento indica al código localmente que permita la depuración remota en emuladores y dispositivos Android y admite Android 2.3.3 y versiones posteriores.

Para depurar en Android 4.4

  • Con la aplicación abierta en Visual Studio, presione F5.

    Si usa Android 4.4, puede alcanzar los puntos de interrupción establecidos en el código, ver los mensajes que se envían a la Consola JavaScript y usar el Explorador DOM.

    Importante

    El depurador de Visual Studio no se detendrá en los puntos de interrupción que se alcancen antes de que la primera página se cargue en los emuladores Android 4.4 o en dispositivos Android.Sin embargo, el depurador se detendrá en estos puntos de interrupción después de ejecutar el siguiente comando desde la Consola JavaScript: window.location.reload()

Para depurar en las versiones de Android 2.3.3-4.3 con el complemento jsHybugger

  1. Abra el proyecto Cordova en Visual Studio.

  2. En el proyecto, cree una carpeta plugins si no existe una. (Para agregar una carpeta, abra el menú contextual del proyecto en el Explorador de soluciones, seleccione Agregar, Nueva carpeta y establezca el nombre de carpeta plugins).

  3. Descargue el complemento jsHybugger y extraiga su contenido.

    Nota

    Para más información sobre este complemento, consulte el sitio web de jsHybugger.El complemento se puede usar sin licencia, pero las sesiones de depuración estarán limitadas a dos minutos.Para disfrutar de una depuración ilimitada, deberá adquirir una licencia de jshybugger.En las siguientes instrucciones se da por hecho que ha comprado una licencia y ha descargado el archivo de licencia como jshybugger_license.xml.

  4. Coloque la carpeta descomprimida jshybugger-plugin-x.x.x en la carpeta plugins del proyecto.

  5. Coloque el archivo jshybugger_license.xml en la raíz del proyecto.

    Este será el aspecto del proyecto en el Explorador de soluciones.

    Estructura del proyecto después de instalar jsHybugger

  6. Presione F5 para iniciar la depuración en un emulador o dispositivo Android.

    Puede ver los mensajes enviados a la Consola JavaScript y usar el Explorador DOM.

Importante

Debe quitar el complemento jsHybugger y el archivo de licencia del proyecto antes de publicar la aplicación.

El complemento no tiene ningún efecto cuando se usa el emulador Apache Ripple o cuando se depura en dispositivos y emuladores Android 4.4, por lo que no es necesario quitarlo cuando se alterne entre diferentes destinos de Android durante las pruebas.

Los siguientes comandos de la Consola JavaScript son compatibles actualmente con Android:

  • console.assert
    console.clear
    console.count
    console.debug
    console.dir
    console.dirxml
    console.error
    console.info
    console.log
    console.time
    console.timeEnd
    console.warn

Nota

Actualmente no se admite ningún otro comando de consola ni comandos varios de la Consola JavaScript.console.dirxml tiene el mismo comportamiento que console.dir en exploradores basados en Webkit.

Android admite las características disponibles en las pestañas Estilos, Calculado y Diseño del Explorador DOM.

Advertencia

Otras herramientas de diagnóstico y depuración disponibles para Windows no se encuentran disponibles actualmente para Android.Seguiremos mejorando la compatibilidad con la depuración de Android en las siguientes versiones.Para obtener información detallada sobre la compatibilidad con la depuración, consulte los problemas conocidos.

Depurar iOS en un emulador o en un dispositivo

Puede asociar el depurador de Visual Studio al simulador de iOS o a un dispositivo iOS. Se admite iOS 6, 7 y 8.

Nota

Actualmente no se permite conectar el depurador con aplicaciones iOS que usan el complemento InAppBrowser.El complemento Servicios móviles de Azure usa el complemento InAppBrowser y se ve afectado por esta limitación.

Para depurar en iOS

  • Asegúrese de que ha instalado el agente vs-mda-remote en su Mac, que ha iniciado el agente y que ha configurado Visual Studio para conectar con el agente.

  • Si está depurando en un dispositivo real, vaya al dispositivo y elija Ajustes, Safari, Avanzado y habilite el Inspector web.

    Esto permite la depuración remota en su dispositivo. (Este paso no es necesario para depurar en el simulador de iOS).

  • Con la aplicación abierta en Visual Studio e iOS seleccionado como destino de implementación, presione F5.

    Puede llegar a los puntos de interrupción establecidos en el código, usar el Explorador DOM o ver los mensajes enviados a la Consola JavaScript.

    Importante

    El depurador de Visual Studio no se detendrá en los puntos de interrupción que se alcancen antes de que la primera página se cargue en el simulador de iOS o en los dispositivos iOS.Sin embargo, el depurador se detendrá en estos puntos de interrupción después de ejecutar el siguiente comando desde la Consola JavaScript: window.location.reload()

Los siguientes comandos de la Consola JavaScript son compatibles actualmente con iOS:

  • console.assert
    console.clear
    console.count
    console.debug
    console.dir
    console.dirxml
    console.error
    console.info
    console.log
    console.time
    console.timeEnd
    console.warn

Nota

Actualmente no se admite ningún otro comando de consola ni comandos varios de la Consola JavaScript.console.dirxml tiene el mismo comportamiento que console.dir en exploradores basados en Webkit.

Android admite las características disponibles en las pestañas Estilos, Calculado y Diseño del Explorador DOM.

Advertencia

Seguiremos mejorando la compatibilidad con la depuración en las siguientes versiones.Para obtener información detallada sobre la compatibilidad con la depuración, consulte los problemas conocidos.

Depurar Windows 8 y Windows Phone 8

En las aplicaciones Windows se pueden usar las mismas herramientas de depuración de Visual Studio que se utilizarían con cualquier aplicación de la Tienda Windows compilada con HTML y JavaScript. Para más información, consulte Depurar aplicaciones de la Tienda en Visual Studio en el Centro de desarrollo de Windows.

En cuanto a las aplicaciones de Windows Phone, esta versión anterior no permite asociar el depurador de Visual Studio. En su lugar, puede usar el complemento Web Inspector Remote (weinre), descrito en una entrada de blog de Microsoft Open Technologies.

Sugerencia

En la próxima versión de Visual Studio Tools para Apache Cordova se permitirá asociar el depurador de Visual Studio a los proyectos de Windows Phone 8.1.

Como alternativa al uso de weinre para depurar aplicaciones de Windows Phone, puede agregar en su lugar el complemento Console a la aplicación, compilar la aplicación y, luego, abrir en Visual Studio el proyecto de Windows Phone 8 nativo generado. El proyecto nativo se encuentra en la carpeta \bld\Debug\platforms\wp8. Con el proyecto nativo abierto, puede usar la Ventana de resultados para ver los resultados de la consola. Para más información sobre cómo acceder a los proyectos nativos, consulte Acceder a un proyecto nativo de Cordova.

Advertencia

Los cambios que realice en el proyecto nativo se sobrescribirán cuando vuelva a compilar la aplicación Cordova.

Vea también

Conceptos

Introducción a Visual Studio Tools para Apache Cordova

Otros recursos

Preguntas más frecuentes

Problemas conocidos