Un nouveau mode d'appareil pour une génération axée sur le mobile
Il y a un peu plus d'un an, nous avons lancé le mode Appareil, qui permet d'émuler des appareils et de travailler avec des conceptions responsives. Il est maintenant temps de passer à sa première mise à niveau majeure, à partir de Chrome 49. Qu'est-ce qui a changé ?
Le mobile devient le point de départ dans les outils pour les développeurs Chrome. Bien que nous proposions des moyens d'émuler le mobile par le passé, le développement par défaut était sur ordinateur. L'émulation mobile devait toujours être activée. Maintenant que la consommation de sites mobiles a dépassé celle des ordinateurs dans de nombreux endroits, nous changeons également de position dans DevTools.
Nouveautés
Tout d'abord, l'interface utilisateur est simplifiée et utilise beaucoup moins d'espace. Nous nous attendons à ce que le nouveau mode Appareil devienne le mode de développement principal pour la plupart des utilisateurs. Une conception claire et simple qui étend la barre de navigation principale des outils de développement était donc nécessaire.
Nouvelle règle d'appareil de saut rapide au-dessus des requêtes multimédias.
De plus, nous avons centré la fenêtre d'affichage et ajouté une nouvelle règle d'appareil de saut rapide en haut. Cette fonctionnalité est très utile lors de la conception responsive, car elle vous donne une idée des tailles d'appareil les plus courantes.
Enfin, de nombreuses options ont été regroupées ou masquées derrière un bouton d'activation dans la mesure du possible. Ces nouvelles options composites facilitent grandement le changement de mode. Pour activer ou désactiver certaines commandes ou personnaliser votre expérience de la barre d'outils, cliquez sur l'icône du menu à trois points.
Responsive par défaut
La barre d'outils principale des outils pour les développeurs s'étend désormais sur le côté gauche de la fenêtre du navigateur et inclut les outils les plus importants pour émuler divers appareils mobiles et ordinateurs de bureau. Vous avez le choix entre deux modes de développement:
- réactifs
- Appareil spécifique
Dans les deux modes, le viewport se trouve dans sa propre fenêtre redimensionnable dans Chrome. L'avantage est que vous pouvez maximiser la fenêtre de votre navigateur et les outils de développement comme vous le souhaitez, et éviter qu'ils ne sautent lorsque vous testez plusieurs tailles de votre page et que vous passez d'une taille à l'autre.
Le mode Responsive est celui que vous devez utiliser pendant l'itération active pour vous assurer que votre site fonctionne sur toutes sortes d'appareils, et pas seulement sur quelques-uns. Dans ce mode, les poignées à côté de la fenêtre d'affichage sont librement redimensionnables.
Appareil spécifique : lorsque vous choisissez un appareil spécifique et que vous verrouillez la fenêtre d'affichage sur sa taille. Cette option est utile lorsque vous souhaitez apporter les dernières corrections et améliorations pour quelques appareils populaires à l'approche du lancement. C'est pourquoi nous n'affichons pas seulement une liste énorme de toutes sortes d'appareils dans le menu déroulant, mais les plus populaires actuellement. Si vous en sélectionnez un, nous faisons de notre mieux pour qu'il se comporte le plus fidèlement possible: les événements tactiles, l'agent utilisateur, le viewport, le chrome de l'appareil et l'UI (le cas échéant) sont tous émulés.
Débogage à distance intégré
Les émulations, même les meilleures, ne peuvent pas tout faire. Il existe des choses que les émulations ne peuvent tout simplement pas faire aujourd'hui, par exemple:
- Vérifiez si un bouton est suffisamment grand pour votre pouce.
- Testez les performances de votre site sur un téléphone plus lent.
- Déboguer les anomalies et les limites aléatoires de certains appareils.
Pour tester suffisamment tous ces scénarios, vous devez tester, travailler et déboguer à l'aide d'appareils physiques réels.
Depuis un certain temps, vous pouvez accéder à chrome://inspect, connecter votre appareil via USB et ouvrir une session de débogage à distance via les outils de développement. Nous sommes allés encore plus loin et avons refactorisé l'apparence et le comportement du débogage à distance, en l'intégrant au cœur de DevTools. Au lieu d'accéder à une autre page, vous pouvez désormais accéder à Inspecter les appareils sous forme de boîte de dialogue directement dans le nouveau menu principal. Cela permet d'inclure beaucoup plus facilement le débogage physique dans votre workflow. Il vous suffit de brancher votre téléphone, sans avoir à quitter vos outils de développement.
Nouveaux emplacements pour le reste des anciennes commandes d'émulation
Étant donné que le mobile est désormais le paramètre par défaut dans DevTools, des fonctionnalités telles que le débit limité du réseau ont été déplacées vers leur emplacement approprié, dans ce cas le panneau "Network" (Réseau).
Certaines fonctionnalités, comme l'émulation de capteurs ou les paramètres de rendu comme l'émulation de supports papier, ont été déplacées vers un emplacement cohérent dans le panneau latéral. Vous trouverez tous les extras dans le nouveau menu principal, sous "Plus d'outils".
Nous savons que ce changement important devra être adopté par tous. Vous trouverez une couverture complète de tout ce qu'il contient dans la documentation sur le mode Appareil récemment mise à jour. N'hésitez pas à nous contacter sur Twitter ou, si vous avez besoin de plus de 140 caractères, sur notre outil de suivi des bugs (oui, même pour les demandes de fonctionnalités).