Nouveau mode Appareil pour les appareils mobiles
Nous avons lancé le mode Appareil, qui permet d'émuler des appareils et de travailler avec des conceptions réactives il y a un peu plus d'un an. Il est temps de procéder à sa première mise à niveau majeure, qui débutera avec Chrome 49. Quoi de neuf ?
Les appareils mobiles deviennent le point de départ des outils pour les développeurs Chrome. Nous proposions auparavant des outils d'émulation pour mobile, mais le mode de développement par défaut était l'ordinateur de bureau. L'émulation mobile devait toujours être activée. Maintenant que la consommation de sites mobiles a dépassé celle des ordinateurs à de nombreux endroits, nous modifions également notre position dans les outils de développement.
Nouveautés
Avant tout, l'interface utilisateur est simplifiée et occupe beaucoup moins d'espace. Pour la plupart des utilisateurs, le nouveau mode Appareil devrait devenir le mode de développement principal. C'est pourquoi nous avions besoin d'une conception épurée et simple étendant la barre de navigation principale des outils de développement.
Nouvelle règle rapide pour les appareils, au-dessus des requêtes multimédias.
De plus, nous avons centré la fenêtre d'affichage et ajouté une nouvelle règle de saut rapide en haut, ce qui est très utile pour la conception réactive, car elle vous donne une idée des tailles d'appareils les plus courantes.
Enfin, de nombreuses options ont été regroupées ou dissimulées derrière un bouton d'activation/de désactivation dans la mesure du possible. Ces nouvelles options composites facilitent le passage d'un mode à l'autre. Pour activer ou désactiver certaines commandes ou personnaliser la barre d'outils,
Annonce responsive par défaut
La barre d'outils principale des outils de développement se développe 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 de bureau. Vous avez le choix entre deux modes de développement:
- réactifs
- Appareil spécifique
Dans les deux modes, la fenêtre d'affichage se trouve dans sa propre fenêtre redimensionnable dans Chrome. L'avantage est que vous pouvez optimiser la fenêtre de votre navigateur et les outils de développement comme vous le souhaitez, sans qu'ils ne se déplacent lorsque vous testez plusieurs tailles de votre page et que vous alternerez entre elles.
Responsive est le mode à utiliser lors des itérations actives pour vous assurer que votre site fonctionne sur toutes sortes d'appareils, et pas seulement sur quelques appareils spécifiques. Dans ce mode, les poignées situées à côté de la fenêtre d'affichage peuvent être librement redimensionnables.
Appareil spécifique fait référence au fait de choisir un appareil spécifique et de verrouiller la fenêtre d'affichage à sa taille. Cela s'avère utile lorsque vous souhaitez apporter les corrections finales et les points de contact pour quelques appareils populaires à venir. C'est pourquoi nous ne montrons pas uniquement une longue liste de toutes sortes d'appareils dans le menu déroulant, mais les plus populaires actuellement. Si vous sélectionnez une option, nous faisons de notre mieux pour qu'elle se comporte aussi fidèlement que possible: les événements tactiles, l'user-agent, la fenêtre d'affichage et l'appareil Chrome et l'UI (le cas échéant) sont émulés.
Débogage à distance intégré
Les émulations, même les meilleures disponibles, ne peuvent vous mener que jusqu'ici. Il y a simplement des choses que les émulations ne peuvent pas faire aujourd'hui, comme:
- Vérifiez si un bouton est assez grand pour votre pouce.
- Testez les performances de votre site sur un téléphone plus lent.
- Déboguer les bizarreries et les limites de certains appareils
Pour tester suffisamment tous ces scénarios, vous devez effectuer des tests, des opérations et des débogages à l'aide d'appareils physiques réels.
Pendant quelque 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. Mais nous sommes allés plus loin et refactorisé le fonctionnement et l'apparence du débogage à distance, en l'intégrant au cœur des outils de développement. Au lieu d'accéder à une autre page, vous pouvez désormais accéder à Inspecter les appareils via une boîte de dialogue directement dans le nouveau menu principal. Il est ainsi beaucoup plus facile d'inclure le débogage physique dans votre workflow. Il vous suffit de brancher votre téléphone, pas besoin de quitter vos outils de développement.
Nouvelles maisons pour les autres paramètres d'émulation
Étant donné que le mobile est désormais la valeur par défaut dans les outils de développement, des fonctionnalités telles que la limitation de la bande passante ont été déplacées vers l'accueil approprié, en l'occurrence le panneau "Network" (Réseau).
Certaines fonctionnalités, telles que l'émulation des capteurs ou les paramètres de rendu, comme l'émulation des supports d'impression, ont été déplacées à un même endroit dans le panneau. Tous les options supplémentaires sont disponibles dans le nouveau menu principal, sous "Plus d'outils".
Nous savons qu'il s'agit d'un changement important auquel nous devrons tous nous habituer. Vous trouverez une présentation complète de son contenu dans la documentation sur le mode Appareil récemment mise à jour. Votre avis nous intéresse sur Twitter ou si vous avez besoin de plus de 140 caractères, via notre outil de suivi des bugs (même pour les demandes de fonctionnalités).