Travailler avec le mode appareil

Bien que l'émulation complète des appareils mobiles sur Chrome soit impossible, le mode appareil vous facilite la vie. Tout d’abord, cliquez sur le petit pictogramme de smartphone affiché dans le coin supérieur gauche de l’écran Outils de développement. Chrome adaptera la vue d'une manière similaire à celle illustrée dans la figure.

Les listes déroulantes en haut de l'écran vous permettent de sélectionner divers appareils couramment utilisés, allant de l'ancien Samsung Galaxy S5 aux produits plus récents tels que l'iPhone X. Gardez à l’esprit que cette fonctionnalité ne change pas le moteur de rendu réel. Le navigateur fait sa magie uniquement en ajustant les coordonnées de la fenêtre. Cette limitation s'applique également à la rotation de l'écran, que vous activez via le pictogramme Rotation dans la barre d'outils.

Les applications mobiles utilisent généralement les données des capteurs. Chrome peut les émuler – ouvrez le menu hamburger des outils de développement. Ensuite, sélectionnez Plus d'outils > Capteurs. La fenêtre de la console occupe un volet supplémentaire avec les paramètres du capteur. Ils donnent accès à la géolocalisation, à l’accéléromètre et à la saisie tactile avancée.

Par souci d’exhaustivité, réitérons que les tests sur ordinateur ne peuvent pas remplacer les « exécutions d’acceptation » sur un combiné. Les applications mobiles vivent et meurent grâce à leur haptique, qui est complètement différente de celle que l'on trouve sur un PC.

Au moment d’écrire ces lignes, Google n’a pas « unifié » les différents aspects du mode appareil. Les différentes fonctions (décrit en détail ici) pourrait bénéficier d’une nouvelle interface utilisateur à l’avenir – restez à l’écoute pour de petits changements à cet égard.

Qu'est-ce que la console ?

Le simple fait d'envoyer des informations de journalisation via console.log sent les années 1990. Pourquoi ne pas utiliser certaines fonctionnalités avancées à la place? L'une des fonctionnalités déterminantes d'Android est LogCat: les développeurs peuvent émettre des messages de journalisation avec différents niveaux de gravité. Chrome prend également en charge cette fonctionnalité. Utilisez simplement l’une des méthodes suivantes :

console.debug() == console.log()
console.info()
console.warn()
console.error()

La console de Chrome ne se limite pas à afficher des informations. Vous pouvez également interagir avec le contenu de votre site Web d’une manière qui n’est pas sans rappeler PowerShell ou BASH. Lorsque vous travaillez sur du code, veillez à regarder la liste déroulante en haut de l'écran.

Il vous permet de sélectionner l'emplacement d'exécution de JavaScript: de nombreux types de contenu résident dans leur propre iframe. Ils ne peuvent pas être atteints par le code entré dans le contexte d'exécution supérieur. Une fois la bonne zone d'exécution sélectionnée, modifier le contenu des éléments est aussi simple que de saisir une seule commande :

document.getElementById('changeMyText'). textContent = 'Hello'

La console de Chrome a tendance à être inondée lorsque les projets deviennent complexes. Ce problème est résolu en rassemblant des messages similaires. Cliquez cinq fois sur un bouton et émettez le même message à chaque fois – il apparaîtra une fois. Désactivez cela en ouvrant Paramètres > Général. Ensuite, cochez l'option Afficher les horodatages. Vous pouvez également introduire des balises et utiliser la fonction Filtre.

Analyse avancée

Trouver des erreurs de codage n’est qu’une partie du jeu. À mesure que les applications deviennent plus complexes, des problèmes de mémoire, de performances et de consommation réseau surviennent. Chrome vous aide à résoudre ces problèmes, grâce à un ensemble complet de fonctionnalités d'analyse avancées pour traquer les problèmes de performances.

Le navigateur fournit des analyseurs similaires aux profileurs trouvés dans les systèmes d'exploitation embarqués. Par exemple, l'analyseur de mémoire fournit un aperçu de la partie de votre code qui alloue de la mémoire. Ces informations permettent des optimisations ciblées; « pirater » le code a tendance à être improductif.

L'ouverture de l'onglet Performances vous permet de ralentir à la fois le réseau et le processeur. De cette façon, votre poste de travail simule des ordinateurs plus lents. Combinez cela avec l'analyse de la consommation de temps présentée dans la figure accompagnant cette étape pour obtenir une vue à 360 degrés des performances de l'application. Il y a encore beaucoup à apprendre sur ce sujet, et cet aperçu fournit une excellente introduction aux fonctionnalités avancées de débogage.

Page suivante: Démarrez avec Material Design