Déboguer à distance des émulateurs Surface Duo

Dans cet article, vous allez parcourir le processus de débogage à distance de votre contenu web dans l’application Microsoft Edge sur un émulateur Surface Duo à partir d’une instance de bureau de Microsoft Edge. Pour plus d’informations sur le débogage sur un appareil Surface Duo, suivez notre guide pour le débogage à distance Android appareils.

Avant de commencer

• Installez le Kit de développement logiciel (SDK) Surface Duo avant d’exécuter l’émulateur Surface Duo. Voir Obtenir le Kit de développement logiciel (SDK) Surface Duo.

Étape 1 : accéder à edge://inspect

• Ouvrez une instance de bureau de Microsoft Edge, puis accédez à edge://inspect:

Si la edge://inspect page ne reconnaît pas l’émulateur Surface Duo, redémarrez l’émulateur.

Étape 2 : Lancer l’émulateur Surface Duo

• Lancez l’émulateur Surface Duo. L’émulateur affiche deux écrans différents s’exécutant sur l’émulateur :

Étape 3 : Charger votre contenu web dans Microsoft Edge sur l’émulateur Surface Duo

1. Dans les deux écrans, balayez vers le haut sur la barre d’état Favoris de l’émulateur Surface Duo pour afficher le tiroir Applications.

2. Cliquez sur Edge pour lancer l’application Microsoft Edge :

   

3. Dans l’application Microsoft Edge, accédez au site web ou à l’application que vous souhaitez déboguer.

Étape 4 : Déboguer votre contenu web à partir de l’émulateur Surface Duo

1. Revenez à l’instance de bureau de Microsoft Edge.

   La edge://inspect page affiche maintenant l’émulateur SurfaceDuoEmulator avec une liste des onglets ouverts ou des pwA qui s’exécutent sur l’émulateur Surface Duo :

   

2. Dans la liste des onglets ouverts en cours d’exécution sur l’émulateur, cliquez sur inspecter l’onglet contenant le contenu web à déboguer. DevTools s’ouvre dans une nouvelle fenêtre.

3. Cliquez sur Activer/désactiver la capture d’écran pour afficher le contenu web à partir de votre émulateur Surface Duo dans la fenêtre DevTools.

Vous pouvez maintenant utiliser le Microsoft Edge DevTools pour déboguer votre contenu web sur l’émulateur Surface Duo :

Résolution des problèmes

Si SurfaceDuoEmulator n’est pas affiché sur la edge://inspect page, essayez d’ouvrir ou de fermer des onglets dans l’application Microsoft Edge sur le Emulator Surface Duo.

Pour obtenir des étapes de dépannage supplémentaires, consultez la section de résolution des problèmes pour Android appareils.

Impact de la charnière sur la disposition de votre contenu web

Si vous couvrez l’application Microsoft Edge sur les deux écrans de l’émulateur, la capture d’écran reflète la nouvelle taille de l’application, mais pas la charnière.

Pour comprendre l’impact de la charnière sur la disposition de votre contenu web, utilisez l’émulateur Surface Duo au lieu de la capture d’écran.

Ressources supplémentaires

Le web est une plateforme idéale pour la nouvelle classe d’appareils pliables et double écran, car vous pouvez écrire votre code HTML, CSS et JavaScript une seule fois, et l’afficher sur les appareils à écran unique, double écran et pliables. Consultez les ressources supplémentaires suivantes pour commencer à créer du contenu web pour ces nouveaux appareils.

• Documentation du développeur Surface Duo - Documentation relative à la création d’applications sur des appareils à double écran.

• Primitives de plateforme web pour les expériences compatibles sur les appareils pliables - Microsoft Edge explicatif de plateforme web pour les nouvelles API, afin de créer des expériences web sur des appareils pliables et double écran.

• Comment créer des expériences à double écran pour le site web et les applications web - Enregistrement de Microsoft 365 session jour du développeur.