Débogage sur les appareils mobiles

Dans cette rubrique, vous apprendrez à déboguer JavaScript sur les appareils mobiles. Pendant le développement, les tests et le débogage du contenu sur les plates-formes mobiles peuvent être très difficiles.

Aperçu

Dans ce document, vous apprendrez comment démarrer le débogage sur les appareils mobiles et couvre les solutions suivantes :

  • Débogage sur les appareils iOS
  • Débogage sur les appareils Android
  • Utilisation de Charles sur les appareils mobiles

Débogage avec iOS

Configuration minimale requise pour le débogage iOS

  • Safari version 6+ sous Mac macOS
  • iPhone ou iPad avec iOS 6+

Utilisation du débogage à distance Safari

La mise à jour iOS 6 d'Apple a introduit Safari Remote Debogging, qui vous permet de déboguer des pages Web dans l'application Safari sur les appareils iOS. Pour commencer, suivez les étapes ci-dessous :

  1. Connectez votre appareil iOS à votre machine via un câble USB.
  2. Sur votre appareil, ouvrez le Paramètres application. Sélectionner Safari , faites défiler vers le bas de la page et ouvrez le Avancé menu. Activer le Inspecteur Web option.
    Inspecteur Web
    Inspecteur Web
  3. Toujours sur votre appareil, ouvrez l'application Safari et accédez à n'importe quelle page Web.
  4. Sur votre Mac, lancez Safari, ouvrez les Préférences (Safari > Préférences) et accédez à la section Avancée section. Activez le menu Afficher le développement dans l' option de barre de menus.
    Afficher le menu Développer
    Afficher le menu Développer
  5. Ouvrez le Développer menu. Vous verrez votre appareil iOS dans la liste. Lorsque vous passez la souris sur le nom de votre appareil, l'URL du site que vous avez consultée s'affiche sur votre appareil.
    Trouver l'appareil
    Trouver l'appareil
  6. Sélectionnez l'URL et une fenêtre Web Inspector s'ouvre, vous permettant de prévisualiser, d'inspecter et de déboguer le contenu de votre navigateur mobile à partir de votre bureau.
    Débogage sur le Bureau
    Débogage sur le Bureau
  7. Dans le Ressources section, vous pouvez prévisualiser et inspecter la page Web. Le survol des éléments dans l' Inspecteur Web met en surbrillance les éléments correspondants dans le navigateur de votre appareil iOS.
    Inspection des éléments
    Inspection des éléments
  8. Vous pouvez également utiliser les sections Débogueur et Console pour déboguer davantage votre page en définissant des points d'arrêt, en journalisant des données, etc.

Débogage avec Android

Configuration minimale requise pour le débogage Android

  • Chrome 32+ s'exécutant sur Mac ou Windows
  • Appareil Android avec Chrome pour Android 32+

Remarque : Les étapes de cette section ont été écrites à l'aide d'un appareil fonctionnant sous Android 11.

Activation du débogage sur votre appareil

Avant de pouvoir commencer à déboguer du contenu sur votre appareil, vous devez activer le débogage USB dans les paramètres de votre appareil.

  1. Si vous exécutez Android 4.2+, vous devez activer les options développeur de votre appareil avant de pouvoir activer le débogage USB. Sur votre appareil, ouvrez le Paramètres l'application et sélectionnez le A propos du téléphone menu. Localisez le numéro de construction de votre appareil et touchez-le sept fois.
  2. Saisissez le mot de passe de votre appareil. Vous devriez voir apparaître un message indiquant que vous êtes maintenant un développeur.
  3. Pour accéder à vos options de développeur dans Android 11, retournez dans Paramètres et sélectionnez Système.
  4. Développez Avancé, puis appuyez sur Options du développeur.
    Options du développeur
    Options du développeur
  5. Faites défiler vers le bas jusqu'au débogage USB et activez la bascule.
    Activer le débogage USB
    Activer le débogage USB
  6. Pour plus de détails, voir le document Configurer les options de développement sur l'appareil d' Android.

Débogage à distance à l'aide de Chrome pour Android

Maintenant que le débogage USB est activé sur votre appareil, procédez comme suit pour démarrer le débogage à distance avec Chrome :

  1. Sur votre ordinateur, lancez Chrome et accédez à chrome://inspect#devices.
  2. Cochez la case Découvrir les périphériques USB.
    Découvrir les périphériques USB
    Découvrir les périphériques USB
  3. Connectez votre appareil à votre machine à l'aide d'un câble USB. Sur votre appareil, une boîte de dialogue vous demandera si vous souhaitez autoriser le débogage USB. Sélectionnez Autoriser pour permettre à votre ordinateur de se connecter à votre appareil.
    Autoriser la connexion au périphérique
    Autoriser la connexion au périphérique
  4. Sur votre appareil, ouvrez l'application Chrome et accédez à une page Web.
  5. Revenir à Chrome sur votre ordinateur. Sur la chrome://inspect#devices page, vous devriez voir votre appareil connecté. Sous le nom de votre appareil, vous pourrez voir une liste de toutes les pages ouvertes dans Chrome sur votre appareil.
    Périphériques connectés
    Périphériques connectés
  6. Pour commencer le débogage d'une page Web, sélectionnez le lien Inspecter sous l'URL de la page. Cela ouvrira les outils de développement de Chrome.
    Inspecter la page Web
    Inspecter la page Web
  7. A gauche du Éléments onglet, vous pouvez sélectionner l'icône de l'appareil pour ouvrir la fonction Screencast de DevTool. Cela vous permet d'ouvrir un aperçu en direct du contenu tel qu'il apparaît sur votre appareil mobile. Pour plus d'informations sur la façon dont vous pouvez utiliser le screencasting pour interagir avec votre appareil, consultez la documentation de Google.

Mise en place de Charles Proxy

Charles est un proxy web qui peut être exécuté sur votre propre ordinateur, vous permettant d'enregistrer les données envoyées et reçues via votre navigateur Web. Visitez le site Web de Charles pour plus d'informations sur cette application.

Exigences minimales pour Charles

  • Charles est compatible avec Windows, Mac et Linux
  • Appareil iOS et/ou Android

Suivez les étapes ci-dessous pour faire fonctionner Charles sur votre machine.

  1. Télécharger et installer Charles sur votre appareil.
  2. Sur votre ordinateur, exécutez Charles. Dans le menu, sélectionnez Proxy > Paramètres proxy. Assurez-vous qu'un port a été attribué (par exemple, 8888).
    Paramètres du proxy
    Paramètres du proxy
  3. Sélectionnez OK pour enregistrer les modifications et fermer la boîte de dialogue.
  4. Dans le menu, sélectionnez Proxy > SSL Proxy Settings. Assurez-vous que Activer le proxy SSL l'option est sélectionnée.
    Paramètres du proxy SSL
    Paramètres du proxy SSL
  5. Dans le Emplacement rubrique, sélectionnez le Ajouter bouton. Dans le Modifier l'emplacement boîte de dialogue, accédez à la Port champ et entrez 443. Sélectionner D'accord pour enregistrer cette modification.
    Emplacement port 443
    Emplacement port 443
  6. Sélectionner D'accord pour fermer le Modifier l'emplacement dialogue.
    Paramètres SSL avec emplacement
    Paramètres SSL avec emplacement
  7. Sélectionner d'accord pour sortir du Paramètres de proxy SSL dialogue.
  8. Accédez à Aide > SSL Proxying > Installer le certificat racine Charles sur un appareil mobile ou un navigateur distant.
    Installer le certificat racine
    Installer le certificat racine
  9. Vous devriez voir un message qui identifie l'adresse IP et le numéro de port du serveur local (8888) que vous utiliserez pour configurer le périphérique. Vous devriez également voir l'URL pour télécharger et installer le certificat. Copiez ces fichiers sur votre ordinateur pour une utilisation ultérieure.
    Message de certificat
    Message de certificat

Utiliser Charles avec des appareils iOS

Dans cette section, vous apprendrez à configurer votre appareil iOS pour qu'il fonctionne avec Charles sur votre ordinateur.

  1. Sur votre appareil, assurez-vous que vous êtes connecté au même réseau que votre ordinateur. Vous pouvez le vérifier en accédant aux paramètres > Wifi et en sélectionnant le nom du réseau pour afficher les options avancées.
    Réseau de périphériques
    Réseau de périphériques
  2. Dans la section HTTP en bas, sélectionnez Manuel mode. Ensuite, ajoutez l'adresse IP du serveur et le numéro de port (8888) que vous avez copiés à partir de Charles lors d'une étape précédente.
    Détails Wifi
    Détails Wifi
  3. Sur votre appareil, ouvrez un navigateur et accédez à https://www.charlesproxy.com/getssl. Vous serez redirigé vers les paramètres de votre appareil où vous serez invité à installer le Certificat racine personnalisé du proxy Charles profil. Cliquez sur le bouton Installer pour installer le certificat Charles sur votre appareil.
    Installer le certificat Charles
    Installer le certificat Charles
  4. Suivez les étapes pour installer le certificat Charles. Lorsque vous avez terminé, sélectionnez Terminé.
    Profil Charles installé
    Profil Charles installé
  5. Ensuite, vous êtes prêt à vous assurer que votre appareil approuve le certificat Charles. Sur votre appareil, accédez à Généralités à > propos des paramètres > d'approbation des certificats. Ici vous devriez trouver le certificat Charles Proxy.
    Paramètres de confiance des certificats
    Paramètres de confiance des certificats
  6. Activez le certificat Charles. Notez le message d'avertissement. Vous pouvez désactiver ce certificat lorsque vous ne déboguez pas avec Charles.
    Activer le certificat d'approbation
    Activer le certificat d'approbation
  7. Maintenant, vous pourrez voir toutes les données envoyées et reçues dans Charles.
    Voir les données Charles
    Voir les données Charles

Utilisation de Charles avec Android 11

Dans cette section, vous apprendrez à configurer votre appareil Android pour qu'il fonctionne avec Charles sur votre ordinateur.

  1. Sur votre appareil, allez dans Paramètres > Réseau & internet.
  2. Appuyez sur Wi-Fi. Vous verrez la liste des réseaux auxquels vous êtes connecté sur votre appareil.
  3. Sélectionnez le réseau sans fil auquel vous êtes actuellement connecté. N'oubliez pas que ce réseau doit correspondre à celui auquel vous êtes connecté sur votre ordinateur...
  4. Appuyez sur l'icône en forme de crayon pour modifier vos paramètres Internet.
  5. Réglez Proxy sur Manuel.
  6. Collez la valeur de votre nom d'hôte Charles Proxy, que vous auriez dû copier dans votre bloc-notes à l'étape ci-dessus. Pour le port proxy, entrez 8888.
    Valeurs de l'hôte/du port du proxy
    Valeurs de l'hôte/du port du proxy
  7. Appuyez sur Enregistrer.
  8. Sur votre appareil, ouvrez un navigateur, naviguez jusqu'à https://www.charlesproxy.com/getssl/. Le certificat SSL de Charles devrait être automatiquement téléchargé sur votre appareil.
  9. Pour installer le certificat avec Android 11, procédez comme suit :
    1. Ouvrir les paramètres.
    2. Naviguer vers Sécurité > Chiffrement & informations d'identification > Installer un certificat.
    3. Sélectionnez Certificat CA.
    4. Un avertissement s'affiche. Sélectionnez Installer quand même.
      Installer quand même
      Installer quand même
    5. Sélectionnez le certificat SSL du proxy Charles.
    6. Confirmez l'installation du certificat.
  10. Dans le navigateur par défaut de votre appareil, accédez à un site Web. Vous pourrez voir toutes les données envoyées et reçues dans Charles. Notez qu'il peut être utile de filtrer la liste des structures (dans ce cas, filtre pour brightcove).
    Voir Transfert de données
    Voir Transfert de données
  11. Pour filtrer le trafic réseau afin de ne voir que le trafic provenant de votre appareil Android et non de votre machine locale, procédez comme suit :
    1. Dans le menu supérieur de Charles, sélectionnez Proxy.
    2. Décochez la case Proxy macOS (ou Proxy Windows).
  12. Facultatif: Pour effacer les certificats de votre appareil (exécutant Android 11) :
    1. Sur votre appareil, ouvrez Paramètres.
    2. Naviguez vers Sécurité > Chiffrement & credentials.
    3. Appuyez sur Effacer les informations d'identification.
    4. Appuyez sur OK pour confirmer.

Utilisation de Charles avec Android 7

À partir d'Android 7 (SDK v24), le réseau SSL n'est plus directement visible car cette version du SDK a introduit une nouvelle fonctionnalité de sécurité. Pour voir le trafic réseau via Charles, vous devez indiquer explicitement à votre application Android d'autoriser les interceptions SSL.

  1. Dans votre application, ouvrez le AndroidManifest.xml déposer.

    Fichier manifeste Android

  2. Dans la application section, ajoutez une networkSecurityConfig option.

    Option de sécurité du réseau

  3. Dans un dossier de ressources XML, ajoutez un network_security_config.xml fichier comme suit :

    Fichier xml de sécurité du réseau
  4. C'est ça. Vous devriez maintenant voir tout le trafic réseau passer par Charles.

Ressources

Pour plus de détails, voir les points suivants :