Chrome : Bien débuger avec la barre d’outils # 2

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.

WatchExpression

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 les événement touch

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.

Emuler un User-Agent et une résolution

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 une géolocalisation

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 :

Emuler 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.

Console.Table

A noter, que console.table() est également disponible sous Firebug.

Voici un article complet de présentation de console.table().

Liens

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *