Développer pour les mobiles devrait être tout aussi facile que pour le bureau. Nous avons beaucoup travaillé dans les outils pour les développeurs Chrome afin de vous faciliter la tâche. Il est temps de présenter de nouvelles fonctionnalités qui devraient considérablement améliorer votre développement Web pour mobile. Commençons par le débogage à distance, puis nous découvrirons l'émulation mobile appropriée.
Enregistreur d'écran de l'appareil sur le bureau
Jusqu'à présent, pour le débogage à distance, vous deviez passer de votre appareil à vos outils de développement, et inversement. Désormais, l'Enregistreur d'écran affiche l'écran de vos appareils à côté de vos outils de développement. Le fait de le voir, c'est bien, mais interagir avec lui est encore mieux:
- Les clics sur l'enregistrement d'écran sont traduits 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 curseur de votre ordinateur
- Saisissez du texte à l'aide du clavier de votre ordinateur. Toutes les combinaisons de touches sont envoyées à l'appareil. Un gain de temps énorme en tapant avec votre pouce.
- Faites défiler la page en la faisant glisser avec votre curseur ou en la faisant glisser sur le pavé tactile de votre ordinateur portable.
La documentation complète sur l'enregistrement d'écran capture toutes ces informations et bien plus encore, comme l'envoi d'un geste de pincement pour zoomer. Chrome sur Android version bêta (m32) requis.
Débogage à distance facile
Il y a 18 mois, Chrome a introduit le débogage à distance approprié pour les navigateurs WebKit, mais si vous essayiez à l'époque, vous deviez gérer un téléchargement du SDK Android de 400 Mo, en ajoutant le binaire adb à votre $PATH et quelques incantations magiques en ligne de commande.
Aujourd'hui, nous avons le plaisir de vous annoncer que vous pouvez tout oublier. Chrome peut désormais détecter vos appareils connectés par USB et communiquer avec eux de manière native. Nous avons implémenté le protocole adb directement via USB dans Chrome. Vous pouvez donc facilement accéder à Menu > Tools > Inspect Devices et lancer 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 devrez d'abord installer les pilotes USB appropriés pour communiquer avec l'appareil. Si vous ne l'avez jamais essayé auparavant, vous devez également activer le débogage USB sur l'appareil et vérifier que vous utilisez Chrome pour Android Bêta. Lire la documentation complète
Transfert de port pour les projets locaux
Vous effectuez le développement sur localhost:8000, mais votre téléphone ne parvient pas à accéder à cette adresse. Nous avons donc ajouté le transfert de port directement dans le workflow de débogage à distance. Vous pouvez désormais travailler sur l'intégralité de votre projet sans vous soucier du tunnel. Sur about:inspect, cliquez sur "Transfert de port" pour définir les ports que vous souhaitez rendre disponibles. Ils s'allument 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 ? Le débogage à distance de vrais appareils va vous offrir une expérience optimale des performances et du toucher, mais 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 la simulation d'événements tactiles complets
Si vous avez découvert l'ancienne fonctionnalité "Métriques d'appareil", sachez qu'il s'agit d'une mise à niveau considérable. L'équipe a travaillé dur pour que la nouvelle émulation mobile obtienne une représentation proche de la réalité de ce que vous verriez sur des appareils réels. Par exemple, les navigateurs WebKit utilisent un algorithme complexe de dimensionnement automatique du texte. En fait, chaque appareil dispose d'un "fudge" spécifique pour le dimensionnement automatique du texte, qui est modifié afin de rendre le texte lisible. En mode émulation, vous pouvez vérifier que ce comportement est 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 à PPP élevé affichait sur un appareil à faible PPP. Désormais, l'émulation dPR dans les outils de développement adapte votre vue pour vous permettre de zoomer sur un scénario de PPP profond. De plus, window.devicePixelRatio, @media (-webkit-min-device-pixel-ratio: 2), image-set( url(pic2x.jpg) 2x, …), etc. doivent refléter votre paramètre, ce qui vous permet de voir comment votre application s'adapte, par exemple en chargeant différents assets spécifiques aux dpi.
L'émulation de l'appareil ne s'étend pas aux fonctionnalités du navigateur ou aux bugs. Ainsi, lors de l'émulation d'iOS, WebGL continuera de fonctionner et vous ne rencontrerez pas le bug de zoom en orientation iOS 5. Pour constater cette variabilité, passez à l'appareil.
Émulation correcte de <meta viewport> (et @viewport)
Auparavant, le test du comportement de width=device-width et minimum-scale:1.0 était réservé à un appareil. Vous pouvez désormais tester 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 garantit 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 fonctionneront. Pour pincer et zoomer, il vous suffit de shiftfaire glisser le curseur ou de faire défiler la page shift pour zoomer sur le contenu. Vous pouvez ainsi visualiser l'affichage du contenu au-delà de la fenêtre d'affichage.
Enfin, vos solutions de spoofing user-agent (au niveau de l'en-tête de requête et de window.navigator), de la géolocalisation et de l'émulation de l'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'appliquer la taille d'écran (dPR) et UA appropriées à cet appareil, ainsi que les événements tactiles complets et la fenêtre d'affichage. Vous pouvez essayer des préréglages particuliers ou modifier facilement ces caractéristiques un par un.
Rendez-vous sur 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, regardez ma vidéo de 23 minutes pendant le Chrome Dev Summit sur les outils de développement pour mobile: