Partager via

Déboguer votre application générée à l'aide de Visual Studio Tools for Apache Cordova

  • Article

Cet article fait référence à Visual Studio Tools pour Apache Cordova, qui correspond à la version préliminaire du logiciel. Les fonctionnalités décrites sont dans l'aperçu et sont sujettes à modification. Vous pouvez télécharger l'aperçu à partir du Centre de téléchargement Microsoft.

Visual Studio offre une expérience homogène et commune des outils pour le développement d'applications Cordova pour les différents types d'applications et plateformes d'appareils. Cependant, dans cette première version, certaines plateformes d'appareils ne prennent pas en charge la totalité des fonctionnalités de débogage et de diagnostic de Visual Studio, comme indiqué dans le tableau suivant.

Appareil ou système d'exploitation

Débogueur Visual Studio pris en charge ?

Messages de la console pris en charge ?

Solution de contournement

Android 4.4

Oui

Oui

-

Versions d'Android 2.3.3 à 4.3

Non (voir les informations sur jsHybugger, plus loin dans cet article)

Oui

-

iOS 6, 7, 8

Oui

Oui

-

Windows 8, 8.1 (Windows Store)

Oui

Oui

-

Windows Phone 8, 8.1

Non

Non (utilisez le plug-in Console)

Utilisez Web Inspector Remote (weinre) ou le plug-in Console. Voir Déboguer Windows 8 et Windows Phone 8 plus loin dans cet article.

Windows Server 2012 R2

Oui

Oui

Pour exécuter l'application sur Windows Server 2012 R2, vous devez activer l'option Expérience utilisateur.

Notes

Si vous utilisez Windows 7, vous pouvez développer des applications pour Android et iOS, mais pas pour Windows ou Windows Phone.

Dans cet article :

  • Déboguer Android et iOS dans Apache Ripple

  • Déboguer Android sur l'émulateur ou sur un appareil

  • Déboguer iOS sur l'émulateur ou sur un appareil

  • Déboguer Windows 8 et Windows Phone 8

Déboguer Android et iOS dans Apache Ripple

Vous pouvez attacher le débogueur Visual Studio à une application qui s'exécute dans l'émulateur Apache Ripple.

Pour déboguer dans Ripple

  • Après avoir ouvert votre application dans Visual Studio, appuyez sur F5.

    Vous pouvez accéder à des points d'arrêt définis dans votre code, utiliser l'Explorateur DOM ou afficher les messages envoyés à la console JavaScript.

    L'illustration suivante montre un point d'arrêt défini dans l'éditeur de code.

    Définition d'un point d'arrêt pendant le débogage à l'aide de Ripple

    Ici, le débogueur Visual Studio atteint le point d'arrêt lors d'un débogage dans l'émulateur Ripple.

    Point d'arrêt intercepté par le débogueur de Visual Studio

Important

Le débogueur Visual Studio ne s'arrêtera pas aux points d'arrêt qui sont atteints avant que la première page se charge dans Ripple.Le débogueur s'arrêtera cependant à ces points d'arrêt après une actualisation du navigateur.

Les commandes de la console JavaScript suivantes sont actuellement prises en charge dans 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

Notes

Les autres commandes de console ou les autres commandes diverses de la console JavaScript ne sont actuellement pas prises en charge.console.dirxml a le même comportement que console.dir sur les navigateurs Webkit.

L'Explorateur DOM active le débogage du code HTML et CSS. Les fonctionnalités disponibles sous les onglets Styles, Calculé et Disposition de l'Explorateur DOM sont prises en charge dans Ripple.

Notes

Pour des informations détaillées sur la prise en charge du débogage, consultez Problèmes connus.

Déboguer Android sur l'émulateur ou sur un appareil

Vous pouvez attacher le débogueur Visual Studio à l'émulateur Android ou à un appareil Android pour déboguer votre application sur Android 4.4.

Si vous utilisez une version d'Android comprise entre 2.3.3 et 4.3, vous pouvez installer le plug-in jsHybugger pour activer les diagnostics Android (Explorateur DOM, console et débogage). Ce plug-in instrumente localement votre code pour activer le débogage à distance sur les émulateurs et les appareils Android, et prend en charge Android 2.3.3 et les versions ultérieures.

Pour déboguer sur Android 4.4

  • Après avoir ouvert votre application dans Visual Studio, appuyez sur F5.

    Si vous utilisez Android 4.4, vous pouvez accéder aux points d'arrêt définis dans votre code, afficher les messages envoyés à la console JavaScript et utiliser l'Explorateur DOM.

    Important

    Le débogueur Visual Studio ne s'arrêtera pas aux points d'arrêt qui sont atteints avant que la première page se charge dans les émulateurs Android 4.4 ou dans les appareils Android.Cependant, le débogueur s'arrêtera à ces points d'arrêt une fois que vous aurez exécuté la commande suivante à partir de la console JavaScript : window.location.reload()

Pour déboguer sur une version d'Android comprise entre 2.3.3 et 4.3 avec le plug-in jsHybugger

  1. Ouvrez votre projet Cordova dans Visual Studio.

  2. Dans votre projet, créez un dossier plugins, s'il n'existe pas déjà. (Pour ajouter un dossier, ouvrez le menu contextuel pour votre projet dans l'Explorateur de solutions, choisissez Ajouter, Nouveau dossier, puis définissez le nom du dossier à plugins.)

  3. Téléchargez le plug-in jsHybugger et extrayez son contenu.

    Notes

    Pour plus d'informations sur ce plug-in, consultez le site web jsHybugger.Vous pouvez utiliser le plug-in sans licence, mais les sessions de débogage sont alors limitées à deux minutes.Pour un débogage illimité, vous devez acheter une licence jshybugger.Les instructions suivantes supposent que vous avez acheté une licence et téléchargé le fichier de licence jshybugger_license.xml.

  4. Placez le dossier jshybugger-plugin-x.x.x décompressé dans le dossier plugins de votre projet.

  5. Placez le fichier jshybugger_license.xml à la racine de votre projet.

    Voici à quoi ressemblera votre projet dans l'Explorateur de solutions.

    Structure de projet après l'installation de jsHybugger

  6. Appuyez sur F5 pour démarrer le débogage sur un émulateur ou un appareil Android.

    Vous pouvez afficher les messages envoyés à la console JavaScript et utiliser l'Explorateur DOM.

Important

Vous devez supprimer de votre projet le plug-in jsHybugger et le fichier de licence avant de publier votre application.

Le plug-in n'a pas d'effet quand vous utilisez l'émulateur Apache Ripple ou quand vous déboguez sur des émulateurs et des appareils Android 4.4. Il n'est donc pas nécessaire de le supprimer quand vous basculez entre différentes cibles Android pendant les tests.

Les commandes de la console JavaScript suivantes sont actuellement prises en charge sur 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

Notes

Les autres commandes de console ou les autres commandes diverses de la console JavaScript ne sont actuellement pas prises en charge.console.dirxml a le même comportement que console.dir sur les navigateurs Webkit.

Les fonctionnalités disponibles sous les onglets Styles, Calculé et Disposition de l'Explorateur DOM sont prises en charge sur Android.

Avertissement

Les autres outils de débogage et de diagnostic disponibles pour Windows ne sont pas disponibles actuellement pour Android.Nous allons continuer à améliorer la prise en charge du débogage Android dans les versions ultérieures.Pour des informations détaillées sur la prise en charge du débogage, consultez Problèmes connus.

Déboguer iOS sur un émulateur ou sur un appareil

Vous pouvez attacher le débogueur Visual Studio à l'émulateur iOS ou à un appareil iOS. Les versions iOS 6, 7 et 8 sont prises en charge.

Notes

Actuellement, l'association du débogueur à des applications iOS utilisant le plug-in InAppBrowser n'est pas prise en charge.Le plug-in Azure Mobile Services utilise le plug-in InAppBrowser et est affecté par cette limitation.

Pour déboguer sur iOS

  • Assurez-vous d'avoir installé l'agent vs-mda-remotet sur votre Mac, démarré l'agent et configuré Visual Studio pour se connecter à l'agent.

  • Si vous effectuez un débogage sur un appareil réel, accédez à l'appareil et choisissez Paramètres, Safari, Avancé, puis activez Web Inspector.

    Cela permet d'effectuer un débogage à distance sur votre appareil. (Cette étape n'est pas requise pour déboguer sur le simulateur iOS.)

  • Ouvrez votre application dans Visual Studio et sélectionnez iOS comme cible de déploiement, puis appuyez sur F5.

    Vous pouvez accéder à des points d'arrêt définis dans votre code, afficher les messages envoyés à la console JavaScript et utiliser l'Explorateur DOM.

    Important

    Le débogueur Visual Studio ne s'arrêtera pas aux points d'arrêt qui sont atteints avant le chargement de la première page dans le simulateur iOS ou sur les appareils iOS.Cependant, le débogueur s'arrêtera à ces points d'arrêt une fois que vous aurez exécuté la commande suivante à partir de la console JavaScript : window.location.reload()

Les commandes de la console JavaScript suivantes sont actuellement prises en charge sur 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

Notes

Les autres commandes de console ou les autres commandes diverses de la console JavaScript ne sont actuellement pas prises en charge.console.dirxml a le même comportement que console.dir sur les navigateurs Webkit.

Les fonctionnalités disponibles sous les onglets Styles, Calculé et Disposition de l'Explorateur DOM sont prises en charge sur iOS.

Avertissement

Nous continuerons à améliorer la prise en charge du débogage dans les versions ultérieures.Pour des informations détaillées sur la prise en charge du débogage, consultez Problèmes connus.

Déboguer Windows 8 et Windows Phone 8

Pour les applications Windows, vous pouvez utiliser les mêmes outils de débogage Visual Studio que ceux que vous utiliseriez pour toute application Windows Store utilisant HTML et JavaScript. Pour plus d'informations, consultez Déboguer des applications Windows Store dans Visual Studio dans le Centre de développement Windows.

Pour les applications Windows Phone, cette première version ne gère pas l'attachement du débogueur Visual Studio. Vous pouvez utiliser à la place Web Inspector Remote (weinre), qui est décrit dans un post de blog Microsoft Open Technologies.

Conseil

L'association du débogueur Visual Studio aux projets Windows Phone 8.1 sera prise en charge dans la prochaine version de Visual Studio Tools for Apache Cordova.

Une alternative à l'utilisation de weinre pour le débogage Windows Phone consiste à ajouter le plug-in Console à votre application, à générer votre application, puis à ouvrir le projet Windows Phone 8 natif généré dans Visual Studio. Vous trouverez le projet natif sous le dossier \bld\Debug\platforms\wp8. Après avoir ouvert le projet natif, vous pouvez utiliser la fenêtre Sortie pour afficher la sortie de la console. Pour plus d'informations sur l'accès aux projets natifs, consultez Accéder à un projet Cordova natif.

Avertissement

Les modifications apportées au projet natif sont remplacées quand vous régénérez l'application Cordova.

Voir aussi

Concepts

Prise en main de Visual Studio Tools for Apache Cordova

Autres ressources

FAQ

Problèmes connus