Cet article fait suite à l’article Chrome : Bien débuger avec la barre d’outils.
Ajouter une Watch Expression
Lors de debug JavaScript, vous devez regarder dans vos objets pour surveiller l’évolution des valeurs de vos variables. Chrome permet de rajouter des expressions afin de plus facilement surveiller ces valeurs. Ces expressions sont gardées au rafraîchissement de la page.
Les Watch Expressions sont gérés dans l’onglet Sources, dans la partie droite, dans l’accordéon du même nom. L’ajout se fait en cliquant sur le +. Il suffit ensuite d’entrer l’expression dans la textbox qui propose l’auto-complétion. Les valeurs sont automatiquement mis en jour en debug et il est possible de les rafraîchir via l’icône de rechargement.
Emuler les événements de touch
Aujourd’hui les tablettes et smartphones sont de plus en plus répandu et beaucoup les utilisent pour naviguer sur Internet. Sur ces appareils sans souris, ce sont des événements « touch » (avec les doigts) qui sont émis. Chrome permet d’émuler ces événements touch. Pour cela il faut aller dans la barre de développement de Chrome, aller dans les préférences (icône en bas à droite en forme d’engrenage), et aller dans Overrides et cocher la case Emulate touch events. Bien entendu, vous ne pourrez pas simuler plusieurs doigts mais c’est déjà ça !!
Emuler un User Agent et la résolution d’un appareil
Chaque navigateur peut être identifié par ce que l’on appelle un User Agent. Cette information est envoyée à chaque requête au serveur et contient notamment des informations concernant le nom de l’application, la version, le système d’exploitation, la langue, etc…
Il est ainsi possible de modifier la réponse en fonction des informations de l’User-Agent comme renvoyé une page spécifique pour les appareils mobile par exemple.
Chrome permet de modifier cet User-Agent. Pour cela, il faut ouvrir la barre de développement de Chrome, aller dans les préférences (icône en bas à droite en forme d’engrenage), et aller dans Overrides et cocher User Agent. Une liste des principaux navigateur et appareils sont pré-configurés (Firefox, IE, IPhone, IPad, Android, …)
Il est également possible de simuler une résolution (j’avais expliqué dans un post précédent comment le faire avec Firefox) encochant l’option Device metrics. On peut choisir une résolution de manière manuelle et définir le facteur de zoom (Font scale factor). Dans le cas d’un appareil mobile, la sélection d’un user agent met à jour automatiquement la configuration avec celle de l’appareil choisi. Super Pratique !!!!
Voici en exemple mon CV configuré pour un téléphone Android Nexus S.
Simuler une géolocalisation
Aujourd’hui, de plus en plus d’application utilise la géolocalisation pour offrir des résultats adaptés à notre localisation (ex : pages jaunes). Chrome permet de simuler une géolocalisation et une position non disponible.
Emuler un média CSS
CSS permet d’adapter le rendu suivant le média sur lequel est affiché le site (écrans, projecteurs, imprimante, tv, Synthèses vocales, …). Chrome permet d’émuler un média. Cela se fait toujours dans les préférences de Chrome, Overrides, cocher Emulate CSS media et sélectionner le média à cibler. Cela s’avère très pratique notamment dans le cas de l’impression (j’avais évoquer la gestion des liens lors de l’impression dans un précédent article). Ci dessous, l’exemple de mon CV via l’émulateur avec le média print :
Console.Table
Vous utilisez surement abusivement de console.log pour débuguer vos scripts. Console.table est une méthode qui permet d’afficher le résultat sous la forme d’un tableau. Cela est pratique pour visualiser les objets de types Arrays mais également les objets.
A noter, que console.table() est également disponible sous Firebug.
Voici un article complet de présentation de console.table().
