Le développement pour mobile doit être aussi simple que le développement pour ordinateur. Nous avons travaillé dur dans Chrome DevTools pour vous faciliter la tâche. Il est temps de vous présenter de nouvelles fonctionnalités qui devraient considérablement améliorer votre développement Web mobile. Nous allons d'abord vous présenter le débogage à distance, puis l'émulation mobile appropriée.
Caster l'écran de votre appareil sur votre ordinateur
Jusqu'à présent, lors du débogage à distance, vous deviez passer de votre appareil à vos outils de développement. Désormais, l'enregistrement d'écran affiche l'écran de votre appareil juste à côté de vos outils de développement. Il est important de voir les données, mais il est encore plus important d'interagir avec elles:
- Les clics sur l'enregistrement d'écran sont convertis en pressions, et les événements tactiles appropriés sont déclenchés sur l'appareil.
- Inspecter l'élément sur votre appareil avec le pointeur de votre ordinateur
- Saisissez du texte sur le clavier de votre ordinateur. Toutes les frappes sont envoyées à l'appareil. Cela vous fait gagner un temps fou par rapport à la saisie avec les pouces.
- Faites défiler la page en la faisant glisser avec le pointeur ou en faisant glisser le pavé tactile de votre ordinateur portable.
La documentation complète sur les enregistrements d'écran contient toutes ces informations et plus encore, comme l'envoi d'un geste de pincement pour zoomer. Chrome sur Android Bêta (m32) requis.
Débogage à distance facile
Il y a 18 mois, Chrome a introduit un débogage à distance approprié pour les navigateurs WebKit. Toutefois, si vous l'avez essayé à l'époque, vous avez dû télécharger un SDK Android de 400 Mo, ajouter le binaire adb à votre $PATH et effectuer quelques incantations magiques en ligne de commande.
Nous sommes heureux de vous annoncer que vous pouvez désormais oublier tout cela. Chrome peut désormais détecter et communiquer de manière native avec vos appareils connectés par USB. Nous avons implémenté le protocole adb directement via USB dans Chrome. Vous pouvez ainsi accéder facilement à Menu > Tools > Inspect Devices et démarrer immédiatement votre session de débogage à distance.
Cette méthode fonctionne parfaitement sur toutes les plates-formes, y compris ChromeOS. Notez toutefois que sous Windows, vous devez d'abord installer les pilotes USB appropriés pour communiquer avec l'appareil. Si vous n'avez jamais essayé, vous devrez également activer le débogage USB sur l'appareil et confirmer que vous utilisez la version bêta de Chrome pour Android. Consultez la documentation complète.
Transfert de port pour les projets en local
Vous développez sur localhost:8000, mais votre téléphone ne peut pas y accéder. Nous avons donc ajouté le transfert de port directement dans le workflow de débogage à distance. Vous pouvez désormais travailler facilement sur l'ensemble de vos projets, sans avoir à utiliser des astuces de tunnelisation. Sur about:inspect, cliquez sur "Transfert de port" pour définir les ports que vous souhaitez rendre disponibles. Ils s'allumeront en vert s'ils sont prêts à l'emploi.
Émulation mobile
Vous n'avez pas toujours les appareils dont vous avez besoin pour tester la compatibilité, n'est-ce pas ? Bien que le débogage à distance sur des appareils réels vous donne la meilleure idée des performances et de la réactivité tactile, vous pouvez désormais émuler de manière réaliste de nombreuses caractéristiques d'appareils sur ordinateur, ce qui vous fait gagner du temps et accélère votre boucle d'itération.
Émuler la taille de l'écran, devicePixelRatio et <meta viewport> avec une simulation complète des événements tactiles
Si vous avez déjà vu la précédente fonctionnalité "Métriques de l'appareil", vous constaterez que la nouvelle version est bien plus complète. L'équipe a travaillé dur pour que la nouvelle émulation mobile offre une représentation quasi réaliste de ce que vous verriez sur des appareils réels. Par exemple, les navigateurs WebKit gèrent un algorithme de redimensionnement automatique du texte complexe. En fait, chaque appareil dispose d'un "facteur d'ajustement" spécifique pour le redimensionnement automatique du texte, qui change pour que le texte reste lisible. En mode émulation, vous pouvez vérifier que ce comportement est appliqué et voir les résultats.
Rapport de pixels de l'appareil
Jusqu'à présent, il était presque impossible de voir ce qu'un appareil haute résolution affiche sur un appareil basse résolution. L'émulation dPR dans DevTools adapte désormais votre vue pour vous permettre de faire un zoom avant dans un scénario de PPP élevé. De plus, vous pouvez vous attendre à ce que window.devicePixelRatio, @media (-webkit-min-device-pixel-ratio: 2), image-set( url(pic2x.jpg) 2x, …), etc. reflètent votre paramètre, ce qui vous permet de voir comment votre application s'adapte, y compris en chargeant différents éléments spécifiques au dpi.
L'émulation d'appareil ne s'étend pas aux fonctionnalités ni aux bugs du navigateur. Ainsi, lors de l'émulation d'iOS, WebGL continuera de fonctionner et vous ne rencontrerez pas le bug de zoom d'orientation iOS 5. Pour découvrir cette variabilité, accédez à l'appareil.
Émulation correcte de <meta viewport> (et de @viewport)
Le test du comportement de width=device-width et minimum-scale:1.0 était auparavant un jeu réservé aux appareils. Vous pouvez désormais tester rapidement différents vues d'affichage et observer leur rendu.
Simulation d'événements tactiles
Le paramètre Émuler un écran tactile garantit que vos clics sont interprétés comme touchstart, etc. De plus, les événements synthétiques tels que le zoom, le défilement et le panoramique fonctionneront. Pour faire un zoom avant avec la fonctionnalité Pincer pour zoomer, il vous suffit d'appuyer sur shift+faire glisser ou shift+faire défiler pour faire un zoom avant sur le contenu. Vous obtiendrez une vue optimale de la mise à l'échelle du contenu au-delà de la fenêtre d'affichage.
Enfin, les techniques d'usurpation d'user-agent (au niveau de l'en-tête de la requête et du niveau window.navigator), de géolocalisation et d'émulation d'orientation vous permettent d'explorer toutes les fonctionnalités de votre appareil.
Préréglages de l'appareil
Les préréglages d'émulation vous permettent de sélectionner un téléphone ou une tablette, et d'obtenir la taille d'écran, le dPR et l'UA appropriés pour cet appareil, ainsi que les événements tactiles complets et la vue d'ensemble émulés. Vous pouvez essayer des préréglages spécifiques ou ajuster facilement ces caractéristiques une par une.
Accédez à devtools.chrome.com pour consulter la documentation complète sur l'émulation mobile avec les outils pour les développeurs.
Démo
Pour découvrir toutes ces fonctionnalités en action, regardez ma présentation de 23 minutes sur les outils pour les développeurs pour mobile lors du Chrome Dev Summit: