Le développement pour mobile devrait être aussi simple que pour ordinateur. Nous nous sommes efforcés d'optimiser les outils pour les développeurs Chrome afin de vous faciliter la tâche. C'est le moment de vous présenter de nouvelles fonctionnalités qui devraient considérablement améliorer le développement de votre site Web pour mobile. Commençons par le débogage à distance, puis nous découvrirons la bonne émulation mobile.
Castez l'écran de votre appareil sur votre ordinateur
Jusqu'à présent, lors du débogage à distance, vous deviez passer de l'appareil à l'outil de développement, et vice versa. Désormais, l'Enregistreur d'écran affiche l'écran de vos appareils à côté de vos outils de développement. Le voir est bon, mais interagir avec est encore mieux:
- Les clics sur l'enregistrement d'écran sont traduits en actions d'appui, et les événements tactiles appropriés sont déclenchés sur l'appareil.
- Inspecter l'élément sur votre appareil à l'aide du pointeur de l'ordinateur
- Saisissez du texte sur le clavier de votre ordinateur. Toutes les combinaisons de touches sont envoyées à l'appareil. Gagnez énormément de temps en tapant avec vos pouces.
- Faites défiler la page en la faisant glisser avec votre pointeur ou en le faisant simplement glisser sur le pavé tactile de votre ordinateur portable.
La documentation complète sur l'enregistrement d'écran reprend tous ces éléments et bien d'autres, comme l'envoi d'un geste de zoom par pincement. Chrome sur Android Bêta (m32) est requis.
Débogage à distance facile
Il y a 18 mois, Chrome a introduit le débogage à distance approprié pour les navigateurs WebKit. Toutefois, si vous l'essayiez à l'époque, vous deviez télécharger 400 Mo du SDK Android, ajouter le binaire adb à votre $PATH et quelques incantations de ligne de commande magiques.
Nous avons le plaisir de vous annoncer que vous pouvez oublier tout cela. Chrome peut désormais détecter vos appareils connectés par USB et leur parler de manière native. Nous avons implémenté le protocole adb directement via USB dans Chrome. Vous pouvez donc facilement vous rendre sur Menu > Tools > Inspect Devices et démarrer immédiatement votre session de débogage à distance.
Cela fonctionne très bien sur toutes les plates-formes, y compris Chrome OS. Toutefois, sous Windows, vous devez d'abord installer les pilotes USB appropriés pour communiquer avec l'appareil. Si ce n'est pas le cas, vous devez également activer le débogage USB sur l'appareil et vérifier que vous utilisez bien Chrome pour Android Bêta. Lire la documentation complète
Transfert de port pour les projets locaux
Vous développez sur localhost:8000, mais votre téléphone ne parvient pas à atteindre cet emplacement. Nous avons donc ajouté le transfert de port directement dans le workflow de débogage à distance. Vous pouvez désormais travailler facilement sur vos projets complets, sans la moindre contrainte. Le about:inspect, cliquez sur "Transfert de port" pour définir les ports que vous souhaitez utiliser. Ils s'allumeront en vert s'ils peuvent être utilisés.
É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 d'appareils réels vous offre une expérience optimale en termes de performances et de toucher, vous pouvez désormais émuler de manière réaliste de nombreuses caractéristiques d'appareils sur un ordinateur de bureau, ce qui vous fait gagner du temps et accélère la boucle d'itération.
Émuler la taille de l'écran, devicePixelRatio et <meta viewport> avec une simulation complète d'événements tactiles
Si vous utilisiez déjà l'ancienne fonctionnalité de statistiques sur les appareils, sachez qu'il existe désormais une grosse mise à jour. Notre équipe a travaillé dur pour que la nouvelle émulation mobile obtienne une représentation quasi-réaliste de ce que vous verriez sur de vrais appareils. Par exemple, les navigateurs WebKit gèrent un algorithme complexe de dimensionnement automatique du texte. En réalité, chaque appareil est doté d'un facteur spécifique de dimensionnement du texte. Celui-ci change afin d'améliorer la lisibilité du texte. En mode émulation, vous pouvez vérifier que ce comportement est bien appliqué et voir les résultats.
Ratio 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 à faible résolution. Désormais, l'émulation dPR des outils de développement adaptera votre vue pour vous permettre d'effectuer un zoom avant sur un scénario détaillé en PPP. De plus, window.devicePixelRatio, @media (-webkit-min-device-pixel-ratio: 2), image-set( url(pic2x.jpg) 2x, …), etc. seront conformes à votre paramètre, ce qui vous permettra de voir comment votre application s'adapte, y compris en chargeant différents composants spécifiques aux PPP.
L'émulation d'appareil ne s'étend pas complètement aux fonctionnalités du navigateur ni aux bugs. Ainsi, lors de l'émulation d'iOS, WebGL continuera de fonctionner et vous éviterez de rencontrer le bug de zoom d'orientation iOS 5. Pour découvrir cette variabilité, rendez-vous sur l'appareil.
Émulation appropriée de <meta viewport> (et @viewport)
Le test du comportement de width=device-width et minimum-scale:1.0 était auparavant un jeu réservé aux appareils. Vous pouvez maintenant essayer rapidement différentes fenêtres d'affichage et observer comment elles s'affichent.
Simulation d'événement tactile
Le paramètre Émuler l'écran tactile permet de s'assurer que vos clics sont interprétés comme touchstart, et ainsi de suite. De plus, les événements synthétiques comme le zoom, le défilement et le panoramique fonctionnent. Pour zoomer par pincement, faites simplement shift+faire glisser ou shift+défiler pour zoomer sur le contenu. Vous profiterez ainsi d'une vue imprenable sur le contenu mis à l'échelle au-delà de la fenêtre d'affichage.
Enfin, le spoofing de l'user-agent (à la fois au niveau de l'en-tête de la requête et au niveau du window.navigator), de la géolocalisation et de l'émulation d'orientation vous permet 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 appropriée (dPR, UA appliqué pour cet appareil, ainsi que des événements tactiles complets et une fenêtre d'affichage émulée). Vous pouvez essayer des préréglages spécifiques ou modifier facilement ces caractéristiques une par une.
Accédez à devtools.chrome.com pour accéder à la documentation complète sur l'émulation mobile avec les outils de développement.
Démonstration
Pour voir la démonstration complète de toutes ces fonctionnalités en action, suivez mon entretien de 23 minutes lors du Chrome Dev Summit consacré aux outils de développement pour mobile: